"use client";

import { CreditCard, Eye, EyeOff, MoreHorizontal, TrendingUp, TrendingDown } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { formatCurrency, cn } from "@/lib/utils";
import { BankingAccount, AccountType, AccountStatus } from "@/types/banking";

interface AccountCardProps {
    account: BankingAccount;
    showBalance?: boolean;
    onToggleBalance?: () => void;
    onViewDetails?: (accountId: string) => void;
    onEditAccount?: (accountId: string) => void;
    onFreezeAccount?: (accountId: string) => void;
    className?: string;
}

const accountTypeConfig = {
    savings: {
        label: "Épargne",
        color: "bg-green-100 text-green-700",
        icon: "💰",
    },
    checking: {
        label: "Courant",
        color: "bg-blue-100 text-blue-700",
        icon: "🏦",
    },
    credit: {
        label: "Crédit",
        color: "bg-purple-100 text-purple-700",
        icon: "💳",
    },
    pso: {
        label: "Parts Sociales",
        color: "bg-orange-100 text-orange-700",
        icon: "📊",
    },
    loan: {
        label: "Prêt",
        color: "bg-red-100 text-red-700",
        icon: "🏠",
    },
} as const;

const statusConfig = {
    active: {
        label: "Actif",
        color: "bg-green-100 text-green-700",
    },
    inactive: {
        label: "Inactif",
        color: "bg-gray-100 text-gray-700",
    },
    frozen: {
        label: "Gelé",
        color: "bg-blue-100 text-blue-700",
    },
    closed: {
        label: "Fermé",
        color: "bg-red-100 text-red-700",
    },
} as const;

export function AccountCard({
    account,
    showBalance = true,
    onToggleBalance,
    onViewDetails,
    onEditAccount,
    onFreezeAccount,
    className,
}: AccountCardProps) {
    const typeInfo = accountTypeConfig[account.account_type as AccountType];
    const statusInfo = statusConfig[account.status as AccountStatus];

    // Calculer la variation du solde (simulation)
    const balanceVariation = Math.random() > 0.5 ? 1.5 : -0.8;
    const isPositiveVariation = balanceVariation > 0;

    return (
        <Card className={cn("relative transition-shadow hover:shadow-md", className)}>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <div className="flex items-center space-x-2">
                    <span className="text-lg">{typeInfo.icon}</span>
                    <div>
                        <CardTitle className="text-base font-medium">{account.account_name}</CardTitle>
                        <p className="text-xs text-muted-foreground">{account.account_number}</p>
                    </div>
                </div>
                <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                        <Button variant="ghost" size="icon" className="h-8 w-8">
                            <MoreHorizontal className="h-4 w-4" />
                            <span className="sr-only">Options du compte</span>
                        </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end">
                        <DropdownMenuItem onClick={() => onViewDetails?.(account.id)}>
                            <CreditCard className="mr-2 h-4 w-4" />
                            Voir les détails
                        </DropdownMenuItem>
                        <DropdownMenuItem onClick={() => onEditAccount?.(account.id)}>
                            Modifier le compte
                        </DropdownMenuItem>
                        <DropdownMenuSeparator />
                        <DropdownMenuItem onClick={() => onFreezeAccount?.(account.id)}>
                            {account.status === 'frozen' ? 'Débloquer' : 'Geler'} le compte
                        </DropdownMenuItem>
                    </DropdownMenuContent>
                </DropdownMenu>
            </CardHeader>

            <CardContent className="space-y-4">
                {/* Badges de type et statut */}
                <div className="flex items-center gap-2">
                    <Badge variant="secondary" className={cn("text-xs", typeInfo.color)}>
                        {typeInfo.label}
                    </Badge>
                    <Badge variant="outline" className={cn("text-xs", statusInfo.color)}>
                        {statusInfo.label}
                    </Badge>
                </div>

                {/* Solde */}
                <div className="space-y-1">
                    <div className="flex items-center justify-between">
                        <span className="text-xs text-muted-foreground">Solde disponible</span>
                        {onToggleBalance && (
                            <Button variant="ghost" size="icon" className="h-6 w-6" onClick={onToggleBalance}>
                                {showBalance ? <EyeOff className="h-3 w-3" /> : <Eye className="h-3 w-3" />}
                            </Button>
                        )}
                    </div>
                    <div className="flex items-center justify-between">
                        <span className="text-2xl font-bold tabular-nums">
                            {showBalance ? formatCurrency(account.balance) : "••••••"}
                        </span>
                        {showBalance && (
                            <div className="flex items-center gap-1">
                                {isPositiveVariation ? (
                                    <TrendingUp className="h-3 w-3 text-green-500" />
                                ) : (
                                    <TrendingDown className="h-3 w-3 text-red-500" />
                                )}
                                <span
                                    className={cn(
                                        "text-xs font-medium",
                                        isPositiveVariation ? "text-green-500" : "text-red-500"
                                    )}
                                >
                                    {isPositiveVariation ? '+' : ''}{balanceVariation}%
                                </span>
                            </div>
                        )}
                    </div>
                </div>

                {/* Limite de crédit pour comptes crédit */}
                {account.account_type === 'credit' && account.credit_limit && (
                    <div className="space-y-1">
                        <span className="text-xs text-muted-foreground">Limite de crédit</span>
                        <div className="text-sm font-medium tabular-nums">
                            {showBalance ? formatCurrency(account.credit_limit) : "••••••"}
                        </div>
                    </div>
                )}

                {/* Taux d'intérêt */}
                {account.interest_rate && (
                    <div className="flex items-center justify-between text-xs">
                        <span className="text-muted-foreground">Taux d'intérêt</span>
                        <span className="font-medium">{account.interest_rate}%</span>
                    </div>
                )}

                {/* Dernière transaction */}
                {account.last_transaction_date && (
                    <div className="flex items-center justify-between text-xs">
                        <span className="text-muted-foreground">Dernière activité</span>
                        <span className="font-medium">
                            {new Date(account.last_transaction_date).toLocaleDateString('fr-FR')}
                        </span>
                    </div>
                )}
            </CardContent>
        </Card>
    );
}