"use client";

import { useMemo } from "react";
import { Line, LineChart, XAxis, YAxis, CartesianGrid, ResponsiveContainer, Tooltip } from "recharts";

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { formatCurrency } from "@/lib/utils";
import { BankingAccount } from "@/types/banking";

interface BalanceChartProps {
    accounts: BankingAccount[];
    selectedAccountId?: string;
    onAccountChange?: (accountId: string) => void;
    timeRange?: "7d" | "30d" | "90d" | "1y";
    onTimeRangeChange?: (range: "7d" | "30d" | "90d" | "1y") => void;
    className?: string;
}

const chartConfig = {
    balance: {
        label: "Solde",
        color: "var(--chart-1)",
    },
    deposits: {
        label: "Dépôts",
        color: "var(--chart-2)",
    },
    withdrawals: {
        label: "Retraits",
        color: "var(--chart-3)",
    },
};

// Génération de données simulées pour la démo
const generateBalanceHistory = (account: BankingAccount, days: number) => {
    const data = [];
    const currentBalance = account.balance;
    const startDate = new Date();
    startDate.setDate(startDate.getDate() - days);

    for (let i = 0; i <= days; i++) {
        const date = new Date(startDate);
        date.setDate(date.getDate() + i);

        // Simulation d'évolution du solde
        const variation = (Math.random() - 0.5) * 2000; // Variation aléatoire
        const balance = Math.max(0, currentBalance + variation * (Math.random() * 0.5));

        // Simulation de dépôts et retraits
        const deposits = Math.random() > 0.7 ? Math.random() * 5000 : 0;
        const withdrawals = Math.random() > 0.8 ? Math.random() * 2000 : 0;

        data.push({
            date: date.toLocaleDateString('fr-FR', {
                day: '2-digit',
                month: days > 30 ? 'short' : '2-digit',
                year: days > 90 ? '2-digit' : undefined
            }),
            fullDate: date.toISOString(),
            balance: Math.round(balance * 100) / 100,
            deposits: Math.round(deposits * 100) / 100,
            withdrawals: Math.round(withdrawals * 100) / 100,
        });
    }

    return data;
};

const timeRangeOptions = [
    { value: "7d", label: "7 jours", days: 7 },
    { value: "30d", label: "30 jours", days: 30 },
    { value: "90d", label: "3 mois", days: 90 },
    { value: "1y", label: "1 an", days: 365 },
];

export function BalanceChart({
    accounts,
    selectedAccountId,
    onAccountChange,
    timeRange = "30d",
    onTimeRangeChange,
    className,
}: BalanceChartProps) {
    const selectedAccount = useMemo(() => {
        if (selectedAccountId) {
            return accounts.find(acc => acc.id === selectedAccountId);
        }
        return accounts[0]; // Premier compte par défaut
    }, [accounts, selectedAccountId]);

    const chartData = useMemo(() => {
        if (!selectedAccount) return [];

        const range = timeRangeOptions.find(option => option.value === timeRange);
        return generateBalanceHistory(selectedAccount, range?.days || 30);
    }, [selectedAccount, timeRange]);

    const stats = useMemo(() => {
        if (chartData.length === 0) return { trend: 0, highest: 0, lowest: 0 };

        const balances = chartData.map(d => d.balance);
        const firstBalance = balances[0];
        const lastBalance = balances[balances.length - 1];
        const trend = ((lastBalance - firstBalance) / firstBalance) * 100;

        return {
            trend: Math.round(trend * 100) / 100,
            highest: Math.max(...balances),
            lowest: Math.min(...balances),
        };
    }, [chartData]);

    if (!selectedAccount) {
        return (
            <Card className={className}>
                <CardContent className="flex h-64 items-center justify-center">
                    <p className="text-muted-foreground">Aucun compte sélectionné</p>
                </CardContent>
            </Card>
        );
    }

    return (
        <Card className={className}>
            <CardHeader>
                <div className="flex items-center justify-between">
                    <div>
                        <CardTitle>Évolution du solde</CardTitle>
                        <CardDescription>
                            Historique du solde pour {selectedAccount.account_name}
                        </CardDescription>
                    </div>
                    <div className="flex items-center space-x-2">
                        <Select value={selectedAccountId || selectedAccount.id} onValueChange={onAccountChange}>
                            <SelectTrigger className="w-48">
                                <SelectValue placeholder="Sélectionner un compte" />
                            </SelectTrigger>
                            <SelectContent>
                                {accounts.map((account) => (
                                    <SelectItem key={account.id} value={account.id}>
                                        <div className="flex flex-col">
                                            <span className="font-medium">{account.account_name}</span>
                                            <span className="text-xs text-muted-foreground">{account.account_number}</span>
                                        </div>
                                    </SelectItem>
                                ))}
                            </SelectContent>
                        </Select>

                        <Select value={timeRange} onValueChange={onTimeRangeChange}>
                            <SelectTrigger className="w-32">
                                <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                                {timeRangeOptions.map((option) => (
                                    <SelectItem key={option.value} value={option.value}>
                                        {option.label}
                                    </SelectItem>
                                ))}
                            </SelectContent>
                        </Select>
                    </div>
                </div>
            </CardHeader>

            <CardContent className="space-y-4">
                {/* Statistiques rapides */}
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div className="space-y-1">
                        <p className="text-xs text-muted-foreground uppercase">Solde actuel</p>
                        <p className="text-2xl font-bold">{formatCurrency(selectedAccount.balance)}</p>
                    </div>
                    <div className="space-y-1">
                        <p className="text-xs text-muted-foreground uppercase">Plus haut</p>
                        <p className="text-lg font-semibold text-green-600">{formatCurrency(stats.highest)}</p>
                    </div>
                    <div className="space-y-1">
                        <p className="text-xs text-muted-foreground uppercase">Plus bas</p>
                        <p className="text-lg font-semibold text-red-600">{formatCurrency(stats.lowest)}</p>
                    </div>
                </div>

                {/* Tendance */}
                <div className="flex items-center gap-2">
                    <span className="text-sm text-muted-foreground">Tendance:</span>
                    <span className={`text-sm font-medium ${stats.trend >= 0 ? 'text-green-600' : 'text-red-600'
                        }`}>
                        {stats.trend >= 0 ? '+' : ''}{stats.trend}%
                    </span>
                    <span className="text-xs text-muted-foreground">
                        sur la période sélectionnée
                    </span>
                </div>

                {/* Graphique */}
                <div className="h-80">
                    <ChartContainer config={chartConfig} className="h-full w-full">
                        <ResponsiveContainer width="100%" height="100%">
                            <LineChart data={chartData} margin={{ top: 20, right: 30, left: 20, bottom: 20 }}>
                                <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
                                <XAxis
                                    dataKey="date"
                                    axisLine={false}
                                    tickLine={false}
                                    className="text-xs"
                                />
                                <YAxis
                                    axisLine={false}
                                    tickLine={false}
                                    tickFormatter={(value) => formatCurrency(value, { noDecimals: true })}
                                    className="text-xs"
                                />
                                <ChartTooltip
                                    content={({ active, payload, label }) => {
                                        if (active && payload && payload.length) {
                                            const data = payload[0].payload;
                                            return (
                                                <div className="rounded-lg border bg-background p-3 shadow-md">
                                                    <p className="font-medium">{label}</p>
                                                    <div className="space-y-1 text-sm">
                                                        <div className="flex items-center justify-between gap-4">
                                                            <span className="text-muted-foreground">Solde:</span>
                                                            <span className="font-medium">{formatCurrency(data.balance)}</span>
                                                        </div>
                                                        {data.deposits > 0 && (
                                                            <div className="flex items-center justify-between gap-4">
                                                                <span className="text-green-600">Dépôts:</span>
                                                                <span className="font-medium text-green-600">+{formatCurrency(data.deposits)}</span>
                                                            </div>
                                                        )}
                                                        {data.withdrawals > 0 && (
                                                            <div className="flex items-center justify-between gap-4">
                                                                <span className="text-red-600">Retraits:</span>
                                                                <span className="font-medium text-red-600">-{formatCurrency(data.withdrawals)}</span>
                                                            </div>
                                                        )}
                                                    </div>
                                                </div>
                                            );
                                        }
                                        return null;
                                    }}
                                />
                                <Line
                                    type="monotone"
                                    dataKey="balance"
                                    stroke="var(--color-balance)"
                                    strokeWidth={2}
                                    dot={false}
                                    activeDot={{ r: 4, stroke: "var(--color-balance)", strokeWidth: 2 }}
                                />
                            </LineChart>
                        </ResponsiveContainer>
                    </ChartContainer>
                </div>

                {/* Légende */}
                <div className="flex items-center justify-center space-x-6 text-xs text-muted-foreground">
                    <div className="flex items-center gap-2">
                        <div className="h-2 w-4 rounded bg-chart-1"></div>
                        <span>Évolution du solde</span>
                    </div>
                </div>
            </CardContent>
        </Card>
    );
}