"use client";

import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { Trash2, Tags } from "lucide-react";

interface DangerZoneCardProps {
  categorizedCount: number;
  onClearCategories: () => void;
  onResetData: () => void;
}

export function DangerZoneCard({
  categorizedCount,
  onClearCategories,
  onResetData,
}: DangerZoneCardProps) {
  return (
    <Card className="border-red-200">
      <CardHeader>
        <CardTitle className="flex items-center gap-2 text-red-600">
          <Trash2 className="w-5 h-5" />
          Zone dangereuse
        </CardTitle>
        <CardDescription>
          Actions irréversibles - procédez avec prudence
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-3">
        {/* Supprimer catégories des opérations */}
        <AlertDialog>
          <AlertDialogTrigger asChild>
            <Button
              variant="outline"
              className="w-full justify-start border-orange-300 text-orange-700 hover:bg-orange-50"
            >
              <Tags className="w-4 h-4 mr-2" />
              Supprimer les catégories des opérations
              <span className="ml-auto text-xs text-muted-foreground">
                {categorizedCount} opération
                {categorizedCount > 1 ? "s" : ""} catégorisée
                {categorizedCount > 1 ? "s" : ""}
              </span>
            </Button>
          </AlertDialogTrigger>
          <AlertDialogContent>
            <AlertDialogHeader>
              <AlertDialogTitle>
                Supprimer toutes les catégories ?
              </AlertDialogTitle>
              <AlertDialogDescription>
                Cette action va retirer la catégorie de {categorizedCount}{" "}
                opération{categorizedCount > 1 ? "s" : ""}. Les catégories
                elles-mêmes ne seront pas supprimées, seulement leur
                affectation aux opérations.
              </AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
              <AlertDialogCancel>Annuler</AlertDialogCancel>
              <AlertDialogAction
                onClick={onClearCategories}
                className="bg-orange-600 hover:bg-orange-700"
              >
                Supprimer les affectations
              </AlertDialogAction>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialog>

        {/* Réinitialiser toutes les données */}
        <AlertDialog>
          <AlertDialogTrigger asChild>
            <Button variant="destructive" className="w-full justify-start">
              <Trash2 className="w-4 h-4 mr-2" />
              Réinitialiser toutes les données
            </Button>
          </AlertDialogTrigger>
          <AlertDialogContent>
            <AlertDialogHeader>
              <AlertDialogTitle>Êtes-vous sûr ?</AlertDialogTitle>
              <AlertDialogDescription>
                Cette action supprimera définitivement tous vos comptes,
                transactions, catégories et dossiers. Cette action est
                irréversible.
              </AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
              <AlertDialogCancel>Annuler</AlertDialogCancel>
              <AlertDialogAction
                onClick={onResetData}
                className="bg-red-600 hover:bg-red-700"
              >
                Supprimer tout
              </AlertDialogAction>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialog>
      </CardContent>
    </Card>
  );
}