import Link from "next/link";
import { MIN_WACHTWOORD_LENGTE, findInvite } from "../../../lib/experts";
import { setPassword } from "./actions";

// Openbare pagina (zonder login): een uitgenodigde expert stelt hier zijn wachtwoord in.
export default async function UitnodigingPage({
  params,
  searchParams,
}: {
  params: Promise<{ token: string }>;
  searchParams: Promise<{ error?: string }>;
}) {
  const { token } = await params;
  const { error } = await searchParams;
  const invite = findInvite(token);

  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";
  const errorMsg =
    error === "kort"
      ? `Kies een wachtwoord van minimaal ${MIN_WACHTWOORD_LENGTE} tekens.`
      : error === "verschil"
      ? "De wachtwoorden zijn niet gelijk."
      : null;

  return (
    <div className="min-h-screen flex flex-col bg-zinc-50 dark:bg-zinc-950">
      <header className="bg-rikx-orange">
        <div className="max-w-5xl mx-auto px-4 sm:px-6 py-3">
          <span className="text-white text-4xl font-extrabold tracking-tight leading-none">Rikx</span>
        </div>
      </header>
      <main className="flex-1 flex items-start justify-center px-4 py-16">
        <div className="w-full max-w-sm">
          {!invite ? (
            <div className="bg-white dark:bg-zinc-900 p-8 rounded-xl border border-zinc-200 dark:border-zinc-800 flex flex-col gap-3">
              <h1 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">Uitnodiging niet geldig</h1>
              <p className="text-sm text-zinc-600 dark:text-zinc-400">
                Deze link is verlopen of al gebruikt. Vraag een nieuwe uitnodiging aan bij Rikx, of log in als je al een
                wachtwoord hebt ingesteld.
              </p>
              <Link href="/login" className="text-sm text-rikx-orange-dark hover:underline">
                Naar inloggen
              </Link>
            </div>
          ) : (
            <form
              action={setPassword}
              className="flex flex-col gap-4 bg-white dark:bg-zinc-900 p-8 rounded-xl border border-zinc-200 dark:border-zinc-800"
            >
              <div>
                <h1 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">Welkom, {invite.name}</h1>
                <p className="text-sm text-zinc-500 mt-1">
                  Stel een wachtwoord in voor het Rikx expertteam. Je logt daarna in met {invite.email}.
                </p>
              </div>
              {errorMsg && <p className="text-sm text-red-600 dark:text-red-400">{errorMsg}</p>}
              <input type="hidden" name="token" value={token} />
              <label className="flex flex-col gap-1">
                <span className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Wachtwoord</span>
                <input name="password" type="password" required minLength={MIN_WACHTWOORD_LENGTE} autoComplete="new-password" className={inputClass} />
              </label>
              <label className="flex flex-col gap-1">
                <span className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Herhaal wachtwoord</span>
                <input name="password_herhaal" type="password" required minLength={MIN_WACHTWOORD_LENGTE} autoComplete="new-password" className={inputClass} />
              </label>
              <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"
              >
                Wachtwoord instellen
              </button>
            </form>
          )}
        </div>
      </main>
    </div>
  );
}