import Link from "next/link";
import { Plus, Edit, ExternalLink } from "lucide-react";
import { PageHeader } from "@/components/admin/form";
import { DeleteButton } from "@/components/admin/delete-button";
import { listAllPosts } from "@/lib/data";
import { deleteBlogPost } from "@/lib/admin-actions";

export default async function BlogListPage() {
  const posts = await listAllPosts();

  return (
    <div>
      <PageHeader
        title="Blog"
        description="Yazılarınızı yönetin ve yayınlayın."
        action={
          <Link
            href="/admin/blog/new"
            className="inline-flex items-center gap-2 rounded-full bg-[var(--navy)] px-4 py-2 text-sm font-medium text-white transition hover:bg-[var(--navy-700)]"
          >
            <Plus className="size-4" /> Yeni yazı
          </Link>
        }
      />

      <div className="mt-6 overflow-hidden rounded-2xl border border-[var(--border)] bg-white">
        <table className="w-full text-sm">
          <thead className="bg-[var(--navy-50)] text-xs uppercase tracking-wider text-[var(--muted)]">
            <tr>
              <th className="px-4 py-3 text-left">Başlık</th>
              <th className="px-4 py-3 text-left">Slug</th>
              <th className="px-4 py-3 text-left">Durum</th>
              <th className="px-4 py-3 text-left">Yayın</th>
              <th className="px-4 py-3 text-right">İşlem</th>
            </tr>
          </thead>
          <tbody>
            {posts.length === 0 && (
              <tr>
                <td colSpan={5} className="px-4 py-12 text-center text-[var(--muted)]">
                  Henüz yazı yok. İlk yazınızı oluşturun.
                </td>
              </tr>
            )}
            {posts.map((p) => (
              <tr key={p.$id} className="border-t border-[var(--border)]">
                <td className="px-4 py-3 font-medium text-[var(--navy)]">{p.title}</td>
                <td className="px-4 py-3 text-[var(--muted)]">/{p.slug}</td>
                <td className="px-4 py-3">
                  <StatusBadge status={p.status} />
                </td>
                <td className="px-4 py-3 text-[var(--muted)]">
                  {p.published_at
                    ? new Date(p.published_at).toLocaleDateString("tr-TR")
                    : "—"}
                </td>
                <td className="px-4 py-3">
                  <div className="flex items-center justify-end gap-2">
                    {p.status === "published" && (
                      <Link
                        href={`/blog/${p.slug}`}
                        target="_blank"
                        className="rounded-md border border-[var(--border)] p-1.5 text-[var(--muted)] hover:text-[var(--navy)]"
                      >
                        <ExternalLink className="size-3.5" />
                      </Link>
                    )}
                    <Link
                      href={`/admin/blog/${p.$id}/edit`}
                      className="inline-flex items-center gap-1 rounded-md border border-[var(--border)] bg-white px-2.5 py-1.5 text-xs font-medium text-[var(--navy)] hover:bg-[var(--navy-50)]"
                    >
                      <Edit className="size-3.5" />
                      Düzenle
                    </Link>
                    <form action={deleteBlogPost}>
                      <input type="hidden" name="id" value={p.$id} />
                      <DeleteButton />
                    </form>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function StatusBadge({ status }: { status?: string | null }) {
  const isPub = status === "published";
  return (
    <span
      className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${
        isPub
          ? "bg-green-100 text-green-800"
          : "bg-amber-100 text-amber-800"
      }`}
    >
      {isPub ? "Yayında" : "Taslak"}
    </span>
  );
}