"use client";

import { useState, useTransition } from "react";
import { deleteSiteAction } from "@/app/(app)/settings/sites/[siteId]/actions";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export function DeleteSiteForm({
  siteId,
  domain,
  displayDomain,
}: {
  siteId: string;
  domain: string;
  displayDomain: string;
}) {
  const [confirm, setConfirm] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [pending, startTransition] = useTransition();
  // Forme Unicode affichée ou forme ASCII stockée : les deux valent confirmation.
  const confirmed = confirm.trim() === domain || confirm.trim() === displayDomain;

  return (
    <form
      className="max-w-md space-y-3"
      onSubmit={(event) => {
        event.preventDefault();
        setError(null);
        startTransition(async () => {
          // Succès = redirect('/settings/sites') côté serveur : on ne revient ici qu'en erreur.
          const result = await deleteSiteAction({ siteId, domain, confirm });
          setError(result.error);
        });
      }}
    >
      <p className="text-muted-foreground text-sm">
        Supprime le site, ses cibles et toutes les données rattachées (irréversible). Saisir{" "}
        <span className="font-mono">{displayDomain}</span> pour confirmer.
      </p>
      <div className="space-y-1">
        <Label htmlFor="confirm-domain">Domaine</Label>
        <Input
          id="confirm-domain"
          value={confirm}
          autoComplete="off"
          onChange={(e) => setConfirm(e.target.value)}
        />
      </div>
      <Button type="submit" variant="destructive" disabled={pending || !confirmed}>
        Supprimer définitivement
      </Button>
      {error ? (
        <p role="alert" className="text-destructive text-sm">
          {error}
        </p>
      ) : null}
    </form>
  );
}