import Link from "next/link";
import { notFound } from "next/navigation";
import type { Metadata } from "next";
import { getProgramById } from "@/app/lib/content";
import { deleteProgram, updateProgram } from "@/app/actions/admin";
import { PageHeader } from "@/app/admin/_components/ui";
import ProgramForm from "@/app/admin/_components/ProgramForm";

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

export default async function EditProgramPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const program = await getProgramById(id);
  if (!program) notFound();

  const updateAction = updateProgram.bind(null, program.id);
  const deleteAction = deleteProgram.bind(null, program.id);

  return (
    <div>
      <PageHeader
        title="Edit program"
        description={program.title}
        action={
          <Link
            href="/admin/programs"
            className="text-sm font-semibold text-[#1f3fb8] hover:underline"
          >
            ← Back
          </Link>
        }
      />
      <ProgramForm
        action={updateAction}
        submitLabel="Save changes"
        initial={{
          title: program.title,
          description: program.description,
          sortOrder: program.sortOrder,
          published: program.published,
        }}
      />
      <form action={deleteAction} className="mt-4 max-w-2xl">
        <button
          type="submit"
          className="rounded-full border border-red-200 px-5 py-2.5 text-sm font-semibold text-red-600 hover:bg-red-50"
        >
          Delete program
        </button>
      </form>
    </div>
  );
}
