import Link from "next/link";
import { notFound } from "next/navigation";
import type { Metadata } from "next";
import { prisma } from "@/app/lib/db";
import {
  deleteAdmission,
  updateAdmissionStatus,
} from "@/app/actions/admin";
import { PageHeader, StatusBadge } from "@/app/admin/_components/ui";
import { formatDate } from "@/app/admin/_components/utils";

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

export default async function AdmissionDetailPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const admission = await prisma.admissionSubmission.findUnique({
    where: { id },
  });
  if (!admission) notFound();

  const updateAction = updateAdmissionStatus.bind(null, admission.id);
  const deleteAction = deleteAdmission.bind(null, admission.id);

  return (
    <div>
      <PageHeader
        title={`${admission.studentFirstName} ${admission.studentLastName}`}
        description={admission.program}
        action={
          <Link
            href="/admin/admissions"
            className="text-sm font-semibold text-[#1f3fb8] hover:underline"
          >
            ← Back to inbox
          </Link>
        }
      />

      <div className="grid grid-cols-1 lg:grid-cols-[1.4fr_0.8fr] gap-6">
        <section className="rounded-2xl border border-[#d9e2f7] bg-white p-5 sm:p-6 space-y-5">
          <div className="flex items-center gap-3">
            <StatusBadge status={admission.status} />
            <span className="text-xs text-[#7a88ad]">
              Received {formatDate(admission.createdAt)}
            </span>
          </div>

          <div>
            <h2 className="text-sm font-semibold text-[#132b87]">Student</h2>
            <dl className="mt-3 grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
              <Info label="Date of birth" value={admission.studentDob} />
              <Info label="Gender" value={admission.studentGender || "—"} />
              <Info label="Grade" value={admission.gradeLevel} />
              <Info
                label="Current / previous school"
                value={admission.currentSchool || "—"}
              />
            </dl>
          </div>

          <div>
            <h2 className="text-sm font-semibold text-[#132b87]">Program</h2>
            <dl className="mt-3 grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
              <Info label="Program" value={admission.program} />
              <Info label="Preferred start" value={admission.startDate} />
            </dl>
          </div>

          <div>
            <h2 className="text-sm font-semibold text-[#132b87]">
              Parent / Guardian
            </h2>
            <dl className="mt-3 grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
              <Info label="Name" value={admission.parentName} />
              <Info label="Relationship" value={admission.relationship} />
              <Info label="Email" value={admission.email} />
              <Info label="Phone" value={admission.phone} />
            </dl>
          </div>

          <div>
            <h2 className="text-sm font-semibold text-[#132b87]">Notes</h2>
            <p className="mt-2 whitespace-pre-wrap text-sm leading-relaxed text-[#3d4f84]">
              {admission.notes || "—"}
            </p>
          </div>
        </section>

        <aside className="space-y-4">
          <form
            action={updateAction}
            className="rounded-2xl border border-[#d9e2f7] bg-white p-5 space-y-3"
          >
            <h2 className="text-sm font-semibold">Update status</h2>
            <select
              name="status"
              defaultValue={admission.status}
              className="w-full rounded-lg border border-[#d9e2f7] px-3 py-2.5 text-sm"
            >
              <option value="new">New</option>
              <option value="in_progress">In progress</option>
              <option value="resolved">Resolved</option>
            </select>
            <button
              type="submit"
              className="w-full rounded-full bg-[#1f3fb8] px-4 py-2.5 text-sm font-semibold text-white hover:bg-[#18339a]"
            >
              Save status
            </button>
          </form>

          <form
            action={deleteAction}
            className="rounded-2xl border border-red-100 bg-white p-5"
          >
            <h2 className="text-sm font-semibold text-red-700">
              Delete application
            </h2>
            <p className="mt-1 text-xs text-[#7a88ad]">
              This permanently removes the submission.
            </p>
            <button
              type="submit"
              className="mt-4 w-full rounded-full border border-red-200 px-4 py-2.5 text-sm font-semibold text-red-600 hover:bg-red-50"
            >
              Delete
            </button>
          </form>
        </aside>
      </div>
    </div>
  );
}

function Info({ label, value }: { label: string; value: string }) {
  return (
    <div>
      <dt className="text-[#7a88ad]">{label}</dt>
      <dd className="font-medium">{value}</dd>
    </div>
  );
}
