'use client'

import { useEffect, useState } from 'react'
import { LineChart, Line, XAxis, YAxis, Tooltip, Legend, ResponsiveContainer, CartesianGrid } from 'recharts'
import { getRegions, getTimeSeries, type TimeSeriesData } from '../../services/temporal.services'

const TAX_TYPES = ['tfpnb', 'tfpb', 'th', 'cfe'] as const
const YEARS = [2019, 2020, 2021, 2022] as const
const COLORS = [
    '#8884d8',
    '#82ca9d',
    '#ffc658',
    '#ff7300',
    '#00C49F',
    '#0088FE',
    '#FF8042',
    '#A4DE6C',
    '#D0ED57',
    '#FFBB28',
    '#FF4444',
    '#44AAFF',
    '#AA44FF',
    '#E91E63',
    '#4CAF50',
    '#9C27B0',
    '#00BCD4',
    '#FF5722',
    '#607D8B',
    '#795548',
]

export default function Temporal() {
    const [taxType, setTaxType] = useState<string>('tfpb')
    const [startYear, setStartYear] = useState<number>(2019)
    const [endYear, setEndYear] = useState<number>(2022)
    const [data, setData] = useState<TimeSeriesData | null>(null)
    const [loading, setLoading] = useState(false)
    const [regions, setRegions] = useState<string[]>([])
    const [selectedRegions, setSelectedRegions] = useState<string[]>([])

    useEffect(() => {
        getRegions().then(r => {
            setRegions(r)
            setSelectedRegions(r)
        })
    }, [])

    const toggleRegion = (region: string) => {
        setSelectedRegions(prev => (prev.includes(region) ? prev.filter(r => r !== region) : [...prev, region]))
    }

    const handleSubmit = async () => {
        setLoading(true)
        const result = await getTimeSeries([], taxType, startYear, endYear)
        setData(result)
        setLoading(false)
    }

    const visibleRegions = data ? Object.keys(data).filter(r => selectedRegions.includes(r)) : []

    const chartData = data
        ? YEARS.filter(y => y >= startYear && y <= endYear).map(year => {
              const point: Record<string, number | string> = { year }
              for (const region of visibleRegions) {
                  const entry = data[region]?.find(e => e.year === year)
                  if (entry) point[region] = parseFloat(entry.avg_rate)
              }
              return point
          })
        : []

    return (
        <div className="p-6 text-white flex flex-col gap-6">
            <h2 className="text-lg font-semibold">Taux d&apos;imposition moyen par region</h2>

            <div className="flex flex-wrap gap-4 items-end">
                <div className="flex flex-col gap-1">
                    <label className="text-xs text-[#b0afaf] uppercase">Taxe</label>
                    <select
                        value={taxType}
                        onChange={e => setTaxType(e.target.value)}
                        className="bg-[#212529] border border-[#3a3f44] rounded px-3 py-1.5 text-white text-sm"
                    >
                        {TAX_TYPES.map(t => (
                            <option key={t} value={t}>
                                {t.toUpperCase()}
                            </option>
                        ))}
                    </select>
                </div>

                <div className="flex flex-col gap-1">
                    <label className="text-xs text-[#b0afaf] uppercase">De</label>
                    <select
                        value={startYear}
                        onChange={e => setStartYear(Number(e.target.value))}
                        className="bg-[#212529] border border-[#3a3f44] rounded px-3 py-1.5 text-white text-sm"
                    >
                        {YEARS.map(y => (
                            <option key={y} value={y}>
                                {y}
                            </option>
                        ))}
                    </select>
                </div>

                <div className="flex flex-col gap-1">
                    <label className="text-xs text-[#b0afaf] uppercase">A</label>
                    <select
                        value={endYear}
                        onChange={e => setEndYear(Number(e.target.value))}
                        className="bg-[#212529] border border-[#3a3f44] rounded px-3 py-1.5 text-white text-sm"
                    >
                        {YEARS.map(y => (
                            <option key={y} value={y}>
                                {y}
                            </option>
                        ))}
                    </select>
                </div>

                <button
                    onClick={handleSubmit}
                    disabled={loading}
                    className="bg-[#8884d8] hover:bg-[#7773c7] disabled:opacity-50 text-white text-sm px-4 py-1.5 rounded transition-colors"
                >
                    {loading ? 'Chargement...' : 'Afficher'}
                </button>
            </div>

            {regions.length > 0 && (
                <div className="flex flex-col gap-2">
                    <label className="text-xs text-[#b0afaf] uppercase">Régions {selectedRegions.length > 0 && `(${selectedRegions.length})`}</label>
                    <div className="flex flex-wrap gap-2">
                        <button
                            onClick={() => setSelectedRegions(regions)}
                            className="text-xs px-3 py-1 rounded-full border border-[#3a3f44] text-[#b0afaf] hover:text-white transition-colors"
                        >
                            Tous
                        </button>
                        <button
                            onClick={() => setSelectedRegions([])}
                            className="text-xs px-3 py-1 rounded-full border border-[#3a3f44] text-[#b0afaf] hover:text-white transition-colors"
                        >
                            Aucun
                        </button>
                        {regions.map(region => (
                            <button
                                key={region}
                                onClick={() => toggleRegion(region)}
                                className={`text-xs px-3 py-1 rounded-full border transition-colors ${
                                    selectedRegions.includes(region)
                                        ? 'bg-[#8884d8] border-[#8884d8] text-white'
                                        : 'border-[#3a3f44] text-[#b0afaf] hover:text-white'
                                }`}
                            >
                                {region}
                            </button>
                        ))}
                    </div>
                </div>
            )}

            {chartData.length > 0 && (
                <ResponsiveContainer width="100%" height={400}>
                    <LineChart data={chartData}>
                        <CartesianGrid strokeDasharray="3 3" stroke="#3a3f44" />
                        <XAxis dataKey="year" stroke="#b0afaf" />
                        <YAxis stroke="#b0afaf" tickFormatter={(v: number) => `${v}%`} />
                        <Tooltip
                            contentStyle={{
                                backgroundColor: '#212529',
                                border: '1px solid #3a3f44',
                                borderRadius: 8,
                            }}
                            formatter={(value, name) => [`${value}%`, name]}
                        />
                        <Legend
                            wrapperStyle={{
                                paddingTop: '20px',
                            }}
                        />
                        {visibleRegions.map(region => (
                            <Line
                                key={region}
                                type="monotone"
                                dataKey={region}
                                stroke={COLORS[regions.indexOf(region) % COLORS.length]}
                                strokeWidth={2}
                                dot={{ r: 4 }}
                                activeDot={{ r: 6 }}
                            />
                        ))}
                    </LineChart>
                </ResponsiveContainer>
            )}
        </div>
    )
}