import Link from "next/link";
import { notFound } from "next/navigation";
import { requireAdmin } from "../../../lib/auth";
import { listRikxRondes } from "../../../lib/db";
import { getExpert } from "../../../lib/experts";
import { AppHeader } from "../../AppHeader";
import { updateExpert } from "../actions";
import { RondeCheckboxes } from "../InviteForms";

export default async function EditExpertPage({
  params,
  searchParams,
}: {
  params: Promise<{ id: string }>;
  searchParams: Promise<{ error?: string }>;
}) {
  const session = await requireAdmin();
  const { id } = await params;
  const { error } = await searchParams;
  const expert = getExpert(Number(id));
  if (!expert) notFound();

  const errorMsg =
    error === "email" ? "Er bestaat al een gebruiker met dit e-mailadres." : error === "missing" ? "Vul een naam en een geldig e-mailadres in." : null;
  const inputClass =
    "h-10 rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-3 text-sm text-zinc-900 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-rikx-orange";

  return (
    <div className="min-h-screen bg-zinc-50 dark:bg-zinc-950">
      <AppHeader email={session.email} active="crm" />

      <main className="max-w-5xl mx-auto px-4 sm:px-6 py-10 flex flex-col gap-6">
        <Link href="/experts" className="text-sm text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors">
          ← Terug naar experts
        </Link>
        <h1 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">Expert bewerken</h1>
        {errorMsg && <p className="text-sm text-red-600 dark:text-red-400">{errorMsg}</p>}
        <form
          action={updateExpert}
          className="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 grid grid-cols-1 sm:grid-cols-2 gap-4"
        >
          <input type="hidden" name="id" value={expert.id} />
          <label className="flex flex-col gap-1">
            <span className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Naam</span>
            <input name="name" required defaultValue={expert.name} className={inputClass} />
          </label>
          <label className="flex flex-col gap-1">
            <span className="text-sm font-medium text-zinc-700 dark:text-zinc-300">E-mailadres</span>
            <input name="email" type="email" required defaultValue={expert.email} className={inputClass} />
          </label>
          <fieldset className="sm:col-span-2 flex flex-col gap-2">
            <legend className="text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">Rikx rondes</legend>
            <RondeCheckboxes rondes={listRikxRondes()} selected={expert.rondeIds} />
          </fieldset>
          <div className="sm:col-span-2 flex gap-3">
            <button
              type="submit"
              className="rounded-lg bg-rikx-maroon hover:bg-rikx-maroon-light px-5 py-2 text-sm font-medium text-white transition-colors"
            >
              Opslaan
            </button>
            <Link
              href="/experts"
              className="rounded-lg border border-zinc-300 dark:border-zinc-700 px-5 py-2 text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors"
            >
              Annuleren
            </Link>
          </div>
        </form>
      </main>
    </div>
  );
}