'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[availableYears.length - 1] ?? 2026)
    const [chartType, setChartType] = useState<'bar' | 'area'>('bar')
    const [selectedPosyandu, setSelectedPosyandu] = useState<string>('all')

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

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

    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])

    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'

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

    return (
        <div className="flex flex-col gap-6">
            <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 Wilayah' : `Tren Stunting — ${selectedPosyandu}`}
                    </h2>
                    <p className="text-sm text-gray-500">
                        Pantau statistik prevalensi stunting untuk memahami kondisi kesehatan anak di daerah Anda.
                    </p>
                </div>
            </div>

            <div className="flex flex-wrap items-center gap-4 justify-between">
                <div className="flex flex-wrap items-center gap-3">
                    <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>

                    <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>

                <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>

            <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
                <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 Pemeriksaan</p>
                    <p className="text-3xl font-black">{totalAll}</p>
                    <p className="text-xs text-gray-500 mt-1">data balita</p>
                </div>
                <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>
                <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>
                <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">Stabil</span></>}
                        </div>
                    )}
                </div>
            </div>

            <div className="border-2 border-gray-100 rounded-xl p-6 bg-white overflow-hidden">
                <p className="text-sm font-black mb-1">Statistik Pertumbuhan Anak — {selectedYear}</p>
                <p className="text-xs text-gray-400 mb-6 uppercase tracking-wider">Perbandingan Balita Stunting & Normal</p>

                {totalAll === 0 ? (
                    <div className="flex flex-col items-center justify-center h-64 gap-3 text-gray-200">
                        <TrendingUp className="w-16 h-16 opacity-20" />
                        <p className="font-bold">Data belum tersedia untuk tahun {selectedYear}</p>
                    </div>
                ) : (
                    <div className="overflow-x-auto pb-2 -mx-2 px-2">
                        <div className="min-w-[700px] md:min-w-full">
                            <ResponsiveContainer width="100%" height={350}>
                                {chartType === 'bar' ? (
                                    <BarChart data={chartData} margin={{ top: 20, right: 10, left: -20, bottom: 0 }}>
                                        <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f1f5f9" />
                                        <XAxis dataKey="month" axisLine={false} tickLine={false} tick={{ fontSize: 11, fontWeight: 700 }} />
                                        <YAxis axisLine={false} tickLine={false} tick={{ fontSize: 11 }} />
                                        <Tooltip content={<CustomTooltip />} cursor={{ fill: '#f8fafc' }} />
                                        <Legend wrapperStyle={{ paddingTop: 20, fontSize: 12, fontWeight: 800 }} iconType="circle" />
                                        <Bar dataKey="stunting" name="Stunting" fill="#ef4444" radius={[4, 4, 0, 0]} />
                                        <Bar dataKey="normal" name="Normal" fill="#10b981" radius={[4, 4, 0, 0]} />
                                    </BarChart>
                                ) : (
                                    <AreaChart data={chartData} margin={{ top: 20, right: 10, left: -20, bottom: 0 }}>
                                        <defs>
                                            <linearGradient id="colorStunting" x1="0" y1="0" x2="0" y2="1">
                                                <stop offset="5%" stopColor="#ef4444" stopOpacity={0.1} />
                                                <stop offset="95%" stopColor="#ef4444" stopOpacity={0} />
                                            </linearGradient>
                                            <linearGradient id="colorNormal" x1="0" y1="0" x2="0" y2="1">
                                                <stop offset="5%" stopColor="#10b981" stopOpacity={0.1} />
                                                <stop offset="95%" stopColor="#10b981" stopOpacity={0} />
                                            </linearGradient>
                                        </defs>
                                        <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f1f5f9" />
                                        <XAxis dataKey="month" axisLine={false} tickLine={false} tick={{ fontSize: 11, fontWeight: 700 }} />
                                        <YAxis axisLine={false} tickLine={false} tick={{ fontSize: 11 }} />
                                        <Tooltip content={<CustomTooltip />} />
                                        <Legend wrapperStyle={{ paddingTop: 20, fontSize: 12, fontWeight: 800 }} iconType="circle" />
                                        <Area type="monotone" dataKey="stunting" name="Stunting" stroke="#ef4444" strokeWidth={3} fillOpacity={1} fill="url(#colorStunting)" dot={{ r: 4, fill: '#ef4444', strokeWidth: 2, stroke: 'white' }} />
                                        <Area type="monotone" dataKey="normal" name="Normal" stroke="#10b981" strokeWidth={3} fillOpacity={1} fill="url(#colorNormal)" dot={{ r: 4, fill: '#10b981', strokeWidth: 2, stroke: 'white' }} />
                                    </AreaChart>
                                )}
                            </ResponsiveContainer>
                        </div>
                    </div>
                )}
            </div>

            <div className="border-2 border-amber-100 rounded-xl p-6 bg-amber-50/20">
                <div className="flex items-center gap-2 mb-1">
                    <Percent className="w-5 h-5 text-amber-600" />
                    <p className="text-sm font-black text-amber-900 uppercase">Prevalensi Bulanan (%)</p>
                </div>
                <p className="text-[10px] text-amber-600 mb-6 font-bold uppercase tracking-widest italic">Ambang Batas Keamanan WHO: 20%</p>

                {totalAll === 0 ? (
                    <div className="h-32 flex items-center justify-center text-amber-200">
                        <p className="text-sm font-bold opacity-30">Belum ada data prevalensi</p>
                    </div>
                ) : (
                    <div className="overflow-x-auto pb-2 -mx-2 px-2">
                        <div className="min-w-[700px] md:min-w-full">
                            <ResponsiveContainer width="100%" height={260}>
                                <LineChart data={chartData} margin={{ top: 10, right: 20, left: -20, bottom: 0 }}>
                                    <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#fef3c7" />
                                    <XAxis dataKey="month" axisLine={false} tickLine={false} tick={{ fontSize: 11, fontWeight: 700 }} />
                                    <YAxis axisLine={false} tickLine={false} tick={{ fontSize: 11 }} 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-500 rounded-xl shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] px-4 py-3 text-sm">
                                                        <p className="font-black text-black mb-1">{label} {selectedYear}</p>
                                                        <div className="flex items-center gap-2">
                                                            <span className={`w-3 h-3 rounded-full ${val >= 20 ? 'bg-red-500' : 'bg-emerald-500'}`} />
                                                            <span className="font-black text-lg">{val}%</span>
                                                        </div>
                                                        <p className="text-[10px] font-bold mt-1 uppercase tracking-tight">
                                                            {val >= 20 ? '🛑 Tinggi' : '✅ Aman'}
                                                        </p>
                                                    </div>
                                                )
                                            }
                                            return null
                                        }}
                                    />
                                    <Line
                                        type="monotone"
                                        dataKey="prevalensi"
                                        stroke="#f59e0b"
                                        strokeWidth={4}
                                        dot={({ cx, cy, payload }) => (
                                            <circle
                                                key={`dot-${payload.month}`}
                                                cx={cx} cy={cy} r={6}
                                                fill={payload.prevalensi >= 20 ? '#ef4444' : '#10b981'}
                                                stroke="white"
                                                strokeWidth={2}
                                            />
                                        )}
                                        activeDot={{ r: 8, stroke: '#f59e0b', strokeWidth: 2 }}
                                    />
                                </LineChart>
                            </ResponsiveContainer>
                        </div>
                    </div>
                )}
            </div>
        </div>
    )
}