fintrack/app/settings/page.tsx

"use client";

import { useState } from "react";
import { Sidebar } from "@/components/dashboard/sidebar";
import { useBankingData } from "@/lib/hooks";
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 {
  Download,
  Trash2,
  Upload,
  RefreshCw,
  Database,
  FileJson,
  Tags,
} from "lucide-react";
import type { BankingData } from "@/lib/types";

export default function SettingsPage() {
  const { data, isLoading, refresh, update } = useBankingData();
  const [importing, setImporting] = useState(false);

  if (isLoading || !data) {
    return (
      <div className="flex h-screen">
        <Sidebar />
        <main className="flex-1 flex items-center justify-center">
          <RefreshCw className="w-8 h-8 animate-spin text-muted-foreground" />
        </main>
      </div>
    );
  }

  const exportData = () => {
    const dataStr = JSON.stringify(data, null, 2);
    const blob = new Blob([dataStr], { type: "application/json" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = `fintrack-backup-${new Date().toISOString().split("T")[0]}.json`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  };

  const importData = () => {
    const input = document.createElement("input");
    input.type = "file";
    input.accept = ".json";
    input.onchange = async (e) => {
      const file = (e.target as HTMLInputElement).files?.[0];
      if (!file) return;

      setImporting(true);
      try {
        const content = await file.text();
        const importedData = JSON.parse(content) as BankingData;

        // Validate structure
        if (
          !importedData.accounts ||
          !importedData.transactions ||
          !importedData.categories ||
          !importedData.folders
        ) {
          alert("Format de fichier invalide");
          return;
        }

        update(importedData);
        alert("Données importées avec succès");
      } catch (error) {
        alert("Erreur lors de l'import");
      } finally {
        setImporting(false);
      }
    };
    input.click();
  };

  const resetData = () => {
    localStorage.removeItem("banking-app-data");
    window.location.reload();
  };

  const clearAllCategories = async () => {
    try {
      const response = await fetch(
        "/api/banking/transactions/clear-categories",
        {
          method: "POST",
        },
      );
      if (!response.ok) throw new Error("Erreur");
      refresh();
      alert("Catégories supprimées de toutes les opérations");
    } catch (error) {
      console.error(error);
      alert("Erreur lors de la suppression des catégories");
    }
  };

  const categorizedCount = data.transactions.filter((t) => t.categoryId).length;

  return (
    <div className="flex h-screen bg-background">
      <Sidebar />
      <main className="flex-1 overflow-auto">
        <div className="p-6 space-y-6 max-w-2xl">
          <div>
            <h1 className="text-2xl font-bold text-foreground">Paramètres</h1>
            <p className="text-muted-foreground">
              Gérez vos données et préférences
            </p>
          </div>

          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Database className="w-5 h-5" />
                Données
              </CardTitle>
              <CardDescription>
                Exportez ou importez vos données pour les sauvegarder ou les
                transférer
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-center justify-between p-4 bg-muted rounded-lg">
                <div>
                  <p className="font-medium">Statistiques</p>
                  <p className="text-sm text-muted-foreground">
                    {data.accounts.length} comptes, {data.transactions.length}{" "}
                    transactions, {data.categories.length} catégories
                  </p>
                </div>
              </div>

              <div className="flex gap-2">
                <Button
                  onClick={exportData}
                  variant="outline"
                  className="flex-1 bg-transparent"
                >
                  <Download className="w-4 h-4 mr-2" />
                  Exporter (JSON)
                </Button>
                <Button
                  onClick={importData}
                  variant="outline"
                  className="flex-1 bg-transparent"
                  disabled={importing}
                >
                  <Upload className="w-4 h-4 mr-2" />
                  {importing ? "Import..." : "Importer"}
                </Button>
              </div>
            </CardContent>
          </Card>

          <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={clearAllCategories}
                      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={resetData}
                      className="bg-red-600 hover:bg-red-700"
                    >
                      Supprimer tout
                    </AlertDialogAction>
                  </AlertDialogFooter>
                </AlertDialogContent>
              </AlertDialog>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <FileJson className="w-5 h-5" />
                Format OFX
              </CardTitle>
              <CardDescription>
                Informations sur l'import de fichiers
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="prose prose-sm text-muted-foreground">
                <p>
                  L'application accepte les fichiers au format OFX (Open
                  Financial Exchange) ou QFX. Ces fichiers sont généralement
                  disponibles depuis l'espace client de votre banque.
                </p>
                <p className="mt-2">
                  Lors de l'import, les transactions sont automatiquement
                  catégorisées selon les mots-clés définis. Les doublons sont
                  détectés et ignorés automatiquement.
                </p>
              </div>
            </CardContent>
          </Card>
        </div>
      </main>
    </div>
  );
}