"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";

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

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

  return (
    <Card className="relative">
      <CardHeader className="pb-2">
        <div className="flex items-start justify-between">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
              <Icon className="w-5 h-5 text-primary" />
            </div>
            <div>
              <CardTitle className="text-base">{account.name}</CardTitle>
              <p className="text-xs text-muted-foreground">
                {accountTypeLabels[account.type]}
              </p>
            </div>
          </div>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" size="icon" className="h-8 w-8">
                <MoreVertical className="w-4 h-4" />
              </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>
        <div
          className={cn(
            "text-2xl font-bold mb-2",
            account.balance >= 0 ? "text-emerald-600" : "text-red-600"
          )}
        >
          {formatCurrency(account.balance)}
        </div>
        <div className="flex items-center justify-between text-sm text-muted-foreground">
          <Link
            href={`/transactions?accountId=${account.id}`}
            className="hover:text-primary hover:underline"
          >
            {transactionCount} transactions
          </Link>
          {folder && <span>{folder.name}</span>}
        </div>
        {account.lastImport && (
          <p className="text-xs text-muted-foreground mt-2">
            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-2"
          >
            <ExternalLink className="w-3 h-3" />
            Accéder au portail banque
          </a>
        )}
      </CardContent>
    </Card>
  );
}