import Link from "next/link";
import { requireAdmin } from "../../lib/auth";
import { listRikxRondes } from "../../lib/db";
import { listExperts } from "../../lib/experts";
import { AppHeader } from "../AppHeader";
import { impersonateExpert } from "./actions";
import { DeleteExpertButton, NewExpertForm, ResendInviteButton } from "./InviteForms";

export default async function ExpertsPage() {
  const session = await requireAdmin();
  const experts = listExperts();
  const rondes = listRikxRondes();
  const rondeLabel = new Map(rondes.map((r) => [r.id, r.label]));

  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-10">
        <section>
          <h1 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100 mb-1">Experts ({experts.length})</h1>
          <p className="text-sm text-zinc-500 mb-4">
            Experts loggen in op hun eigen pagina en beoordelen daar de projecten in waardebepaling van hun rondes.
          </p>
          {experts.length === 0 ? (
            <p className="text-sm text-zinc-500">Nog geen experts uitgenodigd.</p>
          ) : (
            <div className="rounded-xl border border-zinc-200 dark:border-zinc-800 overflow-x-auto">
              <table className="w-full text-sm">
                <thead className="bg-zinc-50 dark:bg-zinc-900 text-zinc-500 dark:text-zinc-400">
                  <tr>
                    <th className="text-left px-4 py-3 font-medium">Naam</th>
                    <th className="text-left px-4 py-3 font-medium">E-mailadres</th>
                    <th className="text-left px-4 py-3 font-medium">Rikx rondes</th>
                    <th className="text-left px-4 py-3 font-medium">Status</th>
                    <th className="text-right px-4 py-3 font-medium">Beoordelingen</th>
                    <th className="px-4 py-3" colSpan={4}></th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-zinc-100 dark:divide-zinc-800">
                  {experts.map((e) => (
                    <tr key={e.id} className="bg-white dark:bg-zinc-950 align-top">
                      <td className="px-4 py-3 font-medium text-zinc-900 dark:text-zinc-100">{e.name}</td>
                      <td className="px-4 py-3 text-zinc-600 dark:text-zinc-400">{e.email}</td>
                      <td className="px-4 py-3 text-zinc-700 dark:text-zinc-300">
                        {e.rondeIds.length ? e.rondeIds.map((id) => rondeLabel.get(id)).join(", ") : "—"}
                      </td>
                      <td className="px-4 py-3">
                        <span
                          className={`inline-flex rounded-full px-2.5 py-0.5 text-xs font-medium ${
                            e.actief ? "bg-green-100 text-green-800" : "bg-zinc-100 text-zinc-600"
                          }`}
                        >
                          {e.actief ? "Actief" : "Uitgenodigd"}
                        </span>
                      </td>
                      <td className="px-4 py-3 text-right tabular-nums">{e.aantalBeoordelingen}</td>
                      <td className="px-4 py-3 text-right">
                        {/* Opnieuw uitnodigen is ook de manier om een vergeten wachtwoord opnieuw in te stellen */}
                        <ResendInviteButton id={e.id} label={e.actief ? "Nieuwe inloglink" : "Opnieuw uitnodigen"} />
                      </td>
                      <td className="px-4 py-3 text-right">
                        {/* Bekijk de expertpagina zoals deze expert hem ziet (alleen lezen) */}
                        <form action={impersonateExpert}>
                          <input type="hidden" name="id" value={e.id} />
                          <button type="submit" className="text-xs text-blue-600 hover:text-blue-800 dark:text-blue-400 whitespace-nowrap">
                            Inloggen als ↗
                          </button>
                        </form>
                      </td>
                      <td className="px-4 py-3 text-right">
                        <Link href={`/experts/${e.id}`} className="text-xs text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100">
                          Bewerken
                        </Link>
                      </td>
                      <td className="px-4 py-3 text-right">
                        <DeleteExpertButton id={e.id} name={e.name} aantalBeoordelingen={e.aantalBeoordelingen} />
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </section>

        <section>
          <h2 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100 mb-4">Nieuwe expert uitnodigen</h2>
          <NewExpertForm rondes={rondes} />
        </section>
      </main>
    </div>
  );
}