"use client";
import * as React from "react";
import { Trash2 } from "lucide-react";
import { authClient } from "@/lib/auth-client";
import { PasswordInput } from "@/components/auth/password-input";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
import { Field, Label } from "@/components/ui/label";
import { Alert } from "@/components/ui/alert";

export function DeleteAccountDialog({ email }: { email: string }) {
  const [open, setOpen] = React.useState(false);
  const [password, setPassword] = React.useState("");
  const [error, setError] = React.useState<string | null>(null);
  const [requested, setRequested] = React.useState(false);
  const [loading, setLoading] = React.useState(false);

  async function submit(e: React.FormEvent) {
    e.preventDefault();
    setError(null);
    setLoading(true);
    const { error } = await authClient.deleteUser({ password, callbackURL: "/goodbye" });
    setLoading(false);
    if (error) {
      setError(error.status === 400 || error.status === 401 ? "Incorrect password." : error.message ?? "Could not start account deletion. Try again.");
      return;
    }
    setRequested(true);
  }

  return (
    <Dialog
      open={open}
      onOpenChange={(o) => {
        setOpen(o);
        if (!o) {
          setPassword("");
          setError(null);
        }
      }}
    >
      <DialogTrigger asChild>
        <Button variant="danger" size="sm">
          <Trash2 /> Delete account
        </Button>
      </DialogTrigger>
      <DialogContent size="sm">
        <DialogHeader>
          <DialogTitle>Delete your account</DialogTitle>
          <DialogDescription>
            This removes your login, organization, projects, API keys and request history. We send a confirmation link to <strong className="text-fg">{email}</strong>; nothing is deleted until you click it. After confirmation, data is purged 7 days later — email support@fetcha.co within that window if you change your mind.
          </DialogDescription>
        </DialogHeader>
        {requested ? (
          <>
            <Alert variant="success" title="Check your inbox">
              We emailed a confirmation link to {email}. Your account stays active until you confirm.
            </Alert>
            <DialogFooter>
              <Button onClick={() => setOpen(false)}>Close</Button>
            </DialogFooter>
          </>
        ) : (
          <form onSubmit={submit} className="grid gap-4" noValidate>
            {error ? <Alert variant="danger">{error}</Alert> : null}
            <Field>
              <Label htmlFor="delete-password">Confirm your password</Label>
              <PasswordInput id="delete-password" autoComplete="current-password" value={password} onChange={(e) => setPassword(e.target.value)} required autoFocus />
            </Field>
            <DialogFooter>
              <Button type="button" variant="outline" onClick={() => setOpen(false)} disabled={loading}>
                Cancel
              </Button>
              <Button type="submit" variant="danger" loading={loading} disabled={!password}>
                Send confirmation email
              </Button>
            </DialogFooter>
          </form>
        )}
      </DialogContent>
    </Dialog>
  );
}