'use client'

import { useState, useMemo } from 'react'
import {
    BarChart,
    Bar,
    XAxis,
    YAxis,
    CartesianGrid,
    Tooltip,
    Legend,
    ResponsiveContainer,
    LineChart,
    Line,
    Area,
    AreaChart,
} from 'recharts'
import { TrendingUp, TrendingDown, Minus, BarChart2, Activity, Percent } from 'lucide-react'

interface RawData {
    status_stunting: boolean
    tanggal_upload: string
    nama_posyandu: string
}

interface Props {
    data: RawData[]
    availableYears: number[]
}

const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Ags', 'Sep', 'Okt', 'Nov', 'Des']

const CustomTooltip = ({ active, payload, label }: any) => {
    if (active && payload && payload.length) {
        const stunting = payload.find((p: any) => p.dataKey === 'stunting')?.value ?? 0
        const normal = payload.find((p: any) => p.dataKey === 'normal')?.value ?? 0
        const total = stunting + normal
        const pct = total > 0 ? ((stunting / total) * 100).toFixed(1) : '0.0'

        return (
            <div className="bg-white border-2 border-black rounded-xl shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] px-4 py-3 text-sm">
                <p className="font-bold text-black mb-2">{label}</p>
                <div className="flex flex-col gap-1">
                    <div className="flex items-center justify-between gap-6">
                        <span className="flex items-center gap-1.5">
                            <span className="w-2.5 h-2.5 rounded-full bg-red-500 inline-block" />
                            Stunting
                        </span>
                        <span className="font-bold text-red-600">{stunting}</span>
                    </div>
                    <div className="flex items-center justify-between gap-6">
                        <span className="flex items-center gap-1.5">
                            <span className="w-2.5 h-2.5 rounded-full bg-emerald-500 inline-block" />
                            Normal
                        </span>
                        <span className="font-bold text-emerald-600">{normal}</span>
                    </div>
                    <div className="border-t border-gray-200 mt-1 pt-1 flex items-center justify-between">
                        <span className="text-gray-500">Prevalensi</span>
                        <span className="font-bold">{pct}%</span>
                    </div>
                </div>
            </div>
        )
    }
    return null
}

export function StuntingChart({ data, availableYears }: Props) {
    const [selectedYear, setSelectedYear] = useState<number>(availableYears[0] ?? 2026)
    const [chartType, setChartType] = useState<'bar' | 'area'>('bar')
    const [selectedPosyandu, setSelectedPosyandu] = useState<string>('all')

    // Unique posyandu list
    const posyanduList = useMemo(() => {
        return Array.from(new Set(data.map(d => d.nama_posyandu).filter(Boolean))).sort()
    }, [data])

    // Active data after posyandu filter
    const filteredData = useMemo(() => {
        if (selectedPosyandu === 'all') return data
        return data.filter(d => d.nama_posyandu === selectedPosyandu)
    }, [data, selectedPosyandu])

    // Process data for the selected year into 12 months
    const chartData = useMemo(() => {
        return MONTHS.map((month, idx) => {
            const monthNum = idx + 1
            const filtered = filteredData.filter(d => {
                if (!d.tanggal_upload) return false
                const date = new Date(d.tanggal_upload)
                return date.getFullYear() === selectedYear && date.getMonth() + 1 === monthNum
            })
            const stunting = filtered.filter(d => d.status_stunting === true).length
            const normal = filtered.filter(d => d.status_stunting === false).length
            const total = stunting + normal
            const prevalensi = total > 0 ? parseFloat(((stunting / total) * 100).toFixed(1)) : 0

            return { month, stunting, normal, total, prevalensi }
        })
    }, [filteredData, selectedYear])

    // Summary stats for selected year
    const totalStunting = chartData.reduce((s, d) => s + d.stunting, 0)
    const totalNormal = chartData.reduce((s, d) => s + d.normal, 0)
    const totalAll = totalStunting + totalNormal
    const prevalensiTotal = totalAll > 0 ? ((totalStunting / totalAll) * 100).toFixed(1) : '0.0'

    // Trend: compare current year vs previous year prevalensi
    const prevYearTotal = filteredData.filter(d => {
        if (!d.tanggal_upload) return false
        return new Date(d.tanggal_upload).getFullYear() === selectedYear - 1
    })
    const prevStunting = prevYearTotal.filter(d => d.status_stunting === true).length
    const prevAll = prevYearTotal.length
    const hasPrevData = prevAll > 0
    const prevPrevalensi = hasPrevData ? (prevStunting / prevAll) * 100 : null
    const currPrevalensiNum = totalAll > 0 ? (totalStunting / totalAll) * 100 : null
    const trend: 'up' | 'down' | 'stable' | null =
        hasPrevData && currPrevalensiNum !== null
            ? currPrevalensiNum > prevPrevalensi! ? 'up'
                : currPrevalensiNum < prevPrevalensi! ? 'down'
                    : 'stable'
            : null

    return (
        <div className="flex flex-col gap-6">
            {/* Dynamic Card Title */}
            <div className="flex items-center gap-4 mb-2 pb-6 border-b border-gray-100">
                <div className="w-14 h-14 rounded-full bg-blue-50 border-2 border-blue-200 flex items-center justify-center text-blue-600 flex-shrink-0">
                    <TrendingUp className="w-7 h-7" />
                </div>
                <div>
                    <h2 className="text-2xl font-bold">
                        {selectedPosyandu === 'all'
                            ? 'Data Tren Stunting Semua Posyandu'
                            : `Data Tren Stunting — ${selectedPosyandu}`}
                    </h2>
                    <p className="text-sm text-gray-500">
                        {selectedPosyandu === 'all'
                            ? 'Menampilkan data dari semua posyandu · Pilih posyandu untuk melihat per lokasi'
                            : `Filter aktif: ${selectedPosyandu} · Pilih "Semua Posyandu" untuk melihat keseluruhan`}
                    </p>
                </div>
            </div>

            {/* Controls Row */}
            <div className="flex flex-wrap items-center gap-4 justify-between">
                {/* Filters */}
                <div className="flex flex-wrap items-center gap-3">
                    {/* Year Filter */}
                    <div className="flex items-center gap-2">
                        <span className="text-xs font-bold uppercase tracking-widest text-gray-500">Periode:</span>
                        <select
                            value={selectedYear}
                            onChange={e => setSelectedYear(Number(e.target.value))}
                            className="border-2 border-black rounded-lg px-3 py-1.5 text-sm font-bold bg-white focus:outline-none shadow-[3px_3px_0px_0px_rgba(0,0,0,1)] cursor-pointer"
                        >
                            {availableYears.map(year => (
                                <option key={year} value={year}>{year}</option>
                            ))}
                        </select>
                    </div>

                    {/* Posyandu Filter */}
                    <div className="flex items-center gap-2">
                        <span className="text-xs font-bold uppercase tracking-widest text-gray-500">Posyandu:</span>
                        <select
                            value={selectedPosyandu}
                            onChange={e => setSelectedPosyandu(e.target.value)}
                            className="border-2 border-black rounded-lg px-3 py-1.5 text-sm font-bold bg-white focus:outline-none shadow-[3px_3px_0px_0px_rgba(0,0,0,1)] cursor-pointer max-w-[200px] truncate"
                        >
                            <option value="all">Semua Posyandu</option>
                            {posyanduList.map(name => (
                                <option key={name} value={name}>{name}</option>
                            ))}
                        </select>
                    </div>
                </div>

                {/* Chart Type Toggle */}
                <div className="flex gap-1 bg-gray-100 p-1 rounded-lg border border-gray-200">
                    <button
                        onClick={() => setChartType('bar')}
                        className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-bold transition-all ${chartType === 'bar' ? 'bg-black text-white' : 'text-gray-600 hover:text-black'}`}
                    >
                        <BarChart2 className="w-3.5 h-3.5" /> Bar
                    </button>
                    <button
                        onClick={() => setChartType('area')}
                        className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-bold transition-all ${chartType === 'area' ? 'bg-black text-white' : 'text-gray-600 hover:text-black'}`}
                    >
                        <Activity className="w-3.5 h-3.5" /> Area
                    </button>
                </div>
            </div>

            {/* Stats Row */}
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                {/* Total Data */}
                <div className="border-2 border-gray-200 rounded-xl p-4 bg-gray-50">
                    <p className="text-[10px] font-bold uppercase tracking-widest text-gray-400 mb-1">Total Data</p>
                    <p className="text-3xl font-black">{totalAll}</p>
                    <p className="text-xs text-gray-500 mt-1">pemeriksaan</p>
                </div>
                {/* Stunting */}
                <div className="border-2 border-red-200 rounded-xl p-4 bg-red-50">
                    <p className="text-[10px] font-bold uppercase tracking-widest text-red-400 mb-1">Stunting</p>
                    <p className="text-3xl font-black text-red-600">{totalStunting}</p>
                    <p className="text-xs text-red-400 mt-1">kasus</p>
                </div>
                {/* Normal */}
                <div className="border-2 border-emerald-200 rounded-xl p-4 bg-emerald-50">
                    <p className="text-[10px] font-bold uppercase tracking-widest text-emerald-400 mb-1">Normal</p>
                    <p className="text-3xl font-black text-emerald-600">{totalNormal}</p>
                    <p className="text-xs text-emerald-400 mt-1">anak</p>
                </div>
                {/* Prevalensi */}
                <div className="border-2 border-amber-200 rounded-xl p-4 bg-amber-50">
                    <p className="text-[10px] font-bold uppercase tracking-widest text-amber-500 mb-1">Prevalensi</p>
                    <p className="text-3xl font-black text-amber-600">{prevalensiTotal}%</p>
                    {trend !== null && (
                        <div className="flex items-center gap-1 mt-1">
                            {trend === 'up' && <><TrendingUp className="w-3 h-3 text-red-500" /><span className="text-xs text-red-500">Naik vs {selectedYear - 1}</span></>}
                            {trend === 'down' && <><TrendingDown className="w-3 h-3 text-emerald-500" /><span className="text-xs text-emerald-500">Turun vs {selectedYear - 1}</span></>}
                            {trend === 'stable' && <><Minus className="w-3 h-3 text-gray-400" /><span className="text-xs text-gray-400">Sama vs {selectedYear - 1}</span></>}
                        </div>
                    )}
                </div>
            </div>

            {/* Chart */}
            <div className="border-2 border-gray-100 rounded-xl p-4 bg-white">
                <p className="text-sm font-bold mb-1">Tren Stunting Semua Posyandu — {selectedYear}</p>
                <p className="text-xs text-gray-400 mb-4">Berdasarkan tanggal upload data</p>

                {totalAll === 0 ? (
                    <div className="flex flex-col items-center justify-center h-64 gap-3 text-gray-300">
                        <TrendingUp className="w-16 h-16 opacity-30" />
                        <p className="font-semibold text-gray-400">Tidak ada data untuk tahun {selectedYear}</p>
                    </div>
                ) : (
                    <ResponsiveContainer width="100%" height={320}>
                        {chartType === 'bar' ? (
                            <BarChart data={chartData} margin={{ top: 4, right: 8, left: -10, bottom: 0 }} barCategoryGap="30%">
                                <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
                                <XAxis dataKey="month" tick={{ fontSize: 11, fontWeight: 600 }} axisLine={false} tickLine={false} />
                                <YAxis tick={{ fontSize: 11 }} axisLine={false} tickLine={false} allowDecimals={false} />
                                <Tooltip content={<CustomTooltip />} />
                                <Legend
                                    wrapperStyle={{ fontSize: 11, fontWeight: 600, paddingTop: 12 }}
                                    formatter={(val) => val === 'stunting' ? 'Stunting' : 'Normal'}
                                />
                                <Bar dataKey="stunting" fill="#ef4444" radius={[4, 4, 0, 0]} />
                                <Bar dataKey="normal" fill="#10b981" radius={[4, 4, 0, 0]} />
                            </BarChart>
                        ) : (
                            <AreaChart data={chartData} margin={{ top: 4, right: 8, left: -10, bottom: 0 }}>
                                <defs>
                                    <linearGradient id="stuntingGrad" x1="0" y1="0" x2="0" y2="1">
                                        <stop offset="5%" stopColor="#ef4444" stopOpacity={0.25} />
                                        <stop offset="95%" stopColor="#ef4444" stopOpacity={0} />
                                    </linearGradient>
                                    <linearGradient id="normalGrad" x1="0" y1="0" x2="0" y2="1">
                                        <stop offset="5%" stopColor="#10b981" stopOpacity={0.25} />
                                        <stop offset="95%" stopColor="#10b981" stopOpacity={0} />
                                    </linearGradient>
                                </defs>
                                <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
                                <XAxis dataKey="month" tick={{ fontSize: 11, fontWeight: 600 }} axisLine={false} tickLine={false} />
                                <YAxis tick={{ fontSize: 11 }} axisLine={false} tickLine={false} allowDecimals={false} />
                                <Tooltip content={<CustomTooltip />} />
                                <Legend
                                    wrapperStyle={{ fontSize: 11, fontWeight: 600, paddingTop: 12 }}
                                    formatter={(val) => val === 'stunting' ? 'Stunting' : 'Normal'}
                                />
                                <Area type="monotone" dataKey="normal" stroke="#10b981" strokeWidth={2.5} fill="url(#normalGrad)" dot={{ r: 4, fill: '#10b981' }} />
                                <Area type="monotone" dataKey="stunting" stroke="#ef4444" strokeWidth={2.5} fill="url(#stuntingGrad)" dot={{ r: 4, fill: '#ef4444' }} />
                            </AreaChart>
                        )}
                    </ResponsiveContainer>
                )}
            </div>

            {/* Prevalensi (%) Line Chart */}
            <div className="border-2 border-amber-100 rounded-xl p-4 bg-amber-50/30">
                <div className="flex items-center gap-2 mb-1">
                    <Percent className="w-4 h-4 text-amber-600" />
                    <p className="text-sm font-bold text-amber-800">Prevalensi Stunting Per Bulan (%) — {selectedYear}</p>
                </div>
                <p className="text-xs text-amber-500 mb-4">Persentase kasus stunting dari total pemeriksaan per bulan</p>

                {totalAll === 0 ? (
                    <div className="flex items-center justify-center h-32 text-gray-300">
                        <p className="text-sm">Tidak ada data untuk ditampilkan</p>
                    </div>
                ) : (
                    <ResponsiveContainer width="100%" height={220}>
                        <LineChart data={chartData} margin={{ top: 8, right: 16, left: -10, bottom: 0 }}>
                            <defs>
                                <linearGradient id="prevalensiGrad" x1="0" y1="0" x2="0" y2="1">
                                    <stop offset="5%" stopColor="#f59e0b" stopOpacity={0.15} />
                                    <stop offset="95%" stopColor="#f59e0b" stopOpacity={0} />
                                </linearGradient>
                            </defs>
                            <CartesianGrid strokeDasharray="3 3" stroke="#fde68a" />
                            <XAxis dataKey="month" tick={{ fontSize: 11, fontWeight: 600 }} axisLine={false} tickLine={false} />
                            <YAxis
                                tick={{ fontSize: 11 }}
                                axisLine={false}
                                tickLine={false}
                                tickFormatter={(v) => `${v}%`}
                                domain={[0, 100]}
                            />
                            <Tooltip
                                content={({ active, payload, label }) => {
                                    if (active && payload && payload.length) {
                                        const val = payload[0]?.value as number
                                        return (
                                            <div className="bg-white border-2 border-amber-400 rounded-xl shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] px-4 py-3 text-sm">
                                                <p className="font-bold text-black mb-1">{label}</p>
                                                <div className="flex items-center gap-2">
                                                    <span className="w-2.5 h-2.5 rounded-full bg-amber-400 inline-block" />
                                                    <span>Prevalensi:</span>
                                                    <span className={`font-bold ${val >= 20 ? 'text-red-600' : 'text-emerald-600'}`}>{val}%</span>
                                                </div>
                                                <p className="text-[10px] text-gray-400 mt-1">
                                                    {val >= 20 ? '⚠️ Di atas ambang batas (20%)' : '✓ Di bawah ambang batas (20%)'}
                                                </p>
                                            </div>
                                        )
                                    }
                                    return null
                                }}
                            />
                            {/* Reference line 20% */}
                            <Line
                                type="monotone"
                                dataKey="prevalensi"
                                stroke="#f59e0b"
                                strokeWidth={3}
                                dot={({ cx, cy, payload }) => (
                                    <circle
                                        key={`dot-${payload.month}`}
                                        cx={cx} cy={cy} r={5}
                                        fill={payload.prevalensi >= 20 ? '#ef4444' : '#10b981'}
                                        stroke="white"
                                        strokeWidth={2}
                                    />
                                )}
                                activeDot={{ r: 7, stroke: '#f59e0b', strokeWidth: 2 }}
                            />
                        </LineChart>
                    </ResponsiveContainer>
                )}
                <p className="text-[10px] text-amber-500 mt-2 text-center">
                    ● Merah = prevalensi ≥ 20% (tinggi) &nbsp;|&nbsp; ● Hijau = prevalensi &lt; 20% (aman)
                </p>
            </div>

            <div className="border-2 border-gray-100 rounded-xl overflow-hidden">
                <div className="grid grid-cols-5 bg-black text-white text-[10px] font-bold uppercase tracking-widest px-5 py-3">
                    <span>Bulan</span>
                    <span className="text-center">Total</span>
                    <span className="text-center text-red-300">Stunting</span>
                    <span className="text-center text-emerald-300">Normal</span>
                    <span className="text-center">Prevalensi</span>
                </div>
                {chartData.map((row, idx) => (
                    <div
                        key={row.month}
                        className={`grid grid-cols-5 items-center px-5 py-3 text-sm border-b border-gray-100 ${idx % 2 === 0 ? 'bg-white' : 'bg-gray-50/60'}`}
                    >
                        <span className="font-semibold">{row.month} {selectedYear}</span>
                        <span className="text-center font-bold">{row.total}</span>
                        <span className="text-center font-bold text-red-600">{row.stunting}</span>
                        <span className="text-center font-bold text-emerald-600">{row.normal}</span>
                        <span className="text-center">
                            {row.total > 0 ? (
                                <span className={`inline-block px-2 py-0.5 rounded-full text-xs font-bold border ${row.prevalensi >= 20
                                    ? 'bg-red-50 border-red-200 text-red-700'
                                    : 'bg-emerald-50 border-emerald-200 text-emerald-700'
                                    }`}>
                                    {row.prevalensi}%
                                </span>
                            ) : (
                                <span className="text-gray-300 text-xs">—</span>
                            )}
                        </span>
                    </div>
                ))}
            </div>
        </div>
    )
}