"use client";

import { useState, useTransition } from "react";
import { AlertTriangle } from "lucide-react";
import { toast } from "sonner";
import { signOut } from "next-auth/react";

import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { deleteMyAccount } from "../actions";

export function DeleteAccountDialog() {
  const [open, setOpen] = useState(false);
  const [confirmText, setConfirmText] = useState("");
  const [isPending, startTransition] = useTransition();

  const isConfirmed = confirmText === "DELETE";

  const handleDelete = () => {
    if (!isConfirmed) return;

    startTransition(async () => {
      const res = await deleteMyAccount();
      if (res.error) {
        toast.error(res.error);
      } else {
        toast.success("Account wurde gelöscht. Du wirst abgemeldet...");
        // Sign out client-side and redirect to landing page
        await signOut({ callbackUrl: "/" });
      }
    });
  };

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button variant="destructive" className="w-full sm:w-auto">
          <AlertTriangle className="h-4 w-4" />
          Account & Daten endgültig löschen
        </Button>
      </DialogTrigger>
      <DialogContent className="border-[var(--danger)]">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2 text-[var(--danger)]">
            <AlertTriangle className="h-5 w-5" />
            Gefahrenzone: Account löschen
          </DialogTitle>
          <DialogDescription className="pt-2 text-base">
            Diese Aktion kann <strong className="text-[var(--ink)]">nicht</strong>{" "}
            rückgängig gemacht werden.
            Wenn du das letzte Elternteil im Haushalt bist, wird die gesamte
            Familie inklusive Kinder gelöscht. Gibt es ein weiteres Elternteil,
            bleibt der Haushalt für diese Person erhalten und nur dein Account
            wird entfernt.
          </DialogDescription>
        </DialogHeader>
        
        <div className="my-2 rounded-lg border border-[var(--danger)] bg-[var(--danger-soft)] p-3 text-sm text-[var(--danger)]">
          Bitte tippe <strong>DELETE</strong> in das Feld unten ein, um den
          Vorgang zu bestätigen.
        </div>

        <div className="grid gap-2 py-4">
          <Input 
            value={confirmText}
            onChange={(e) => setConfirmText(e.target.value)}
            placeholder="DELETE"
            className="border-[var(--danger)] focus-visible:ring-[var(--focus-ring)]"
          />
        </div>

        <DialogFooter>
          <Button 
            type="button" 
            variant="ghost" 
            onClick={() => setOpen(false)}
            disabled={isPending}
          >
            Abbrechen
          </Button>
          <Button 
            variant="destructive" 
            onClick={handleDelete}
            disabled={!isConfirmed || isPending}
          >
            {isPending ? "Wird gelöscht..." : "Endgültig löschen"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}