"use client";

import { useState } from "react";
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, Copy } from "lucide-react";

interface DangerZoneCardProps {
  categorizedCount: number;
  onClearCategories: () => void;
  onResetData: () => void;
  onDeduplicate: () => Promise<{ deletedCount: number; duplicatesFound: number }>;
}

export function DangerZoneCard({
  categorizedCount,
  onClearCategories,
  onResetData,
  onDeduplicate,
}: DangerZoneCardProps) {
  const [deduplicating, setDeduplicating] = useState(false);

  const handleDeduplicate = async () => {
    setDeduplicating(true);
    try {
      const result = await onDeduplicate();
      if (result.deletedCount > 0) {
        alert(`${result.deletedCount} transaction${result.deletedCount > 1 ? "s" : ""} en double supprimée${result.deletedCount > 1 ? "s" : ""}`);
      } else {
        alert("Aucun doublon trouvé");
      }
    } catch (error) {
      console.error(error);
      alert("Erreur lors du dédoublonnage");
    } finally {
      setDeduplicating(false);
    }
  };
  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">
        {/* Dédoublonnage */}
        <AlertDialog>
          <AlertDialogTrigger asChild>
            <Button
              variant="outline"
              className="w-full justify-start border-blue-300 text-blue-700 hover:bg-blue-50"
              disabled={deduplicating}
            >
              <Copy className="w-4 h-4 mr-2" />
              Dédoublonner les transactions
              {deduplicating && (
                <span className="ml-auto text-xs text-muted-foreground">
                  En cours...
                </span>
              )}
            </Button>
          </AlertDialogTrigger>
          <AlertDialogContent>
            <AlertDialogHeader>
              <AlertDialogTitle>
                Dédoublonner les transactions ?
              </AlertDialogTitle>
              <AlertDialogDescription>
                Cette action va rechercher et supprimer les transactions en double
                dans votre base de données. Les critères de dédoublonnage sont :
                même compte, même date, même montant et même libellé. La première
                transaction trouvée sera conservée, les autres seront supprimées.
              </AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
              <AlertDialogCancel>Annuler</AlertDialogCancel>
              <AlertDialogAction
                onClick={handleDeduplicate}
                className="bg-blue-600 hover:bg-blue-700"
                disabled={deduplicating}
              >
                {deduplicating ? "Dédoublonnage..." : "Dédoublonner"}
              </AlertDialogAction>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialog>

        {/* 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>
  );
}