rikx-beheer/app/experts/InviteForms.tsx

"use client";

import { useActionState, useState } from "react";
import type { RikxRonde } from "../../lib/db";
import { createExpert, deleteExpert, resendInvite, type InviteState } from "./actions";

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 labelClass = "text-sm font-medium text-zinc-700 dark:text-zinc-300";

// Melding na het aanmaken of opnieuw uitnodigen; bij een link (geen SMTP) met kopieerknop
export function InviteResult({ state }: { state: InviteState }) {
  const [copied, setCopied] = useState(false);
  if (state.status === "idle") return null;
  if (state.status === "error") return <p className="text-sm text-red-600 dark:text-red-400">{state.message}</p>;
  if (state.status === "sent") return <p className="text-sm text-green-700 dark:text-green-400">{state.message}</p>;
  return (
    <div className="flex flex-col gap-2 rounded-lg bg-orange-50 dark:bg-zinc-800 px-4 py-3 text-sm">
      <p className="text-zinc-800 dark:text-zinc-200">{state.message}</p>
      <div className="flex flex-wrap items-center gap-2">
        <input readOnly value={state.link} onFocus={(e) => e.target.select()} className={`${inputClass} flex-1 min-w-0 font-mono text-xs`} />
        <button
          type="button"
          onClick={async () => {
            await navigator.clipboard.writeText(state.link);
            setCopied(true);
          }}
          className="rounded-lg border border-zinc-300 dark:border-zinc-700 px-3 h-10 text-sm hover:bg-white dark:hover:bg-zinc-700"
        >
          {copied ? "Gekopieerd" : "Kopiëren"}
        </button>
      </div>
    </div>
  );
}

export function RondeCheckboxes({ rondes, selected = [] }: { rondes: RikxRonde[]; selected?: number[] }) {
  if (rondes.length === 0) {
    return <p className="text-sm text-zinc-500">Er zijn nog geen Rikx rondes.</p>;
  }
  return (
    <div className="flex flex-wrap gap-x-5 gap-y-2">
      {rondes.map((r) => (
        <label key={r.id} className="flex items-center gap-2 text-sm text-zinc-800 dark:text-zinc-200">
          <input type="checkbox" name="ronde_ids" value={r.id} defaultChecked={selected.includes(r.id)} className="accent-rikx-orange" />
          {r.label}
        </label>
      ))}
    </div>
  );
}

export function NewExpertForm({ rondes }: { rondes: RikxRonde[] }) {
  const [state, action, pending] = useActionState(createExpert, { status: "idle" } as InviteState);
  return (
    <form
      action={action}
      // Na succes leeg beginnen voor de volgende expert
      key={state.status === "sent" || state.status === "link" ? state.message : "form"}
      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"
    >
      <label className="flex flex-col gap-1">
        <span className={labelClass}>Naam</span>
        <input name="name" required className={inputClass} />
      </label>
      <label className="flex flex-col gap-1">
        <span className={labelClass}>E-mailadres</span>
        <input name="email" type="email" required className={inputClass} />
      </label>
      <fieldset className="sm:col-span-2 flex flex-col gap-2">
        <legend className={`${labelClass} mb-2`}>Rikx rondes</legend>
        <RondeCheckboxes rondes={rondes} />
        <span className="text-xs text-zinc-500">De expert ziet alleen projecten in waardebepaling uit deze rondes.</span>
      </fieldset>
      <div className="sm:col-span-2 flex flex-col gap-3">
        <div>
          <button
            type="submit"
            disabled={pending}
            className="rounded-lg bg-rikx-maroon hover:bg-rikx-maroon-light px-5 py-2 text-sm font-medium text-white transition-colors disabled:opacity-60"
          >
            {pending ? "Bezig…" : "Expert uitnodigen"}
          </button>
        </div>
        <InviteResult state={state} />
      </div>
    </form>
  );
}

export function ResendInviteButton({ id, label }: { id: number; label: string }) {
  const [state, action, pending] = useActionState(resendInvite, { status: "idle" } as InviteState);
  return (
    <div className="flex flex-col items-end gap-2">
      <form action={action}>
        <input type="hidden" name="id" value={id} />
        <button type="submit" disabled={pending} className="text-xs text-rikx-orange-dark hover:underline disabled:opacity-60">
          {pending ? "Bezig…" : label}
        </button>
      </form>
      {state.status !== "idle" && (
        <div className="w-80 max-w-full text-left">
          <InviteResult state={state} />
        </div>
      )}
    </div>
  );
}

export function DeleteExpertButton({ id, name, aantalBeoordelingen }: { id: number; name: string; aantalBeoordelingen: number }) {
  return (
    <form
      action={deleteExpert}
      onSubmit={(e) => {
        const extra =
          aantalBeoordelingen > 0
            ? ` Ook ${aantalBeoordelingen === 1 ? "de beoordeling" : `de ${aantalBeoordelingen} beoordelingen`} van deze expert ${aantalBeoordelingen === 1 ? "wordt" : "worden"} verwijderd; dat verandert de Rikx calculatie van die projecten.`
            : "";
        if (!confirm(`Weet je zeker dat je expert "${name}" wilt verwijderen?${extra}`)) e.preventDefault();
      }}
    >
      <input type="hidden" name="id" value={id} />
      <button type="submit" className="text-xs text-red-500 hover:text-red-700 dark:hover:text-red-400 transition-colors">
        Verwijderen
      </button>
    </form>
  );
}