import { useEffect, useState } from 'react';
import { Card, DatePicker, Space, Spin } from 'antd';
import {
    ResponsiveContainer,
    ComposedChart,
    Bar,
    Line,
    XAxis,
    YAxis,
    CartesianGrid,
    Tooltip as ChartTooltip,
    Legend,
} from 'recharts';
import dayjs from 'dayjs';
import jwtAxios from '../../api/axiosInstance';
import { ENDPOINTS } from '../../api/endpoints';

const CustomTooltip = ({ active, payload, label }: any) => {
    if (active && payload && payload.length) {
        return (
            <div className="rounded-xl bg-slate-800 px-4 py-3 shadow-2xl shadow-black/25">
                <p className="mb-2 text-xs font-semibold text-slate-400">{label}</p>
                {payload.map((p: any, idx: number) => (
                    <p
                        key={`${p.dataKey}-${idx}`}
                        className="my-1 text-sm font-bold"
                        style={{ color: p.color }}
                    >
                        {p.name}: ₹{Number(p.value).toLocaleString()}
                    </p>
                ))}
            </div>
        );
    }
    return null;
};

export const ExpenseChart = () => {
    const [chartYear, setChartYear] = useState<number>(dayjs().year());
    const [chartData, setChartData] = useState<{ month: string; amount: number }[]>([]);
    const [loading, setLoading] = useState<boolean>(false);

    const fetchChartData = async (year: number) => {
        setLoading(true);
        try {
            // 1. Try to fetch from the specific expense tracking endpoint
            try {
                const res = await jwtAxios.get(`${ENDPOINTS.EXPENSES_TRACK}?year=${year}`);
                const resultData = res.data?.data ?? res.data?.result ?? res.data;
                if (Array.isArray(resultData) && resultData.length > 0) {
                    const formatted = resultData.map((item: any) => ({
                        month: item.month,
                        amount: Number(item.amount || item.totalAmount || item.total || 0)
                    }));
                    setChartData(formatted);
                    setLoading(false);
                    return;
                }
            } catch (trackErr) {
                console.warn('EXPENSES_TRACK endpoint failed or not found, falling back to manual aggregation', trackErr);
            }

            // 2. Fallback to manual aggregation from general EXPENSES list
            const startDate = `${year}-01-01`;
            const endDate = `${year}-12-31`;
            const res = await jwtAxios.get(`${ENDPOINTS.EXPENSES}?page=1&limit=10000&startDate=${startDate}&endDate=${endDate}`);
            const records = res.data?.result?.data || [];

            const months = [
                'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
            ];
            const monthlySums = months.map(m => ({ month: m, amount: 0 }));

            records.forEach((item: any) => {
                if (item.expenseDate) {
                    const date = dayjs(item.expenseDate);
                    if (date.year() === year) {
                        const monthIdx = date.month();
                        if (monthIdx >= 0 && monthIdx < 12) {
                            monthlySums[monthIdx].amount += Number(item.amount) || 0;
                        }
                    }
                }
            });

            setChartData(monthlySums);
        } catch (err: any) {
            console.error('Failed to fetch expense chart data', err);
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        fetchChartData(chartYear);
    }, [chartYear]);

    const totalExpense = chartData.reduce((sum, d) => sum + d.amount, 0);

    return (
        <Card
            variant="borderless"
            className="h-full rounded-[20px] shadow-[0_4px_24px_rgba(0,0,0,0.07)]"
            styles={{ body: { padding: "24px 24px 16px" } }}
        >
            {/* Header */}
            <div className="mb-6 flex items-start justify-between">
                <div>
                    <h3 className="m-0 bg-linear-to-r from-indigo-600 to-violet-500 bg-clip-text text-lg font-extrabold tracking-tight text-transparent">
                        Monthly Expenses Breakdown
                    </h3>
                    <p className="mb-0 mt-1 text-[13px] text-slate-400">
                        Month-wise operating costs for the year {chartYear}
                    </p>
                </div>

                <div className="flex items-center gap-4">
                    {!loading && (
                        <div className="rounded-[10px] bg-linear-to-br from-amber-50 to-amber-100 px-3.5 py-1.5 text-center">
                            <div className="text-[11px] font-semibold uppercase tracking-wider text-amber-600">
                                Total
                            </div>
                            <div className="text-[15px] font-extrabold text-amber-900">
                                ₹{totalExpense.toLocaleString()}
                            </div>
                        </div>
                    )}
                    <Space>
                        <span className="text-[13px] font-semibold text-slate-500">Year:</span>
                        <DatePicker
                            picker="year"
                            value={dayjs().year(chartYear)}
                            onChange={(date) => {
                                if (date) {
                                    setChartYear(date.year());
                                }
                            }}
                            disabledDate={(current) => current && current > dayjs().endOf('year')}
                            allowClear={false}
                            style={{ width: 110 }}
                        />
                    </Space>
                </div>
            </div>

            {/* Chart / Loader */}
            <div className="relative h-75">
                {loading ? (
                    <div className="flex h-full items-center justify-center">
                        <Spin size="large" />
                    </div>
                ) : chartData.length === 0 ? (
                    <div className="flex h-full items-center justify-center text-sm text-slate-400">
                        No expense data for {chartYear}
                    </div>
                ) : (
                    <ResponsiveContainer width="100%" height="100%">
                        <ComposedChart data={chartData} margin={{ top: 20, right: 10, bottom: 10, left: 10 }}>
                            <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f1f5f9" />
                            <XAxis dataKey="month" tickLine={false} axisLine={false} tick={{ fill: '#64748b', fontSize: 12, fontWeight: 500 }} />
                            <YAxis
                                tickLine={false}
                                axisLine={false}
                                tick={{ fill: '#64748b', fontSize: 12, fontWeight: 500 }}
                                tickFormatter={(val) => `₹${val}`}
                            />
                            <ChartTooltip content={<CustomTooltip />} />
                            <Legend verticalAlign="bottom" height={36} iconType="circle" />
                            <Bar dataKey="amount" name="Expense" fill="#6366f1" radius={[6, 6, 0, 0]} maxBarSize={40} />
                            <Line type="monotone" dataKey="amount" name="Trend" stroke="#f59e0b" strokeWidth={3} dot={{ r: 4, strokeWidth: 2, fill: "#fff" }} activeDot={{ r: 6 }} />
                        </ComposedChart>
                    </ResponsiveContainer>
                )}
            </div>
        </Card>
    );
};