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

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

export default async function ProgramsAdminPage() {
  const programs = await getAllPrograms();

  return (
    <div>
      <PageHeader
        title="Programs"
        description="Manage learning formats shown on the homepage programs section."
        action={
          <Link
            href="/admin/programs/new"
            className="rounded-full bg-[#1f3fb8] px-5 py-2.5 text-sm font-semibold text-white hover:bg-[#18339a]"
          >
            Add program
          </Link>
        }
      />

      {programs.length === 0 ? (
        <EmptyState message="No programs yet. Add your first program." />
      ) : (
        <div className="overflow-hidden rounded-2xl border border-[#d9e2f7] bg-white">
          <ul className="divide-y divide-[#eef1fb]">
            {programs.map((program) => (
              <li key={program.id}>
                <Link
                  href={`/admin/programs/${program.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">{program.title}</p>
                    <p className="text-sm text-[#5a688d] line-clamp-2">
                      {program.description}
                    </p>
                  </div>
                  <div className="flex items-center gap-3 text-xs text-[#7a88ad]">
                    <span>Order {program.sortOrder}</span>
                    <span
                      className={`rounded-full border px-2.5 py-0.5 font-semibold ${
                        program.published
                          ? "border-emerald-200 bg-emerald-50 text-emerald-700"
                          : "border-slate-200 bg-slate-50 text-slate-600"
                      }`}
                    >
                      {program.published ? "Published" : "Draft"}
                    </span>
                  </div>
                </Link>
              </li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
}
