import Link from "next/link";
import type { Metadata } from "next";
import { getAllBlogPosts } from "@/app/lib/content";
import { EmptyState, PageHeader } from "@/app/admin/_components/ui";

export const metadata: Metadata = {
  title: "Blog posts",
};

export default async function BlogsAdminPage() {
  const posts = await getAllBlogPosts();

  return (
    <div>
      <PageHeader
        title="Blog posts"
        description="Manage homepage news and featured stories."
        action={
          <Link
            href="/admin/blogs/new"
            className="rounded-full bg-[#1f3fb8] px-5 py-2.5 text-sm font-semibold text-white hover:bg-[#18339a]"
          >
            Add post
          </Link>
        }
      />

      {posts.length === 0 ? (
        <EmptyState message="No blog posts yet. Add your first story." />
      ) : (
        <div className="overflow-hidden rounded-2xl border border-[#d9e2f7] bg-white">
          <ul className="divide-y divide-[#eef1fb]">
            {posts.map((post) => (
              <li key={post.id}>
                <Link
                  href={`/admin/blogs/${post.id}`}
                  className="flex flex-col gap-2 px-4 py-4 hover:bg-[#f8faff] sm:flex-row sm:items-center sm:justify-between"
                >
                  <div>
                    <p className="font-semibold">{post.title}</p>
                    <p className="text-sm text-[#5a688d]">
                      {post.category}
                      {post.featured ? " · Featured" : ""}
                    </p>
                  </div>
                  <div className="flex items-center gap-3 text-xs text-[#7a88ad]">
                    <span>Order {post.sortOrder}</span>
                    <span
                      className={`rounded-full border px-2.5 py-0.5 font-semibold ${
                        post.published
                          ? "border-emerald-200 bg-emerald-50 text-emerald-700"
                          : "border-slate-200 bg-slate-50 text-slate-600"
                      }`}
                    >
                      {post.published ? "Published" : "Draft"}
                    </span>
                  </div>
                </Link>
              </li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
}
