fintrack/components/accounts/account-card.tsx

"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { MoreVertical, Pencil, Trash2, ExternalLink } from "lucide-react";
import { cn } from "@/lib/utils";
import Link from "next/link";
import type { Account, Folder } from "@/lib/types";
import { accountTypeIcons, accountTypeLabels } from "./constants";
import { Checkbox } from "@/components/ui/checkbox";
import { getAccountBalance } from "@/lib/account-utils";

interface AccountCardProps {
  account: Account;
  folder?: Folder;
  transactionCount: number;
  onEdit: (account: Account) => void;
  onDelete: (accountId: string) => void;
  formatCurrency: (amount: number) => string;
  isSelected?: boolean;
  onSelect?: (accountId: string, selected: boolean) => void;
}

export function AccountCard({
  account,
  folder,
  transactionCount,
  onEdit,
  onDelete,
  formatCurrency,
  isSelected = false,
  onSelect,
}: AccountCardProps) {
  const Icon = accountTypeIcons[account.type];
  const realBalance = getAccountBalance(account);

  return (
    <Card className={cn("relative", isSelected && "ring-2 ring-primary")}>
      <CardHeader className="pb-0">
        <div className="flex items-start justify-between">
          <div className="flex items-center gap-2 flex-1">
            {onSelect && (
              <Checkbox
                checked={isSelected}
                onCheckedChange={(checked) =>
                  onSelect(account.id, checked === true)
                }
                onClick={(e) => e.stopPropagation()}
              />
            )}
            <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center shrink-0">
              <Icon className="w-4 h-4 text-primary" />
            </div>
            <div className="min-w-0">
              <CardTitle className="text-sm font-semibold truncate">{account.name}</CardTitle>
              <p className="text-xs text-muted-foreground">
                {accountTypeLabels[account.type]}
              </p>
              {account.accountNumber && (
                <p className="text-xs text-muted-foreground mt-0.5 truncate">
                  {account.accountNumber}
                </p>
              )}
            </div>
          </div>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" size="icon" className="h-7 w-7 shrink-0">
                <MoreVertical className="w-3.5 h-3.5" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuItem onClick={() => onEdit(account)}>
                <Pencil className="w-4 h-4 mr-2" />
                Modifier
              </DropdownMenuItem>
              <DropdownMenuItem
                onClick={() => onDelete(account.id)}
                className="text-red-600"
              >
                <Trash2 className="w-4 h-4 mr-2" />
                Supprimer
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </CardHeader>
      <CardContent className="pt-1">
        <div
          className={cn(
            "text-xl font-bold mb-1.5",
            realBalance >= 0 ? "text-emerald-600" : "text-red-600"
          )}
        >
          {formatCurrency(realBalance)}
        </div>
        <div className="flex items-center justify-between text-xs text-muted-foreground">
          <Link
            href={`/transactions?accountId=${account.id}`}
            className="hover:text-primary hover:underline truncate"
          >
            {transactionCount} transactions
          </Link>
          {folder && <span className="truncate ml-2">{folder.name}</span>}
        </div>
        {account.lastImport && (
          <p className="text-xs text-muted-foreground mt-1.5">
            Dernier import:{" "}
            {new Date(account.lastImport).toLocaleDateString("fr-FR")}
          </p>
        )}
        {account.externalUrl && (
          <a
            href={account.externalUrl}
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center gap-1 text-xs text-primary hover:underline mt-1.5"
          >
            <ExternalLink className="w-3 h-3" />
            Accéder au portail banque
          </a>
        )}
      </CardContent>
    </Card>
  );
}