fintrack/components/dashboard/accounts-summary.tsx

"use client";

import { useMemo } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Progress } from "@/components/ui/progress";
import type { BankingData, Account, Folder } from "@/lib/types";
import { cn } from "@/lib/utils";
import { Building2, Folder as FolderIcon } from "lucide-react";
import { getAccountBalance } from "@/lib/account-utils";

interface AccountsSummaryProps {
  data: BankingData;
}

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

  // Group accounts by folder
  const accountsByFolder = useMemo(() => {
    const grouped: Record<string, Account[]> = {};

    data.accounts.forEach((account) => {
      const folderId = account.folderId || "no-folder";
      if (!grouped[folderId]) {
        grouped[folderId] = [];
      }
      grouped[folderId].push(account);
    });

    // Sort accounts within each folder by name
    Object.keys(grouped).forEach((folderId) => {
      grouped[folderId].sort((a, b) => a.name.localeCompare(b.name));
    });

    return grouped;
  }, [data.accounts]);

  // Get root folders (folders without parent) sorted by name
  const rootFolders = useMemo(() => {
    return data.folders
      .filter((f) => !f.parentId)
      .sort((a, b) => a.name.localeCompare(b.name));
  }, [data.folders]);

  // Helper to get child folders recursively
  const getChildFolders = (parentId: string): Folder[] => {
    return data.folders
      .filter((f) => f.parentId === parentId)
      .sort((a, b) => a.name.localeCompare(b.name));
  };

  // Render folder section recursively
  const renderFolderSection = (folder: Folder, level: number = 0) => {
    const folderAccounts = accountsByFolder[folder.id] || [];
    const childFolders = getChildFolders(folder.id);
    const folderTotal = folderAccounts.reduce(
      (sum, a) => sum + getAccountBalance(a),
      0,
    );

    if (folderAccounts.length === 0 && childFolders.length === 0) {
      return null;
    }

    return (
      <div key={folder.id} className={level > 0 ? "mt-4" : ""}>
        {/* Folder header */}
        <div className="flex items-center gap-2 mb-3">
          <FolderIcon className="w-4 h-4 text-muted-foreground" />
          <h3
            className={cn(
              "font-semibold text-sm",
              level > 0 && "text-muted-foreground",
            )}
          >
            {folder.name}
          </h3>
          {folderAccounts.length > 0 && (
            <span className="text-xs text-muted-foreground">
              ({folderAccounts.length})
            </span>
          )}
          {folderTotal !== 0 && (
            <span
              className={cn(
                "text-xs font-semibold tabular-nums ml-auto",
                folderTotal >= 0 ? "text-emerald-600" : "text-red-600",
              )}
            >
              {formatCurrency(folderTotal)}
            </span>
          )}
        </div>

        {/* Accounts in this folder */}
        {folderAccounts.length > 0 && (
          <div className={cn("space-y-3", level > 0 && "ml-4")}>
            {folderAccounts.map((account) => {
              const realBalance = getAccountBalance(account);
              const totalPositive = data.accounts
                .filter((a) => getAccountBalance(a) > 0)
                .reduce((sum, a) => sum + getAccountBalance(a), 0);
              const percentage =
                totalPositive > 0
                  ? Math.max(0, (realBalance / totalPositive) * 100)
                  : 0;

              return (
                <div key={account.id} className="space-y-2">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center">
                        <Building2 className="w-4 h-4 text-primary" />
                      </div>
                      <div>
                        <p className="font-medium text-sm">{account.name}</p>
                        <p className="text-xs text-muted-foreground">
                          {account.accountNumber}
                        </p>
                      </div>
                    </div>
                    <span
                      className={cn(
                        "font-semibold tabular-nums",
                        realBalance >= 0 ? "text-emerald-600" : "text-red-600",
                      )}
                    >
                      {formatCurrency(realBalance)}
                    </span>
                  </div>
                  {realBalance > 0 && (
                    <Progress value={percentage} className="h-1.5" />
                  )}
                </div>
              );
            })}
          </div>
        )}

        {/* Child folders */}
        {childFolders.map((childFolder) =>
          renderFolderSection(childFolder, level + 1),
        )}
      </div>
    );
  };

  if (data.accounts.length === 0) {
    return (
      <Card>
        <CardHeader>
          <CardTitle>Mes Comptes</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex flex-col items-center justify-center py-8 text-center">
            <Building2 className="w-12 h-12 text-muted-foreground mb-3" />
            <p className="text-muted-foreground">Aucun compte</p>
            <p className="text-sm text-muted-foreground mt-1">
              Importez un fichier OFX pour ajouter un compte
            </p>
          </div>
        </CardContent>
      </Card>
    );
  }

  const orphanAccounts = accountsByFolder["no-folder"] || [];
  const orphanTotal = orphanAccounts.reduce(
    (sum, a) => sum + getAccountBalance(a),
    0,
  );

  return (
    <Card>
      <CardHeader>
        <CardTitle>Mes Comptes</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-6">
          {/* Accounts without folder */}
          {orphanAccounts.length > 0 && (
            <div>
              <div className="flex items-center gap-2 mb-3">
                <FolderIcon className="w-4 h-4 text-muted-foreground" />
                <h3 className="font-semibold text-sm">Sans dossier</h3>
                <span className="text-xs text-muted-foreground">
                  ({orphanAccounts.length})
                </span>
                {orphanTotal !== 0 && (
                  <span
                    className={cn(
                      "text-xs font-semibold tabular-nums ml-auto",
                      orphanTotal >= 0 ? "text-emerald-600" : "text-red-600",
                    )}
                  >
                    {formatCurrency(orphanTotal)}
                  </span>
                )}
              </div>
              <div className="space-y-3">
                {orphanAccounts.map((account) => {
                  const realBalance = getAccountBalance(account);
                  const totalPositive = data.accounts
                    .filter((a) => getAccountBalance(a) > 0)
                    .reduce((sum, a) => sum + getAccountBalance(a), 0);
                  const percentage =
                    totalPositive > 0
                      ? Math.max(0, (realBalance / totalPositive) * 100)
                      : 0;

                  return (
                    <div key={account.id} className="space-y-2">
                      <div className="flex items-center justify-between">
                        <div className="flex items-center gap-2">
                          <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center">
                            <Building2 className="w-4 h-4 text-primary" />
                          </div>
                          <div>
                            <p className="font-medium text-sm">
                              {account.name}
                            </p>
                            <p className="text-xs text-muted-foreground">
                              {account.accountNumber}
                            </p>
                          </div>
                        </div>
                        <span
                          className={cn(
                            "font-semibold tabular-nums",
                            realBalance >= 0
                              ? "text-emerald-600"
                              : "text-red-600",
                          )}
                        >
                          {formatCurrency(realBalance)}
                        </span>
                      </div>
                      {realBalance > 0 && (
                        <Progress value={percentage} className="h-1.5" />
                      )}
                    </div>
                  );
                })}
              </div>
            </div>
          )}

          {/* Folders */}
          {rootFolders.map((folder) => renderFolderSection(folder))}
        </div>
      </CardContent>
    </Card>
  );
}