import { useState } from "react";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { useNavigate } from "react-router-dom";
import { useAuthStore } from "@/store/authStore";
import {
  getSessions, revokeSession, revokeAllSessions,
  getTotpSetup, enableTotp, disableTotp,
  changePassword, updateProfile, exportData, getMe,
} from "@/api/auth";
import { listBackups, triggerBackup, downloadBackup, restoreBackup } from "@/api/admin";
import type { BackupFile } from "@/api/admin";
import { cn } from "@/utils/cn";
import { format } from "date-fns";
import {
  User, Shield, MonitorSmartphone, Download, HardDrive,
  Loader2, CheckCircle, Eye, EyeOff, Trash2,
  LogOut, QrCode, KeyRound, AlertTriangle, RefreshCw, RotateCcw,
} from "lucide-react";

const SECTIONS = [
  { id: "profile",  label: "Profile",  icon: User },
  { id: "security", label: "Security", icon: Shield },
  { id: "sessions", label: "Sessions", icon: MonitorSmartphone },
  { id: "data",     label: "Data",     icon: Download },
  { id: "backups",  label: "Backups",  icon: HardDrive },
] as const;

type Section = (typeof SECTIONS)[number]["id"];

export default function SettingsPage() {
  const [section, setSection] = useState<Section>("profile");

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold">Settings</h1>
        <p className="text-sm text-muted-foreground mt-1">Manage your account and preferences</p>
      </div>

      <div className="flex gap-6 flex-col lg:flex-row">
        {/* Side nav */}
        <nav className="flex lg:flex-col gap-1 lg:w-48 shrink-0 overflow-x-auto lg:overflow-visible">
          {SECTIONS.map(({ id, label, icon: Icon }) => (
            <button
              key={id}
              onClick={() => setSection(id)}
              className={cn(
                "flex items-center gap-2.5 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors whitespace-nowrap",
                section === id
                  ? "bg-primary/15 text-primary"
                  : "text-muted-foreground hover:text-foreground hover:bg-secondary"
              )}
            >
              <Icon className="w-4 h-4 shrink-0" />
              {label}
            </button>
          ))}
        </nav>

        {/* Content */}
        <div className="flex-1 min-w-0 space-y-4">
          {section === "profile"  && <ProfileSection />}
          {section === "security" && <SecuritySection />}
          {section === "sessions" && <SessionsSection />}
          {section === "data"     && <DataSection />}
          {section === "backups"  && <BackupsSection />}
        </div>
      </div>
    </div>
  );
}

// ─── Helpers ──────────────────────────────────────────────────────────────────

const inputCls = "w-full rounded-lg border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring";
const cardCls  = "bg-card border border-border rounded-xl p-5 space-y-4";

function SectionTitle({ children }: { children: React.ReactNode }) {
  return <h2 className="font-semibold text-base">{children}</h2>;
}

function SuccessBanner({ message }: { message: string }) {
  return (
    <div className="flex items-center gap-2 bg-success/10 border border-success/30 text-success rounded-lg px-3 py-2 text-sm">
      <CheckCircle className="w-4 h-4 shrink-0" />
      {message}
    </div>
  );
}

function ErrorBanner({ message }: { message: string }) {
  return (
    <div className="flex items-center gap-2 bg-destructive/10 border border-destructive/30 text-destructive rounded-lg px-3 py-2 text-sm">
      <AlertTriangle className="w-4 h-4 shrink-0" />
      {message}
    </div>
  );
}

// ─── Profile ──────────────────────────────────────────────────────────────────

function ProfileSection() {
  const qc = useQueryClient();
  const { displayName, setToken, token, userId } = useAuthStore();
  const [name, setName] = useState(displayName ?? "");
  const [currency, setCurrency] = useState("GBP");
  const [success, setSuccess] = useState(false);

  useQuery({ queryKey: ["me"], queryFn: getMe, onSuccess: (d: any) => {
    setName(d.display_name ?? "");
    setCurrency(d.base_currency ?? "GBP");
  }} as any);

  const mutation = useMutation({
    mutationFn: () => updateProfile({ display_name: name, base_currency: currency }),
    onSuccess: () => {
      setSuccess(true);
      setToken(token!, userId!, name);
      qc.invalidateQueries({ queryKey: ["me"] });
      setTimeout(() => setSuccess(false), 3000);
    },
  });

  return (
    <div className={cardCls}>
      <SectionTitle>Profile</SectionTitle>
      {success && <SuccessBanner message="Profile updated" />}
      {mutation.isError && <ErrorBanner message={(mutation.error as any)?.response?.data?.detail ?? "Update failed"} />}

      <div>
        <label className="text-sm font-medium block mb-1.5">Display name</label>
        <input value={name} onChange={e => setName(e.target.value)} className={inputCls} placeholder="Your name" />
      </div>
      <div>
        <label className="text-sm font-medium block mb-1.5">Base currency</label>
        <input value={currency} onChange={e => setCurrency(e.target.value.toUpperCase())} className={inputCls} placeholder="GBP" maxLength={10} />
        <p className="text-xs text-muted-foreground mt-1">Used for net worth and report totals</p>
      </div>

      <button
        onClick={() => mutation.mutate()}
        disabled={mutation.isPending}
        className="flex items-center gap-2 bg-primary text-primary-foreground px-4 py-2 rounded-lg text-sm font-medium hover:bg-primary/90 disabled:opacity-50 transition-colors"
      >
        {mutation.isPending && <Loader2 className="w-4 h-4 animate-spin" />}
        Save Changes
      </button>
    </div>
  );
}

// ─── Security ─────────────────────────────────────────────────────────────────

function SecuritySection() {
  return (
    <div className="space-y-4">
      <PasswordCard />
      <TotpCard />
    </div>
  );
}

function PasswordCard() {
  const [current, setCurrent] = useState("");
  const [next, setNext]       = useState("");
  const [confirm, setConfirm] = useState("");
  const [showCurrent, setShowCurrent] = useState(false);
  const [showNext, setShowNext]       = useState(false);
  const [success, setSuccess] = useState(false);

  const mutation = useMutation({
    mutationFn: () => changePassword(current, next),
    onSuccess: () => {
      setSuccess(true);
      setCurrent(""); setNext(""); setConfirm("");
      setTimeout(() => setSuccess(false), 4000);
    },
  });

  const mismatch = next.length > 0 && confirm.length > 0 && next !== confirm;
  const tooShort = next.length > 0 && next.length < 10;
  const canSubmit = current && next && confirm && next === confirm && next.length >= 10;

  return (
    <div className={cardCls}>
      <div className="flex items-center gap-2">
        <KeyRound className="w-4 h-4 text-muted-foreground" />
        <SectionTitle>Change Password</SectionTitle>
      </div>

      {success && <SuccessBanner message="Password changed successfully" />}
      {mutation.isError && <ErrorBanner message={(mutation.error as any)?.response?.data?.detail ?? "Password change failed"} />}

      <div>
        <label className="text-sm font-medium block mb-1.5">Current password</label>
        <div className="relative">
          <input
            type={showCurrent ? "text" : "password"}
            value={current}
            onChange={e => setCurrent(e.target.value)}
            className={cn(inputCls, "pr-10")}
          />
          <button type="button" onClick={() => setShowCurrent(v => !v)} className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground">
            {showCurrent ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
          </button>
        </div>
      </div>

      <div>
        <label className="text-sm font-medium block mb-1.5">New password</label>
        <div className="relative">
          <input
            type={showNext ? "text" : "password"}
            value={next}
            onChange={e => setNext(e.target.value)}
            className={cn(inputCls, "pr-10", tooShort && "border-destructive")}
          />
          <button type="button" onClick={() => setShowNext(v => !v)} className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground">
            {showNext ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
          </button>
        </div>
        {tooShort && <p className="text-xs text-destructive mt-1">Minimum 10 characters</p>}

        {/* Strength bar */}
        {next.length > 0 && (
          <div className="mt-2 flex gap-1">
            {[1,2,3,4].map(i => {
              const score = Math.min(4, Math.floor(next.length / 3));
              return <div key={i} className={cn("h-1 flex-1 rounded-full transition-colors", i <= score ? (score <= 1 ? "bg-destructive" : score <= 2 ? "bg-yellow-500" : score <= 3 ? "bg-primary" : "bg-success") : "bg-secondary")} />;
            })}
          </div>
        )}
      </div>

      <div>
        <label className="text-sm font-medium block mb-1.5">Confirm new password</label>
        <input
          type="password"
          value={confirm}
          onChange={e => setConfirm(e.target.value)}
          className={cn(inputCls, mismatch && "border-destructive")}
        />
        {mismatch && <p className="text-xs text-destructive mt-1">Passwords don't match</p>}
      </div>

      <button
        onClick={() => mutation.mutate()}
        disabled={!canSubmit || mutation.isPending}
        className="flex items-center gap-2 bg-primary text-primary-foreground px-4 py-2 rounded-lg text-sm font-medium hover:bg-primary/90 disabled:opacity-50 transition-colors"
      >
        {mutation.isPending && <Loader2 className="w-4 h-4 animate-spin" />}
        Update Password
      </button>
    </div>
  );
}

function TotpCard() {
  const qc = useQueryClient();
  const totpEnabled = useAuthStore(s => s.totpEnabled);
  const { setToken, token, userId, displayName } = useAuthStore();

  const [step, setStep]               = useState<"idle" | "setup" | "disable">("idle");
  const [setupData, setSetupData]     = useState<{ secret: string; qr_code_png_b64: string; backup_codes: string[] } | null>(null);
  const [code, setCode]               = useState("");
  const [password, setPassword]       = useState("");
  const [backupCodes, setBackupCodes] = useState<string[] | null>(null);
  const [success, setSuccess]         = useState("");

  const setupMutation = useMutation({
    mutationFn: getTotpSetup,
    onSuccess: (data) => { setSetupData(data); setStep("setup"); },
  });

  const enableMutation = useMutation({
    mutationFn: () => enableTotp(setupData!.secret, code),
    onSuccess: () => {
      setBackupCodes(setupData!.backup_codes);
      setToken(token!, userId!, displayName ?? "");
      useAuthStore.setState({ totpEnabled: true });
      qc.invalidateQueries({ queryKey: ["me"] });
      setStep("idle");
      setCode("");
    },
  });

  const disableMutation = useMutation({
    mutationFn: () => disableTotp(password),
    onSuccess: () => {
      useAuthStore.setState({ totpEnabled: false });
      qc.invalidateQueries({ queryKey: ["me"] });
      setStep("idle");
      setPassword("");
      setSuccess("Two-factor authentication disabled");
      setTimeout(() => setSuccess(""), 4000);
    },
  });

  return (
    <div className={cardCls}>
      <div className="flex items-center gap-2">
        <QrCode className="w-4 h-4 text-muted-foreground" />
        <SectionTitle>Two-Factor Authentication</SectionTitle>
        <span className={cn("ml-auto text-xs px-2 py-0.5 rounded-full font-medium", totpEnabled ? "bg-success/15 text-success" : "bg-secondary text-muted-foreground")}>
          {totpEnabled ? "Enabled" : "Disabled"}
        </span>
      </div>

      {success && <SuccessBanner message={success} />}
      {(enableMutation.isError || disableMutation.isError) && (
        <ErrorBanner message={(enableMutation.error as any)?.response?.data?.detail ?? (disableMutation.error as any)?.response?.data?.detail ?? "Failed"} />
      )}

      {/* Backup codes shown after enabling */}
      {backupCodes && (
        <div className="bg-success/10 border border-success/30 rounded-lg p-4 space-y-2">
          <p className="text-sm font-semibold text-success">2FA enabled — save your backup codes</p>
          <p className="text-xs text-muted-foreground">Store these somewhere safe. Each can only be used once.</p>
          <div className="grid grid-cols-2 gap-1 mt-2">
            {backupCodes.map(c => (
              <code key={c} className="text-xs bg-background px-2 py-1 rounded font-mono">{c}</code>
            ))}
          </div>
          <button onClick={() => setBackupCodes(null)} className="text-xs text-muted-foreground hover:text-foreground underline mt-1">
            I've saved these
          </button>
        </div>
      )}

      {step === "idle" && !totpEnabled && (
        <div className="space-y-3">
          <p className="text-sm text-muted-foreground">Add an extra layer of security with an authenticator app.</p>
          <button
            onClick={() => setupMutation.mutate()}
            disabled={setupMutation.isPending}
            className="flex items-center gap-2 bg-primary text-primary-foreground px-4 py-2 rounded-lg text-sm font-medium hover:bg-primary/90 disabled:opacity-50 transition-colors"
          >
            {setupMutation.isPending && <Loader2 className="w-4 h-4 animate-spin" />}
            Set up 2FA
          </button>
        </div>
      )}

      {step === "idle" && totpEnabled && (
        <div className="space-y-3">
          <p className="text-sm text-muted-foreground">2FA is active. Your account is protected.</p>
          <button
            onClick={() => setStep("disable")}
            className="flex items-center gap-2 border border-destructive/40 text-destructive px-4 py-2 rounded-lg text-sm font-medium hover:bg-destructive/10 transition-colors"
          >
            Disable 2FA
          </button>
        </div>
      )}

      {step === "setup" && setupData && (
        <div className="space-y-4">
          <p className="text-sm text-muted-foreground">Scan this QR code with your authenticator app, then enter the 6-digit code to confirm.</p>
          <div className="flex justify-center">
            <img src={`data:image/png;base64,${setupData.qr_code_png_b64}`} alt="TOTP QR Code" className="w-40 h-40 rounded-lg" />
          </div>
          <div>
            <label className="text-sm font-medium block mb-1.5">Verification code</label>
            <input
              value={code}
              onChange={e => setCode(e.target.value.replace(/\D/g, "").slice(0, 6))}
              className={inputCls}
              placeholder="000000"
              maxLength={6}
            />
          </div>
          <div className="flex gap-3">
            <button onClick={() => setStep("idle")} className="flex-1 border border-border rounded-lg py-2 text-sm hover:bg-secondary transition-colors">
              Cancel
            </button>
            <button
              onClick={() => enableMutation.mutate()}
              disabled={code.length !== 6 || enableMutation.isPending}
              className="flex-1 flex items-center justify-center gap-2 bg-primary text-primary-foreground rounded-lg py-2 text-sm font-medium hover:bg-primary/90 disabled:opacity-50 transition-colors"
            >
              {enableMutation.isPending && <Loader2 className="w-4 h-4 animate-spin" />}
              Verify & Enable
            </button>
          </div>
        </div>
      )}

      {step === "disable" && (
        <div className="space-y-4">
          <p className="text-sm text-muted-foreground">Enter your password to confirm disabling 2FA.</p>
          <div>
            <label className="text-sm font-medium block mb-1.5">Password</label>
            <input type="password" value={password} onChange={e => setPassword(e.target.value)} className={inputCls} />
          </div>
          <div className="flex gap-3">
            <button onClick={() => setStep("idle")} className="flex-1 border border-border rounded-lg py-2 text-sm hover:bg-secondary transition-colors">
              Cancel
            </button>
            <button
              onClick={() => disableMutation.mutate()}
              disabled={!password || disableMutation.isPending}
              className="flex-1 flex items-center justify-center gap-2 bg-destructive text-destructive-foreground rounded-lg py-2 text-sm font-medium hover:bg-destructive/90 disabled:opacity-50 transition-colors"
            >
              {disableMutation.isPending && <Loader2 className="w-4 h-4 animate-spin" />}
              Disable 2FA
            </button>
          </div>
        </div>
      )}
    </div>
  );
}

// ─── Sessions ─────────────────────────────────────────────────────────────────

function SessionsSection() {
  const qc = useQueryClient();
  const navigate = useNavigate();
  const { clearAuth } = useAuthStore();

  const { data: sessions = [], isLoading } = useQuery({
    queryKey: ["sessions"],
    queryFn: getSessions,
  });

  const revokeMutation = useMutation({
    mutationFn: revokeSession,
    onSuccess: () => qc.invalidateQueries({ queryKey: ["sessions"] }),
  });

  const revokeAllMutation = useMutation({
    mutationFn: revokeAllSessions,
    onSuccess: () => { clearAuth(); navigate("/login"); },
  });

  return (
    <div className={cardCls}>
      <div className="flex items-center justify-between">
        <SectionTitle>Active Sessions</SectionTitle>
        <button
          onClick={() => revokeAllMutation.mutate()}
          disabled={revokeAllMutation.isPending}
          className="flex items-center gap-1.5 text-xs text-destructive hover:text-destructive/80 border border-destructive/30 px-3 py-1.5 rounded-lg hover:bg-destructive/10 transition-colors"
        >
          {revokeAllMutation.isPending ? <Loader2 className="w-3 h-3 animate-spin" /> : <LogOut className="w-3 h-3" />}
          Sign out all
        </button>
      </div>
      <p className="text-sm text-muted-foreground">All devices currently signed into your account.</p>

      {isLoading ? (
        <div className="space-y-2">
          {[1,2,3].map(i => <div key={i} className="h-14 bg-secondary/30 rounded-lg animate-pulse" />)}
        </div>
      ) : (
        <div className="space-y-2">
          {(sessions as any[]).map((s: any) => (
            <div key={s.id} className={cn(
              "flex items-center gap-3 p-3 rounded-lg border",
              s.is_current ? "border-primary/30 bg-primary/5" : "border-border bg-secondary/20"
            )}>
              <MonitorSmartphone className="w-4 h-4 text-muted-foreground shrink-0" />
              <div className="flex-1 min-w-0">
                <div className="flex items-center gap-2">
                  <p className="text-sm font-medium truncate">{s.user_agent?.split(" ")[0] ?? "Unknown device"}</p>
                  {s.is_current && <span className="text-xs bg-primary/20 text-primary px-1.5 py-0.5 rounded font-medium shrink-0">This device</span>}
                </div>
                <p className="text-xs text-muted-foreground">
                  {s.ip_address} · {s.last_active_at ? `Active ${format(new Date(s.last_active_at), "dd MMM HH:mm")}` : `Created ${format(new Date(s.created_at), "dd MMM")}`}
                </p>
              </div>
              {!s.is_current && (
                <button
                  onClick={() => revokeMutation.mutate(s.id)}
                  disabled={revokeMutation.isPending}
                  className="p-1.5 rounded text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors shrink-0"
                  title="Revoke session"
                >
                  <Trash2 className="w-4 h-4" />
                </button>
              )}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

// ─── Backups ──────────────────────────────────────────────────────────────────

function BackupsSection() {
  const qc = useQueryClient();
  const [restoreTarget, setRestoreTarget] = useState<string | null>(null);
  const [restoreSuccess, setRestoreSuccess] = useState("");
  const [restoreError, setRestoreError] = useState("");

  const { data: backups = [], isLoading } = useQuery({
    queryKey: ["backups"],
    queryFn: listBackups,
  });

  const triggerMutation = useMutation({
    mutationFn: triggerBackup,
    onSuccess: () => qc.invalidateQueries({ queryKey: ["backups"] }),
  });

  const restoreMutation = useMutation({
    mutationFn: (filename: string) => restoreBackup(filename),
    onSuccess: (_, filename) => {
      setRestoreTarget(null);
      setRestoreSuccess(`Restored from ${filename}. Reload the page to see updated data.`);
      setRestoreError("");
      setTimeout(() => setRestoreSuccess(""), 8000);
    },
    onError: (e: any) => {
      setRestoreError(e?.response?.data?.detail ?? "Restore failed");
      setRestoreTarget(null);
    },
  });

  function formatSize(bytes: number) {
    if (bytes < 1024) return `${bytes} B`;
    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
  }

  return (
    <div className="space-y-4">
      {/* Trigger */}
      <div className={cardCls}>
        <div className="flex items-center gap-2">
          <HardDrive className="w-4 h-4 text-muted-foreground" />
          <SectionTitle>Database Backups</SectionTitle>
        </div>
        <p className="text-sm text-muted-foreground">
          Backups run automatically at 3am daily. Each is GPG-encrypted with your backup passphrase and stored at <code className="text-xs bg-secondary px-1 py-0.5 rounded">/app/backups</code>.
        </p>

        {triggerMutation.isSuccess && <SuccessBanner message="Backup created successfully" />}
        {triggerMutation.isError && <ErrorBanner message={(triggerMutation.error as any)?.response?.data?.detail ?? "Backup failed"} />}

        <button
          onClick={() => triggerMutation.mutate()}
          disabled={triggerMutation.isPending}
          className="flex items-center gap-2 bg-primary text-primary-foreground px-4 py-2 rounded-lg text-sm font-medium hover:bg-primary/90 disabled:opacity-50 transition-colors"
        >
          {triggerMutation.isPending ? <Loader2 className="w-4 h-4 animate-spin" /> : <RefreshCw className="w-4 h-4" />}
          {triggerMutation.isPending ? "Creating backup…" : "Backup now"}
        </button>
      </div>

      {/* Backup list */}
      <div className={cardCls}>
        <div className="flex items-center justify-between">
          <SectionTitle>Stored Backups</SectionTitle>
          <button
            onClick={() => qc.invalidateQueries({ queryKey: ["backups"] })}
            className="p-1.5 rounded text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors"
            title="Refresh list"
          >
            <RefreshCw className="w-3.5 h-3.5" />
          </button>
        </div>

        {restoreSuccess && <SuccessBanner message={restoreSuccess} />}
        {restoreError && <ErrorBanner message={restoreError} />}

        {isLoading ? (
          <div className="space-y-2">
            {[1,2,3].map(i => <div key={i} className="h-12 bg-secondary/30 rounded-lg animate-pulse" />)}
          </div>
        ) : backups.length === 0 ? (
          <p className="text-sm text-muted-foreground py-4 text-center">No backups yet — click "Backup now" to create one.</p>
        ) : (
          <div className="space-y-2">
            {backups.map((b: BackupFile) => (
              <div key={b.filename} className="flex items-center gap-3 p-3 rounded-lg border border-border bg-secondary/20">
                <HardDrive className="w-4 h-4 text-muted-foreground shrink-0" />
                <div className="flex-1 min-w-0">
                  <p className="text-sm font-medium font-mono truncate">{b.filename}</p>
                  <p className="text-xs text-muted-foreground">
                    {formatSize(b.size_bytes)} · {format(new Date(b.created_at), "dd MMM yyyy HH:mm")}
                  </p>
                </div>
                <div className="flex items-center gap-1.5 shrink-0">
                  <button
                    onClick={() => downloadBackup(b.filename)}
                    className="flex items-center gap-1 text-xs px-2.5 py-1.5 rounded border border-border hover:bg-secondary transition-colors text-muted-foreground hover:text-foreground"
                    title="Download"
                  >
                    <Download className="w-3 h-3" />
                    Download
                  </button>
                  <button
                    onClick={() => setRestoreTarget(b.filename)}
                    className="flex items-center gap-1 text-xs px-2.5 py-1.5 rounded border border-destructive/40 text-destructive hover:bg-destructive/10 transition-colors"
                    title="Restore"
                  >
                    <RotateCcw className="w-3 h-3" />
                    Restore
                  </button>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>

      {/* Restore confirmation dialog */}
      {restoreTarget && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4">
          <div className="bg-card border border-border rounded-2xl w-full max-w-sm shadow-xl p-6">
            <div className="flex items-start gap-4 mb-5">
              <div className="w-10 h-10 rounded-full bg-destructive/15 flex items-center justify-center shrink-0">
                <AlertTriangle className="w-5 h-5 text-destructive" />
              </div>
              <div>
                <h3 className="font-semibold text-base">Restore this backup?</h3>
                <p className="text-sm text-muted-foreground mt-1">
                  This will <strong>overwrite all current data</strong> with the contents of:
                </p>
                <p className="text-xs font-mono bg-secondary px-2 py-1 rounded mt-2 break-all">{restoreTarget}</p>
                <p className="text-sm text-muted-foreground mt-2">This cannot be undone. Consider downloading your current backup first.</p>
              </div>
            </div>
            <div className="flex gap-3">
              <button
                onClick={() => setRestoreTarget(null)}
                disabled={restoreMutation.isPending}
                className="flex-1 py-2.5 rounded-lg border border-border text-sm hover:bg-secondary transition-colors disabled:opacity-50"
              >
                Cancel
              </button>
              <button
                onClick={() => restoreMutation.mutate(restoreTarget)}
                disabled={restoreMutation.isPending}
                className="flex-1 flex items-center justify-center gap-2 py-2.5 rounded-lg bg-destructive text-destructive-foreground text-sm font-medium hover:bg-destructive/90 disabled:opacity-50 transition-colors"
              >
                {restoreMutation.isPending && <Loader2 className="w-4 h-4 animate-spin" />}
                {restoreMutation.isPending ? "Restoring…" : "Yes, restore"}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

// ─── Data ─────────────────────────────────────────────────────────────────────

function DataSection() {
  const [exporting, setExporting] = useState(false);
  const [exported, setExported]   = useState(false);

  async function handleExport() {
    setExporting(true);
    try {
      await exportData();
      setExported(true);
      setTimeout(() => setExported(false), 4000);
    } finally {
      setExporting(false);
    }
  }

  return (
    <div className="space-y-4">
      <div className={cardCls}>
        <div className="flex items-center gap-2">
          <Download className="w-4 h-4 text-muted-foreground" />
          <SectionTitle>Export Data</SectionTitle>
        </div>
        {exported && <SuccessBanner message="Download started" />}
        <p className="text-sm text-muted-foreground">
          Download all your transactions as a CSV file. Includes date, description, amount, category, and account for every transaction.
        </p>
        <button
          onClick={handleExport}
          disabled={exporting}
          className="flex items-center gap-2 bg-primary text-primary-foreground px-4 py-2 rounded-lg text-sm font-medium hover:bg-primary/90 disabled:opacity-50 transition-colors"
        >
          {exporting ? <Loader2 className="w-4 h-4 animate-spin" /> : <Download className="w-4 h-4" />}
          {exporting ? "Preparing export…" : "Download transactions CSV"}
        </button>
      </div>

      <div className={cn(cardCls, "border-destructive/30")}>
        <SectionTitle>Danger Zone</SectionTitle>
        <p className="text-sm text-muted-foreground">
          These actions are permanent. Export your data first if needed.
        </p>
        <div className="flex items-center gap-3 p-3 border border-destructive/20 rounded-lg bg-destructive/5">
          <AlertTriangle className="w-4 h-4 text-destructive shrink-0" />
          <div className="flex-1">
            <p className="text-sm font-medium">Delete account</p>
            <p className="text-xs text-muted-foreground">Permanently removes all your data. Cannot be undone.</p>
          </div>
          <button className="text-xs text-destructive border border-destructive/30 px-3 py-1.5 rounded-lg hover:bg-destructive/10 transition-colors" disabled>
            Contact admin
          </button>
        </div>
      </div>
    </div>
  );
}