fintrack/app/folders/page.tsx

"use client";

import { useState } from "react";
import {
  DndContext,
  DragEndEvent,
  DragOverlay,
  DragStartEvent,
  PointerSensor,
  useSensor,
  useSensors,
  closestCenter,
} from "@dnd-kit/core";
import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
import { PageLayout, LoadingState, PageHeader } from "@/components/layout";
import {
  FolderTreeItem,
  FolderEditDialog,
  AccountFolderDialog,
} from "@/components/folders";
import { useBankingData } from "@/lib/hooks";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Plus } from "lucide-react";
import {
  addFolder,
  updateFolder,
  deleteFolder,
  updateAccount,
} from "@/lib/store-db";
import type { Folder as FolderType, Account } from "@/lib/types";

export default function FoldersPage() {
  const { data, isLoading, refresh } = useBankingData();
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [editingFolder, setEditingFolder] = useState<FolderType | null>(null);
  const [formData, setFormData] = useState({
    name: "",
    parentId: "folder-root" as string | null,
    color: "#6366f1",
  });
  const [activeId, setActiveId] = useState<string | null>(null);

  // Account editing state
  const [isAccountDialogOpen, setIsAccountDialogOpen] = useState(false);
  const [editingAccount, setEditingAccount] = useState<Account | null>(null);
  const [accountFormData, setAccountFormData] = useState({
    name: "",
    type: "CHECKING" as Account["type"],
    folderId: "folder-root",
  });

  const sensors = useSensors(
    useSensor(PointerSensor, {
      activationConstraint: {
        distance: 8,
      },
    })
  );

  if (isLoading || !data) {
    return <LoadingState />;
  }

  const formatCurrency = (amount: number) => {
    return new Intl.NumberFormat("fr-FR", {
      style: "currency",
      currency: "EUR",
    }).format(amount);
  };

  const rootFolders = data.folders.filter((f) => f.parentId === null);

  const handleNewFolder = () => {
    setEditingFolder(null);
    setFormData({ name: "", parentId: "folder-root", color: "#6366f1" });
    setIsDialogOpen(true);
  };

  const handleEdit = (folder: FolderType) => {
    setEditingFolder(folder);
    setFormData({
      name: folder.name,
      parentId: folder.parentId || "folder-root",
      color: folder.color,
    });
    setIsDialogOpen(true);
  };

  const handleSave = async () => {
    const parentId =
      formData.parentId === "folder-root" ? null : formData.parentId;

    try {
      if (editingFolder) {
        await updateFolder({
          ...editingFolder,
          name: formData.name,
          parentId,
          color: formData.color,
        });
      } else {
        await addFolder({
          name: formData.name,
          parentId,
          color: formData.color,
          icon: "folder",
        });
      }
      refresh();
      setIsDialogOpen(false);
    } catch (error) {
      console.error("Error saving folder:", error);
      alert("Erreur lors de la sauvegarde du dossier");
    }
  };

  const handleDelete = async (folderId: string) => {
    if (
      !confirm(
        "Supprimer ce dossier ? Les comptes seront déplacés à la racine."
      )
    )
      return;

    try {
      await deleteFolder(folderId);
      refresh();
    } catch (error) {
      console.error("Error deleting folder:", error);
      alert("Erreur lors de la suppression du dossier");
    }
  };

  const handleEditAccount = (account: Account) => {
    setEditingAccount(account);
    setAccountFormData({
      name: account.name,
      type: account.type,
      folderId: account.folderId || "folder-root",
    });
    setIsAccountDialogOpen(true);
  };

  const handleSaveAccount = async () => {
    if (!editingAccount) return;

    try {
      await updateAccount({
        ...editingAccount,
        name: accountFormData.name,
        type: accountFormData.type,
        folderId:
          accountFormData.folderId === "folder-root"
            ? null
            : accountFormData.folderId,
      });
      refresh();
      setIsAccountDialogOpen(false);
      setEditingAccount(null);
    } catch (error) {
      console.error("Error updating account:", error);
      alert("Erreur lors de la mise à jour du compte");
    }
  };

  const handleDragStart = (event: DragStartEvent) => {
    setActiveId(event.active.id as string);
  };

  const handleDragEnd = async (event: DragEndEvent) => {
    const { active, over } = event;
    setActiveId(null);

    if (!over || active.id === over.id) return;

    const activeId = active.id as string;
    const overId = over.id as string;

    // Déplacer un compte vers un dossier
    if (activeId.startsWith("account-")) {
      const accountId = activeId.replace("account-", "");
      let targetFolderId: string | null = null;

      if (overId.startsWith("folder-")) {
        const folderId = overId.replace("folder-", "");
        targetFolderId = folderId === "folder-root" ? null : folderId;
      } else if (overId.startsWith("account-")) {
        // Déplacer vers le dossier du compte cible
        const targetAccountId = overId.replace("account-", "");
        const targetAccount = data.accounts.find((a) => a.id === targetAccountId);
        if (targetAccount) {
          targetFolderId = targetAccount.folderId;
        }
      }

      if (targetFolderId !== undefined) {
        try {
          const account = data.accounts.find((a) => a.id === accountId);
          if (account) {
            await updateAccount({
              ...account,
              folderId: targetFolderId,
            });
            refresh();
          }
        } catch (error) {
          console.error("Error moving account:", error);
          alert("Erreur lors du déplacement du compte");
        }
      }
    }

    // Déplacer un dossier vers un autre dossier (changer le parent)
    if (activeId.startsWith("folder-") && overId.startsWith("folder-")) {
      const folderId = activeId.replace("folder-", "");
      const targetFolderId = overId.replace("folder-", "");

      // Empêcher de déplacer un dossier dans lui-même ou ses enfants
      const folder = data.folders.find((f) => f.id === folderId);
      if (!folder) return;

      const isDescendant = (parentId: string, childId: string): boolean => {
        const child = data.folders.find((f) => f.id === childId);
        if (!child || !child.parentId) return false;
        if (child.parentId === parentId) return true;
        return isDescendant(parentId, child.parentId);
      };

      if (folderId === targetFolderId || isDescendant(folderId, targetFolderId)) {
        return; // Ne pas permettre de déplacer un dossier dans lui-même ou ses descendants
      }

      try {
        const newParentId = targetFolderId === "folder-root" ? null : targetFolderId;
        await updateFolder({
          ...folder,
          parentId: newParentId,
        });
        refresh();
      } catch (error) {
        console.error("Error moving folder:", error);
        alert("Erreur lors du déplacement du dossier");
      }
    }
  };

  return (
    <PageLayout>
      <PageHeader
        title="Organisation"
        description="Organisez vos comptes en dossiers"
        actions={
          <Button onClick={handleNewFolder}>
            <Plus className="w-4 h-4 mr-2" />
            Nouveau dossier
          </Button>
        }
      />

      <Card>
        <CardHeader>
          <CardTitle>Arborescence des comptes</CardTitle>
        </CardHeader>
        <CardContent>
          <DndContext
            sensors={sensors}
            collisionDetection={closestCenter}
            onDragStart={handleDragStart}
            onDragEnd={handleDragEnd}
          >
            <SortableContext
              items={[
                ...rootFolders.map((f) => `folder-${f.id}`),
                ...data.accounts.map((a) => `account-${a.id}`),
              ]}
              strategy={verticalListSortingStrategy}
            >
              <div className="space-y-1">
                {rootFolders.map((folder) => (
                  <FolderTreeItem
                    key={folder.id}
                    folder={folder}
                    accounts={data.accounts}
                    allFolders={data.folders}
                    level={0}
                    onEdit={handleEdit}
                    onDelete={handleDelete}
                    onEditAccount={handleEditAccount}
                    formatCurrency={formatCurrency}
                  />
                ))}
              </div>
            </SortableContext>
            <DragOverlay>
              {activeId ? (
                <div className="opacity-50">
                  {activeId.startsWith("account-") ? (
                    <div className="p-2 bg-muted rounded">
                      {data.accounts.find(
                        (a) => a.id === activeId.replace("account-", "")
                      )?.name || ""}
                    </div>
                  ) : (
                    <div className="p-2 bg-muted rounded">
                      {data.folders.find(
                        (f) => f.id === activeId.replace("folder-", "")
                      )?.name || ""}
                    </div>
                  )}
                </div>
              ) : null}
            </DragOverlay>
          </DndContext>
        </CardContent>
      </Card>

      <FolderEditDialog
        open={isDialogOpen}
        onOpenChange={setIsDialogOpen}
        editingFolder={editingFolder}
        formData={formData}
        onFormDataChange={setFormData}
        folders={data.folders}
        onSave={handleSave}
      />

      <AccountFolderDialog
        open={isAccountDialogOpen}
        onOpenChange={setIsAccountDialogOpen}
        formData={accountFormData}
        onFormDataChange={setAccountFormData}
        folders={data.folders}
        onSave={handleSaveAccount}
      />
    </PageLayout>
  );
}