import Link from "next/link";
import { notFound } from "next/navigation";
import { CoachReviewActions } from "@/components/admin/coach-review-actions";
import { AdminPageHeader, StatusBadge } from "@/components/admin/admin-ui";
import { getAdminCoach } from "@/lib/admin-data";
import { formatAdminDate } from "@/lib/admin-format";

export default async function AdminCoachReviewPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const coach = await getAdminCoach(id);
  if (!coach) notFound();

  return (
    <div className="min-h-[42rem] pb-8">
      <AdminPageHeader
        eyebrow="Coach application"
        title={coach.name}
        description="Review the complete application before granting access to session and player safety tools."
        action={
          <Link
            href="/admin/coaches"
            className="inline-flex items-center gap-1.5 text-xs font-semibold text-slate-500 transition hover:text-[#1D4ED8]"
          >
            <span className="material-symbols-outlined text-[18px]">arrow_back</span>
            All applications
          </Link>
        }
      />

      <div className="mt-6 grid gap-5 xl:grid-cols-[1.45fr_0.75fr]">
        <section className="rounded-2xl border border-slate-200/80 bg-white p-6 shadow-xs sm:p-7">
          <div className="flex flex-wrap items-start justify-between gap-4">
            <div>
              <p className="text-sm font-bold text-[#0D1B2A]">{coach.email}</p>
              <p className="mt-0.5 text-xs text-slate-500">Account status: {coach.accountStatus}</p>
            </div>
            <StatusBadge value={coach.status} />
          </div>

          <dl className="mt-6 grid gap-x-8 gap-y-5 sm:grid-cols-2">
            {[
              ["WWCC reference", coach.wwccNumber],
              ["WWCC expiry", formatAdminDate(coach.expiryDate)],
              ["Home suburb", coach.suburb],
              ["Availability", coach.availability],
              ["Submitted", formatAdminDate(coach.submittedAt, true)],
              ["Preferred sports", coach.preferredSports.join(", ") || "Not provided"],
            ].map(([label, value]) => (
              <div key={label}>
                <dt className="text-[10px] font-extrabold uppercase tracking-[0.13em] text-slate-400">{label}</dt>
                <dd className="mt-1 text-sm font-semibold text-[#0D1B2A]">{value}</dd>
              </div>
            ))}
          </dl>

          <div className="mt-6 rounded-xl border border-slate-100 bg-slate-50 p-4">
            <p className="text-[10px] font-extrabold uppercase tracking-[0.13em] text-slate-500">Relevant experience</p>
            <p className="mt-1.5 whitespace-pre-wrap text-sm leading-6 text-slate-700">{coach.experience}</p>
          </div>

          {coach.verifiedAt && (
            <div className="mt-5 flex flex-wrap gap-x-8 gap-y-2 text-xs text-slate-400">
              <span>Last reviewed {formatAdminDate(coach.verifiedAt, true)}</span>
              <span>Reviewer: {coach.reviewerName || "Administrator"}</span>
            </div>
          )}
        </section>

        <CoachReviewActions
          coachId={coach.id}
          currentStatus={coach.status}
          initialNotes={coach.reviewerNotes}
        />
      </div>
    </div>
  );
}