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

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { formatCurrency, cn } from "@/lib/utils";
import { BankingTransaction } from "@/types/banking";

// Type configuration for transaction types
const typeConfig = {
    deposit: { label: "Dépôt", color: "bg-green-100 text-green-700", icon: "⬇️" },
    withdrawal: { label: "Retrait", color: "bg-red-100 text-red-700", icon: "⬆️" },
    transfer: { label: "Transfert", color: "bg-blue-100 text-blue-700", icon: "↔️" },
    interest: { label: "Intérêts", color: "bg-purple-100 text-purple-700", icon: "📈" },
    fee: { label: "Frais", color: "bg-orange-100 text-orange-700", icon: "💰" },
    loan_payment: { label: "Remb. Prêt", color: "bg-indigo-100 text-indigo-700", icon: "🏠" },
    adjustment: { label: "Ajustement", color: "bg-gray-100 text-gray-700", icon: "⚖️" },
} as const;

export const DateCell = ({ date }: { date: string }) => {
    const dateObj = new Date(date);
    return (
        <div className="space-y-1">
            <div className="font-medium">{dateObj.toLocaleDateString("fr-FR")}</div>
            <div className="text-muted-foreground text-xs">
                {dateObj.toLocaleTimeString("fr-FR", { hour: "2-digit", minute: "2-digit" })}
            </div>
        </div>
    );
};

export const TypeCell = ({ transactionType }: { transactionType: string }) => {
    const validTypes = Object.keys(typeConfig);
    const config = validTypes.includes(transactionType)
        ? typeConfig[transactionType as keyof typeof typeConfig]
        : {
            label: transactionType,
            color: "bg-gray-100 text-gray-700",
            icon: "❓",
        };

    return (
        <Badge variant="secondary" className={cn("text-xs", config.color)}>
            <span className="mr-1">{config.icon}</span>
            {config.label}
        </Badge>
    );
};

export const DescriptionCell = ({ description, reference }: { description: string; reference?: string }) => (
    <div className="space-y-1">
        <div className="font-medium">{description}</div>
        {reference && <div className="text-muted-foreground text-xs">Réf: {reference}</div>}
    </div>
);

export const AccountCell = ({ accountId }: { accountId: string }) => (
    <div className="space-y-1">
        <div className="font-medium">Compte {accountId}</div>
        <div className="text-muted-foreground text-xs">ID: {accountId}</div>
    </div>
);

export const AmountCell = ({ amount, transactionType }: { amount: number; transactionType: string }) => {
    // Déterminer si c'est un crédit ou un débit
    const isCredit = ["deposit", "interest"].includes(transactionType);
    const isDebit = ["withdrawal", "fee", "loan_payment"].includes(transactionType);

    const getAmountColor = () => {
        if (isCredit) return "text-green-600";
        if (isDebit) return "text-red-600";
        return "text-foreground";
    };

    const getAmountPrefix = () => {
        if (isCredit) return "+";
        if (isDebit) return "-";
        return "";
    };

    return (
        <div className={cn("text-right font-bold tabular-nums", getAmountColor())}>
            <div className="flex items-center justify-end gap-1">
                {isCredit && <TrendingUp className="h-3 w-3" />}
                {isDebit && <TrendingDown className="h-3 w-3" />}
                <span>
                    {getAmountPrefix()}
                    {formatCurrency(Math.abs(amount))}
                </span>
            </div>
        </div>
    );
};

export const ActionsCell = ({
    transaction,
    onViewTransaction,
    onEditTransaction,
}: {
    transaction: BankingTransaction;
    onViewTransaction?: (id: string) => void;
    onEditTransaction?: (id: string) => void;
}) => (
    <DropdownMenu>
        <DropdownMenuTrigger asChild>
            <Button variant="ghost" className="h-8 w-8 p-0">
                <span className="sr-only">Ouvrir le menu</span>
                <MoreHorizontal className="h-4 w-4" />
            </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end">
            <DropdownMenuItem onClick={() => onViewTransaction?.(transaction.id)}>
                <Eye className="mr-2 h-4 w-4" />
                Voir les détails
            </DropdownMenuItem>
            {transaction.status === "pending" && (
                <DropdownMenuItem onClick={() => onEditTransaction?.(transaction.id)}>
                    <Edit className="mr-2 h-4 w-4" />
                    Modifier
                </DropdownMenuItem>
            )}
        </DropdownMenuContent>
    </DropdownMenu>
);