lab/src/app/(dashboard)/settings/workspace/components/danger-zone.tsx

"use client";

import { useActionState, useEffect, useState, useTransition } from "react";
import { AlertTriangle, Download, Loader2, Trash2 } from "lucide-react";
import { toast } from "sonner";

import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  deleteWorkspaceAction,
  initialDeleteWorkspaceState,
} from "@/lib/appwrite/account-delete-actions";

export function DangerZone({ companyName }: { companyName: string }) {
  const [downloadBusy, startDownload] = useTransition();
  const [open, setOpen] = useState(false);
  const [confirm, setConfirm] = useState("");
  const [state, action, pending] = useActionState(
    deleteWorkspaceAction,
    initialDeleteWorkspaceState,
  );

  useEffect(() => {
    if (state.error) toast.error(state.error);
  }, [state]);

  function downloadExport() {
    startDownload(async () => {
      try {
        const res = await fetch("/api/account/export");
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        const blob = await res.blob();
        const url = URL.createObjectURL(blob);
        const a = document.createElement("a");
        a.href = url;
        a.download = `dls-export-${Date.now()}.json`;
        document.body.appendChild(a);
        a.click();
        a.remove();
        URL.revokeObjectURL(url);
        toast.success("Veri dışa aktarıldı.");
      } catch (e) {
        toast.error(e instanceof Error ? e.message : "İndirilemedi.");
      }
    });
  }

  return (
    <Card className="border-destructive/40">
      <CardHeader>
        <CardTitle className="flex items-center gap-2 text-base">
          <AlertTriangle className="text-destructive size-4" />
          Tehlikeli Bölge
        </CardTitle>
        <CardDescription>
          Verinizi dışa aktarın veya çalışma alanını kalıcı olarak silin.
        </CardDescription>
      </CardHeader>
      <CardContent className="grid gap-3">
        <div className="flex flex-wrap items-center justify-between gap-3 rounded-md border p-3">
          <div className="min-w-0">
            <p className="font-medium">Verilerimi indir</p>
            <p className="text-muted-foreground text-xs">
              Çalışma alanınızdaki tüm veriler (hastalar, işler, ödemeler, geçmiş)
              JSON formatında dışa aktarılır. Silmeden önce yedek almanız önerilir.
            </p>
          </div>
          <Button variant="outline" onClick={downloadExport} disabled={downloadBusy}>
            {downloadBusy ? <Loader2 className="size-4 animate-spin" /> : <Download className="size-4" />}
            JSON indir
          </Button>
        </div>

        <div className="border-destructive/40 flex flex-wrap items-center justify-between gap-3 rounded-md border p-3">
          <div className="min-w-0">
            <p className="font-medium">Çalışma alanını sil</p>
            <p className="text-muted-foreground text-xs">
              Tüm hastalar, işler, ödemeler, dosyalar ve geçmiş kalıcı olarak silinir.
              Bu işlem geri alınamaz.
            </p>
          </div>
          <Dialog open={open} onOpenChange={setOpen}>
            <Button variant="destructive" onClick={() => setOpen(true)}>
              <Trash2 className="size-4" />
              Sil
            </Button>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>Çalışma alanını kalıcı sil</DialogTitle>
                <DialogDescription>
                  Onaylamak için aşağıya <strong>{companyName}</strong> yazın. Bu
                  işlem hastalar, işler, ödemeler, dosyalar ve tüm geçmişi içerir
                  ve geri alınamaz.
                </DialogDescription>
              </DialogHeader>
              <form action={action} className="grid gap-3">
                <div className="grid gap-2">
                  <Label htmlFor="confirm">Çalışma alanı adı</Label>
                  <Input
                    id="confirm"
                    name="confirm"
                    autoComplete="off"
                    value={confirm}
                    onChange={(e) => setConfirm(e.target.value)}
                    placeholder={companyName}
                  />
                </div>
                <DialogFooter>
                  <DialogClose asChild>
                    <Button type="button" variant="outline">
                      Vazgeç
                    </Button>
                  </DialogClose>
                  <Button
                    type="submit"
                    variant="destructive"
                    disabled={pending || confirm.trim() !== companyName}
                  >
                    {pending ? <Loader2 className="size-4 animate-spin" /> : <Trash2 className="size-4" />}
                    Kalıcı olarak sil
                  </Button>
                </DialogFooter>
              </form>
            </DialogContent>
          </Dialog>
        </div>
      </CardContent>
    </Card>
  );
}