'use client'

import { useState, useMemo } from 'react'
import { Activity, ChevronDown, Edit, Trash2, X, Loader2 } from 'lucide-react'
import { CetakPDFButton } from './CetakPDFButton'
import { deleteHasilStunting, updateHasilStunting } from '@/app/actions'
import { showSwal } from '@/lib/swal'

interface HasilStunting {
    id: number
    tinggi_badan: number | null
    berat_badan: number | null
    z_score: number | null
    status_stunting: boolean | null
    pesan_ai: string | null
    tanggal_upload: string | null
    nama_posyandu: string | null
}

interface Pengguna {
    nama_orang_tua: string
    alamat: string | null
    nama_anak: string
    jenis_kelamin: string | null
    tanggal_lahir: string | null
}

interface Props {
    data: HasilStunting[]
    pengguna: Pengguna
    posyanduList: { nama_posyandu: string }[]
}

const START_YEAR = 2026

export function HasilStuntingTable({ data, pengguna, posyanduList }: Props) {
    const [editRecord, setEditRecord] = useState<HasilStunting | null>(null)

    const handleDelete = async (id: number) => {
        const confirmed = await showSwal.confirm(
            'Hapus Data Pengukuran?',
            'Data pengukuran ini akan dihapus permanen dari riwayat balita!'
        )

        if (confirmed.isConfirmed) {
            try {
                const res = await deleteHasilStunting(id)
                if (res.success) {
                    await showSwal.success('Berhasil!', res.message)
                } else {
                    showSwal.error('Gagal!', res.message)
                }
            } catch (err: any) {
                showSwal.error('Gagal!', err.message || 'Terjadi kesalahan.')
            }
        }
    }

    const availableYears = useMemo(() => {
        const currentYear = new Date().getFullYear()
        const dataYears = Array.from(
            new Set(data.map(d => d.tanggal_upload ? new Date(d.tanggal_upload).getFullYear() : null).filter(Boolean))
        ) as number[]
        const maxYear = Math.max(currentYear, ...dataYears, START_YEAR)
        return Array.from(
            new Set([
                ...Array.from({ length: maxYear - START_YEAR + 1 }, (_, i) => START_YEAR + i),
                ...dataYears,
            ])
        ).filter(y => y >= START_YEAR).sort((a, b) => a - b)
    }, [data])

    const [selectedYear, setSelectedYear] = useState<number>(availableYears[0] ?? START_YEAR)

    const filtered = useMemo(() => {
        return data.filter(d => {
            if (!d.tanggal_upload) return false
            return new Date(d.tanggal_upload).getFullYear() === selectedYear
        })
    }, [data, selectedYear])

    const formatDate = (d: string | null) => {
        if (!d) return '-'
        return new Date(d).toLocaleDateString('id-ID', {
            day: 'numeric', month: 'short', year: 'numeric'
        })
    }

    return (
        <div className="flex flex-col gap-4">
            {/* Section Header + Filter */}
            <div className="flex items-center justify-between flex-wrap gap-3">
                <div className="flex items-center gap-2">
                    <Activity className="w-4 h-4 text-gray-500" />
                    <p className="text-xs font-bold uppercase tracking-widest text-gray-500">Riwayat Hasil Pengukuran</p>
                </div>
                <div className="flex items-center gap-2">
                    <span className="text-xs font-bold uppercase tracking-widest text-gray-400">Periode:</span>
                    <div className="relative">
                        <select
                            value={selectedYear}
                            onChange={e => setSelectedYear(Number(e.target.value))}
                            className="appearance-none border-2 border-black rounded-lg pl-3 pr-8 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>
                        <ChevronDown className="absolute right-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 pointer-events-none text-gray-500" />
                    </div>
                    <span className="text-xs text-gray-400 font-semibold">{filtered.length} data</span>
                </div>
            </div>

            {/* Table */}
            <div className="rounded-xl border-2 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] overflow-hidden">
                <div className="overflow-x-auto">
                    <div className="min-w-[1050px]">
                        {/* Header */}
                        <div className="grid grid-cols-[36px_88px_88px_88px_100px_1fr_108px_110px_140px] bg-black text-white px-4 py-3 text-[10px] font-bold uppercase tracking-widest">
                            <span className="text-center text-gray-500">#</span>
                            <span className="text-center">Panjang</span>
                            <span className="text-center">Berat</span>
                            <span className="text-center">Z-Score</span>
                            <span className="text-center">Status</span>
                            <span>Pesan AI</span>
                            <span className="text-center">Posyandu</span>
                            <span className="text-center">Tgl Upload</span>
                            <span className="text-center">Aksi</span>
                        </div>

                        {filtered.length === 0 ? (
                            <div className="flex flex-col items-center justify-center py-12 gap-2 text-gray-300">
                                <Activity className="w-10 h-10 opacity-30" />
                                <p className="text-sm text-gray-400 font-semibold">Tidak ada data untuk tahun {selectedYear}</p>
                            </div>
                        ) : (
                            filtered.map((row, idx) => {
                                const isStunting = row.status_stunting === true

                                return (
                                    <div
                                        key={row.id}
                                        className={`grid grid-cols-[36px_88px_88px_88px_100px_1fr_108px_110px_140px] items-center px-4 py-3 border-b border-gray-100 text-sm transition-colors ${idx % 2 === 0 ? 'bg-white' : 'bg-gray-50/40'} hover:bg-orange-50/30`}
                                    >
                                        {/* Index */}
                                        <div className="flex justify-center">
                                            <span className="text-xs text-gray-400 font-bold">{idx + 1}</span>
                                        </div>

                                        {/* Panjang Badan */}
                                        <div className="text-center">
                                            <span className="font-bold">{row.tinggi_badan ?? '-'}</span>
                                            {row.tinggi_badan && <span className="text-xs text-gray-400 ml-0.5">cm</span>}
                                        </div>

                                        {/* Berat Badan */}
                                        <div className="text-center">
                                            <span className="font-bold">{row.berat_badan ?? '-'}</span>
                                            {row.berat_badan && <span className="text-xs text-gray-400 ml-0.5">kg</span>}
                                        </div>

                                        {/* Z-Score */}
                                        <div className="text-center">
                                            <span className="font-bold">{row.z_score ?? '-'}</span>
                                            {row.z_score !== null && <span className="text-xs text-gray-400 ml-0.5">SD</span>}
                                        </div>

                                        {/* Status Stunting */}
                                        <div className="flex justify-center">
                                            {row.status_stunting === null ? (
                                                <span className="text-xs text-gray-300">—</span>
                                            ) : (
                                                <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold border ${isStunting
                                                        ? 'bg-red-50 border-red-200 text-red-700'
                                                        : 'bg-emerald-50 border-emerald-200 text-emerald-700'
                                                    }`}>
                                                    {isStunting ? '⚠ Stunting' : '✓ Normal'}
                                                </span>
                                            )}
                                        </div>

                                        {/* Pesan AI — truncated */}
                                        <div className="pr-2">
                                            {row.pesan_ai ? (
                                                <p className="text-xs text-gray-600 leading-relaxed">
                                                    {row.pesan_ai.length > 80
                                                        ? row.pesan_ai.slice(0, 80) + '..........'
                                                        : row.pesan_ai}
                                                </p>
                                            ) : (
                                                <span className="text-xs text-gray-300 italic">Tidak ada pesan</span>
                                            )}
                                        </div>

                                        {/* Nama Posyandu */}
                                        <div className="text-center">
                                            <span className="text-xs text-gray-600">{row.nama_posyandu ?? '-'}</span>
                                        </div>

                                        {/* Tanggal Upload */}
                                        <div className="text-center">
                                            <span className="text-xs text-gray-500">{formatDate(row.tanggal_upload)}</span>
                                        </div>

                                        {/* Aksi: Cetak, Edit, Hapus */}
                                        <div className="flex justify-center items-center gap-1.5">
                                            <CetakPDFButton row={row} allData={data} pengguna={pengguna} />
                                            <button
                                                onClick={() => setEditRecord(row)}
                                                className="p-1.5 bg-amber-500 hover:bg-amber-600 text-white rounded-lg transition-all shadow-[1.5px_1.5px_0px_0px_rgba(0,0,0,0.3)] hover:shadow-none hover:translate-x-[0.5px] hover:translate-y-[0.5px]"
                                                title="Edit Data"
                                            >
                                                <Edit className="w-3.5 h-3.5" />
                                            </button>
                                            <button
                                                onClick={() => handleDelete(row.id)}
                                                className="p-1.5 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-all shadow-[1.5px_1.5px_0px_0px_rgba(0,0,0,0.3)] hover:shadow-none hover:translate-x-[0.5px] hover:translate-y-[0.5px]"
                                                title="Hapus Data"
                                            >
                                                <Trash2 className="w-3.5 h-3.5" />
                                            </button>
                                        </div>
                                    </div>
                                )
                            })
                        )}
                    </div>
                </div>
            </div>

            {/* Edit Modal */}
            {editRecord && (
                <EditHasilStuntingModal
                    isOpen={!!editRecord}
                    onClose={() => setEditRecord(null)}
                    record={editRecord}
                    posyanduList={posyanduList}
                />
            )}
        </div>
    )
}

interface EditModalProps {
    isOpen: boolean
    onClose: () => void
    record: HasilStunting
    posyanduList: { nama_posyandu: string }[]
}

function EditHasilStuntingModal({ isOpen, onClose, record, posyanduList }: EditModalProps) {
    const [tinggi, setTinggi] = useState(record.tinggi_badan?.toString() || '')
    const [berat, setBerat] = useState(record.berat_badan?.toString() || '')
    const [zScore, setZScore] = useState(record.z_score?.toString() || '')
    const [statusStunting, setStatusStunting] = useState(record.status_stunting === true ? 'true' : 'false')
    const [pesanAi, setPesanAi] = useState(record.pesan_ai || '')
    const [tanggalUpload, setTanggalUpload] = useState(record.tanggal_upload ? record.tanggal_upload.split('T')[0] : '')
    const [namaPosyandu, setNamaPosyandu] = useState(record.nama_posyandu || '')
    const [loading, setLoading] = useState(false)

    if (!isOpen) return null

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault()
        setLoading(true)

        const formData = new FormData()
        formData.append('id', record.id.toString())
        formData.append('tinggi_badan', tinggi)
        formData.append('berat_badan', berat)
        formData.append('z_score', zScore)
        formData.append('status_stunting', statusStunting)
        formData.append('pesan_ai', pesanAi)
        formData.append('tanggal_upload', tanggalUpload)
        formData.append('nama_posyandu', namaPosyandu)

        try {
            const res = await updateHasilStunting(null, formData)
            if (res.success) {
                await showSwal.success('Berhasil!', res.message)
                onClose()
            } else {
                showSwal.error('Gagal!', res.message)
            }
        } catch (err: any) {
            showSwal.error('Gagal!', err.message || 'Terjadi kesalahan.')
        } finally {
            setLoading(false)
        }
    }

    return (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm">
            <div className="bg-white rounded-2xl border-2 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] w-full max-w-lg overflow-hidden animate-in fade-in zoom-in duration-200">
                {/* Header */}
                <div className="flex items-center justify-between px-6 py-5 border-b-2 border-black bg-black text-white">
                    <div className="flex items-center gap-2">
                        <Activity className="w-5 h-5" />
                        <h3 className="font-black text-lg">Edit Data Pengukuran</h3>
                    </div>
                    <button onClick={onClose} className="p-1.5 rounded-full hover:bg-white/10 transition-colors">
                        <X className="w-4 h-4" />
                    </button>
                </div>

                {/* Form */}
                <form onSubmit={handleSubmit} className="p-6 flex flex-col gap-4 max-h-[80vh] overflow-y-auto">
                    <div className="grid grid-cols-2 gap-4">
                        <div>
                            <label className="block text-xs font-bold uppercase tracking-widest text-gray-500 mb-1">Panjang/Tinggi Badan (cm)</label>
                            <input
                                type="number"
                                step="0.1"
                                value={tinggi}
                                onChange={e => setTinggi(e.target.value)}
                                className="w-full border-2 border-gray-200 focus:border-black rounded-lg p-2.5 text-sm font-semibold focus:outline-none transition-colors"
                                required
                            />
                        </div>
                        <div>
                            <label className="block text-xs font-bold uppercase tracking-widest text-gray-500 mb-1">Berat Badan (kg)</label>
                            <input
                                type="number"
                                step="0.1"
                                value={berat}
                                onChange={e => setBerat(e.target.value)}
                                className="w-full border-2 border-gray-200 focus:border-black rounded-lg p-2.5 text-sm font-semibold focus:outline-none transition-colors"
                                required
                            />
                        </div>
                    </div>

                    <div className="grid grid-cols-2 gap-4">
                        <div>
                            <label className="block text-xs font-bold uppercase tracking-widest text-gray-500 mb-1">Z-Score (SD)</label>
                            <input
                                type="number"
                                step="0.01"
                                value={zScore}
                                onChange={e => setZScore(e.target.value)}
                                className="w-full border-2 border-gray-200 focus:border-black rounded-lg p-2.5 text-sm font-semibold focus:outline-none transition-colors"
                                required
                            />
                        </div>
                        <div>
                            <label className="block text-xs font-bold uppercase tracking-widest text-gray-500 mb-1">Status Stunting</label>
                            <select
                                value={statusStunting}
                                onChange={e => setStatusStunting(e.target.value)}
                                className="w-full border-2 border-gray-200 focus:border-black rounded-lg p-2.5 text-sm font-semibold focus:outline-none bg-white transition-colors"
                                required
                            >
                                <option value="false">Normal</option>
                                <option value="true">Stunting</option>
                            </select>
                        </div>
                    </div>

                    <div className="grid grid-cols-2 gap-4">
                        <div>
                            <label className="block text-xs font-bold uppercase tracking-widest text-gray-500 mb-1">Posyandu</label>
                            <select
                                value={namaPosyandu}
                                onChange={e => setNamaPosyandu(e.target.value)}
                                className="w-full border-2 border-gray-200 focus:border-black rounded-lg p-2.5 text-sm font-semibold focus:outline-none bg-white transition-colors"
                                required
                            >
                                <option value="">Pilih Posyandu</option>
                                {posyanduList.map((p, idx) => (
                                    <option key={idx} value={p.nama_posyandu}>
                                        {p.nama_posyandu}
                                    </option>
                                ))}
                            </select>
                        </div>
                        <div>
                            <label className="block text-xs font-bold uppercase tracking-widest text-gray-500 mb-1">Tanggal Pengukuran</label>
                            <input
                                type="date"
                                value={tanggalUpload}
                                onChange={e => setTanggalUpload(e.target.value)}
                                className="w-full border-2 border-gray-200 focus:border-black rounded-lg p-2.5 text-sm font-semibold focus:outline-none transition-colors"
                                required
                            />
                        </div>
                    </div>

                    <div>
                        <label className="block text-xs font-bold uppercase tracking-widest text-gray-500 mb-1">Rekomendasi / Pesan AI</label>
                        <textarea
                            value={pesanAi}
                            onChange={e => setPesanAi(e.target.value)}
                            className="w-full border-2 border-gray-200 focus:border-black rounded-lg p-2.5 text-sm font-semibold focus:outline-none resize-none transition-colors"
                            rows={4}
                            placeholder="Tulis pesan atau rekomendasi..."
                        />
                    </div>

                    {/* Actions */}
                    <div className="flex gap-3 pt-2">
                        <button
                            type="button"
                            onClick={onClose}
                            className="flex-1 py-3 border-2 border-black font-bold text-sm rounded-xl hover:bg-gray-50 transition-colors"
                        >
                            Batal
                        </button>
                        <button
                            type="submit"
                            disabled={loading}
                            className="flex-1 py-3 bg-black text-white font-black text-sm rounded-xl hover:bg-gray-800 transition-all flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
                        >
                            {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : 'Simpan Perubahan'}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    )
}