"use client";

// Gestione della whitelist email che apre il portale di un cliente (gate OTP v2.3).
// Scritto a token semantici anche se la pagina che lo ospita è ancora a palette
// vecchia: quando /admin/clients/[id] verrà rifatta, questa sezione non si tocca.

import { useRef, useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import {
  addClientEmail,
  removeClientEmail,
  revokeClientSessions,
} from "@/app/admin/clients/[id]/actions";
import type { ClientAccessEmail } from "@/lib/admin-queries";
import { Button } from "@/components/ui/button";

export function ClientAccessSection({
  clientId,
  emails,
}: {
  clientId: string;
  emails: ClientAccessEmail[];
}) {
  const [error, setError] = useState<string | null>(null);
  const [revokeArmed, setRevokeArmed] = useState(false);
  const [revokedAt, setRevokedAt] = useState<string | null>(null);
  const [isPending, startTransition] = useTransition();
  const formRef = useRef<HTMLFormElement>(null);
  const router = useRouter();

  function handleAdd(formData: FormData) {
    setError(null);
    startTransition(async () => {
      const res = await addClientEmail(clientId, formData);
      if (!res.ok) {
        setError(res.error);
        return;
      }
      formRef.current?.reset();
      router.refresh();
    });
  }

  function handleRemove(emailId: string) {
    startTransition(async () => {
      await removeClientEmail(clientId, emailId);
      router.refresh();
    });
  }

  function handleRevoke() {
    if (!revokeArmed) {
      setRevokeArmed(true);
      return;
    }
    startTransition(async () => {
      await revokeClientSessions(clientId);
      setRevokeArmed(false);
      setRevokedAt(new Date().toLocaleString("it-IT"));
      router.refresh();
    });
  }

  return (
    <section className="mt-8">
      <div className="mb-3 flex items-end justify-between gap-4 flex-wrap">
        <div>
          <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
            Accessi al portale
          </p>
          <p className="mt-1 text-xs text-muted-foreground">
            Solo queste email possono richiedere il codice di accesso. Chi ha il link ma
            non è in elenco non entra.
          </p>
        </div>

        {revokeArmed ? (
          <div className="flex items-center gap-2">
            <span className="text-xs text-muted-foreground">
              Tutti dovranno rifare l&apos;accesso. Confermi?
            </span>
            <Button size="sm" variant="destructive" onClick={handleRevoke} disabled={isPending}>
              Sì, revoca
            </Button>
            <Button size="sm" variant="ghost" onClick={() => setRevokeArmed(false)}>
              Annulla
            </Button>
          </div>
        ) : (
          <Button size="sm" variant="outline" onClick={handleRevoke} disabled={isPending}>
            Revoca sessioni attive
          </Button>
        )}
      </div>

      {revokedAt && (
        <p className="mb-3 text-xs text-muted-foreground">
          Sessioni revocate il {revokedAt}.
        </p>
      )}

      <div className="rounded-xl border border-border bg-card">
        {emails.length === 0 ? (
          <p className="px-4 py-6 text-center text-sm text-muted-foreground">
            Nessuna email autorizzata — il cliente non può ancora accedere al portale.
          </p>
        ) : (
          <ul className="divide-y divide-border">
            {emails.map((e) => (
              <li key={e.id} className="flex items-center justify-between gap-3 px-4 py-2.5">
                <span className="min-w-0 truncate font-mono text-sm text-foreground">
                  {e.email}
                </span>
                <button
                  onClick={() => handleRemove(e.id)}
                  disabled={isPending}
                  className="shrink-0 text-xs text-muted-foreground underline-offset-2 hover:text-destructive hover:underline disabled:opacity-50"
                >
                  Rimuovi
                </button>
              </li>
            ))}
          </ul>
        )}

        <form
          ref={formRef}
          action={handleAdd}
          className="flex items-center gap-2 border-t border-border px-4 py-3"
        >
          <input
            type="email"
            name="email"
            required
            placeholder="email@cliente.it"
            autoComplete="off"
            className="min-w-0 flex-1 rounded-lg border border-border bg-background px-3 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-ring focus:outline-none focus:ring-1 focus:ring-ring"
          />
          <Button type="submit" size="sm" disabled={isPending}>
            Aggiungi
          </Button>
        </form>
      </div>

      {error && <p className="mt-2 text-xs text-destructive">{error}</p>}
    </section>
  );
}