"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { Reveal } from "../../../components/Reveal";

const inputClass =
  "w-full border border-border rounded-sm px-4 py-3 text-body-sm text-text-primary outline-none focus:border-brand transition-colors";

export function AccountDataSection() {
  const router = useRouter();
  const [confirming, setConfirming] = useState(false);
  const [password, setPassword] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [deleting, setDeleting] = useState(false);

  async function handleDelete(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setDeleting(true);
    setError(null);
    try {
      const res = await fetch("/api/account/delete", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ password }),
      });
      const data = await res.json();
      if (!data.ok) {
        setError(data.reason || "Konto konnte nicht gelöscht werden.");
        setDeleting(false);
        return;
      }
      router.push("/");
      router.refresh();
    } catch {
      setError("Konto konnte gerade nicht gelöscht werden.");
      setDeleting(false);
    }
  }

  return (
    <Reveal className="flex flex-col gap-4 items-start w-full pt-4 border-t border-border">
      <p className="font-semibold text-h-small text-text-primary" style={{ fontFamily: "var(--font-lora)" }}>
        Konto &amp; Daten
      </p>

      <a href="/api/account/export" className="underline text-body-sm text-text-primary hover:text-brand transition-colors">
        Meine Daten exportieren
      </a>

      {!confirming ? (
        <button
          type="button"
          onClick={() => setConfirming(true)}
          className="text-body-sm text-red-600 underline hover:text-red-700 transition-colors"
        >
          Konto löschen
        </button>
      ) : (
        <form onSubmit={handleDelete} className="flex flex-col gap-3 items-start w-full max-w-sm">
          <p className="text-body-sm text-text-primary">
            Dein Konto und deine gespeicherte Adresse werden gelöscht. Bereits aufgegebene Bestellungen bleiben aus
            steuerrechtlichen Gründen mit ihren eigenen Daten erhalten, sind danach aber keinem Konto mehr zugeordnet.
          </p>
          <label className="flex flex-col gap-2 items-start w-full">
            <span className="text-label text-text-muted">Passwort zur Bestätigung</span>
            <input
              type="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              autoComplete="current-password"
              required
              className={inputClass}
            />
          </label>
          {error && <p className="text-label text-red-600">{error}</p>}
          <div className="flex gap-3">
            <button
              type="submit"
              disabled={deleting}
              className={`px-5 py-3 rounded-sm bg-red-600 hover:bg-red-700 font-bold text-body-sm text-white transition-colors ${deleting ? "opacity-70 pointer-events-none" : ""}`}
            >
              {deleting ? "…" : "Konto endgültig löschen"}
            </button>
            <button type="button" onClick={() => setConfirming(false)} className="px-5 py-3 text-body-sm text-text-muted">
              Abbrechen
            </button>
          </div>
        </form>
      )}
    </Reveal>
  );
}
