"use client";

import { useState } from "react";
import { DraggableFolderItem } from "./draggable-folder-item";
import { DraggableAccountItem } from "./draggable-account-item";
import type { Folder as FolderType, Account } from "@/lib/types";
import { getAccountBalance } from "@/lib/account-utils";

interface FolderTreeItemProps {
  folder: FolderType;
  accounts: Account[];
  allFolders: FolderType[];
  level: number;
  onEdit: (folder: FolderType) => void;
  onDelete: (folderId: string) => void;
  onEditAccount: (account: Account) => void;
  formatCurrency: (amount: number) => string;
}

export function FolderTreeItem({
  folder,
  accounts,
  allFolders,
  level,
  onEdit,
  onDelete,
  onEditAccount,
  formatCurrency,
}: FolderTreeItemProps) {
  const [isExpanded, setIsExpanded] = useState(true);

  // Pour le dossier "Mes Comptes" (folder-root), inclure aussi les comptes sans dossier
  const folderAccounts = accounts.filter(
    (a) =>
      a.folderId === folder.id ||
      (folder.id === "folder-root" && a.folderId === null)
  );
  const childFolders = allFolders.filter((f) => f.parentId === folder.id);
  const folderTotal = folderAccounts.reduce(
    (sum, a) => sum + getAccountBalance(a),
    0,
  );

  return (
    <div>
      <DraggableFolderItem
        folder={folder}
        accounts={accounts}
        allFolders={allFolders}
        level={level}
        isExpanded={isExpanded}
        onToggleExpand={() => setIsExpanded(!isExpanded)}
        onEdit={onEdit}
        onDelete={onDelete}
        onEditAccount={onEditAccount}
        formatCurrency={formatCurrency}
        folderAccounts={folderAccounts}
        childFolders={childFolders}
        folderTotal={folderTotal}
      />

      {isExpanded && (
        <div>
          {folderAccounts.map((account) => (
            <DraggableAccountItem
              key={account.id}
              account={account}
              onEditAccount={onEditAccount}
              formatCurrency={formatCurrency}
            />
          ))}

          {childFolders.map((child) => (
            <FolderTreeItem
              key={child.id}
              folder={child}
              accounts={accounts}
              allFolders={allFolders}
              level={level + 1}
              onEdit={onEdit}
              onDelete={onDelete}
              onEditAccount={onEditAccount}
              formatCurrency={formatCurrency}
            />
          ))}
        </div>
      )}
    </div>
  );
}