'use client'

import { useState, useMemo } from 'react'
import { Search, Plus, MapPin, Phone, User, Edit3, Trash2, Eye, ExternalLink, Building2 } from 'lucide-react'
import { PosyanduFormModal } from './PosyanduFormModal'
import { useRouter } from 'next/navigation'
import { supabase } from '@/lib/supabase'
import { showSwal } from '@/lib/swal'

interface PosyanduWithPetugas {
    id: string
    nama_posyandu: string
    alamat: string
    kontak: string | null
    latitude: number | null
    longitude: number | null
    link_google_maps: string | null
    petugas?: {
        nama_petugas: string
        nomor_hp: string | null
        jabatan: string | null
    }[]
}

interface Props {
    data: PosyanduWithPetugas[]
}

export function ManajemenPosyanduTable({ data }: Props) {
    const router = useRouter()
    const [searchTerm, setSearchTerm] = useState('')
    const [isModalOpen, setIsModalOpen] = useState(false)
    const [selectedPosyandu, setSelectedPosyandu] = useState<PosyanduWithPetugas | null>(null)
    const [isDeleting, setIsDeleting] = useState<string | null>(null)

    const filteredData = useMemo(() => {
        return data.filter(p =>
            p.nama_posyandu.toLowerCase().includes(searchTerm.toLowerCase()) ||
            p.alamat.toLowerCase().includes(searchTerm.toLowerCase()) ||
            p.petugas?.some(petugas => petugas.nama_petugas?.toLowerCase().includes(searchTerm.toLowerCase()))
        )
    }, [data, searchTerm])

    const handleEdit = (posyandu: PosyanduWithPetugas) => {
        setSelectedPosyandu(posyandu)
        setIsModalOpen(true)
    }

    const handleDelete = async (id: string, name: string) => {
        const result = await showSwal.confirm(
            'Hapus Data?',
            `Apakah Anda yakin ingin menghapus data Posyandu ${name}? Seluruh data petugas terkait juga akan dihapus.`
        )

        if (!result.isConfirmed) return

        setIsDeleting(id)
        try {
            // First delete local petugas (due to FK)
            await supabase.from('petugas_posyandu_lokal').delete().eq('posyandu_id', id)
            // Then delete the posyandu
            const { error } = await supabase.from('detail_posyandu').delete().eq('id', id)

            if (error) throw error

            await showSwal.success('Terhapus!', `Data Posyandu ${name} telah berhasil dihapus.`)
            router.refresh()
        } catch (err: any) {
            showSwal.error('Gagal!', `Gagal menghapus data: ${err.message}`)
        } finally {
            setIsDeleting('')
        }
    }

    return (
        <div className="flex flex-col gap-6">
            {/* Action Bar */}
            <div className="flex flex-col md:flex-row justify-between items-center gap-4">
                <div className="relative w-full md:w-96">
                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
                    <input
                        type="text"
                        placeholder="Cari nama posyandu, alamat, atau petugas..."
                        value={searchTerm}
                        onChange={(e) => setSearchTerm(e.target.value)}
                        className="w-full pl-10 pr-4 py-2.5 bg-gray-50 border-2 border-gray-100 focus:border-black rounded-xl text-sm font-semibold outline-none transition-all"
                    />
                </div>
                <button
                    onClick={() => { setSelectedPosyandu(null); setIsModalOpen(true) }}
                    className="w-full md:w-auto flex items-center justify-center gap-2 px-6 py-2.5 bg-purple-600 text-white font-bold rounded-xl hover:bg-purple-700 transition-all shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-x-[2px] hover:translate-y-[2px]"
                >
                    <Plus className="w-4 h-4" />
                    Tambah Posyandu Baru
                </button>
            </div>

            {/* Table */}
            <div className="overflow-hidden rounded-2xl border-2 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]">
                <table className="w-full text-left border-collapse">
                    <thead className="bg-black text-white">
                        <tr>
                            <th className="px-6 py-4 text-[10px] font-bold uppercase tracking-widest text-center w-16">No</th>
                            <th className="px-6 py-4 text-[10px] font-bold uppercase tracking-widest">Informasi Posyandu</th>
                            <th className="px-6 py-4 text-[10px] font-bold uppercase tracking-widest">Petugas & Kontak</th>
                            <th className="px-6 py-4 text-[10px] font-bold uppercase tracking-widest text-center">Lokasi</th>
                            <th className="px-6 py-4 text-[10px] font-bold uppercase tracking-widest text-center w-40">Aksi</th>
                        </tr>
                    </thead>
                    <tbody className="bg-white divide-y divide-gray-100">
                        {filteredData.length === 0 ? (
                            <tr>
                                <td colSpan={5} className="px-6 py-20 text-center">
                                    <div className="flex flex-col items-center gap-2 text-gray-400">
                                        <Building2 className="w-12 h-12 opacity-20" />
                                        <p className="font-bold">Tidak ada data posyandu ditemukan</p>
                                    </div>
                                </td>
                            </tr>
                        ) : (
                            filteredData.map((p, idx) => (
                                <tr key={p.id} className="hover:bg-purple-50/30 transition-colors group">
                                    <td className="px-6 py-5 text-center font-black text-gray-300 group-hover:text-purple-300">
                                        {idx + 1}
                                    </td>
                                    <td className="px-6 py-5">
                                        <div className="flex flex-col">
                                            <span className="font-black text-base">{p.nama_posyandu}</span>
                                            <div className="flex items-center gap-1.5 text-gray-500 text-xs mt-1">
                                                <MapPin className="w-3 h-3 flex-shrink-0" />
                                                <span className="line-clamp-1">{p.alamat}</span>
                                            </div>
                                        </div>
                                    </td>
                                    <td className="px-6 py-5">
                                        <div className="flex flex-col gap-2 max-w-[250px]">
                                            {p.petugas && p.petugas.length > 0 ? (
                                                p.petugas.map((petugas, i) => (
                                                    <div key={i} className="flex flex-col border-l-2 border-purple-100 pl-3 py-0.5">
                                                        <div className="flex items-center gap-2">
                                                            <span className="text-sm font-bold text-gray-700 line-clamp-1">
                                                                {petugas.nama_petugas}
                                                            </span>
                                                            {petugas.jabatan && (
                                                                <span className="text-[10px] px-1.5 py-0.5 bg-purple-50 text-purple-600 rounded font-black uppercase tracking-tighter">
                                                                    {petugas.jabatan}
                                                                </span>
                                                            )}
                                                        </div>
                                                        {petugas.nomor_hp && (
                                                            <div className="flex items-center gap-1.5 text-[10px] text-gray-400">
                                                                <Phone className="w-2.5 h-2.5" />
                                                                <span>{petugas.nomor_hp}</span>
                                                            </div>
                                                        )}
                                                    </div>
                                                ))
                                            ) : (
                                                <div className="flex items-center gap-2 text-gray-400 italic text-xs">
                                                    <User className="w-3 h-3" />
                                                    <span>Belum ada petugas</span>
                                                </div>
                                            )}
                                        </div>
                                    </td>
                                    <td className="px-6 py-5 text-center">
                                        {p.link_google_maps ? (
                                            <a
                                                href={p.link_google_maps}
                                                target="_blank"
                                                rel="noopener noreferrer"
                                                className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-blue-50 text-blue-600 rounded-lg text-xs font-bold border border-blue-100 hover:bg-blue-100 transition-colors"
                                            >
                                                <ExternalLink className="w-3 h-3" />
                                                Cek Maps
                                            </a>
                                        ) : (
                                            <span className="text-xs text-gray-300 italic">Belum diset</span>
                                        )}
                                    </td>
                                    <td className="px-6 py-5">
                                        <div className="flex items-center justify-center gap-2">
                                            <button
                                                onClick={() => handleEdit(p)}
                                                className="p-2 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-all"
                                                title="Edit"
                                            >
                                                <Edit3 className="w-4 h-4" />
                                            </button>
                                            <button
                                                onClick={() => handleDelete(p.id, p.nama_posyandu)}
                                                disabled={isDeleting === p.id}
                                                className="p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-all disabled:opacity-50"
                                                title="Hapus"
                                            >
                                                {isDeleting === p.id ? (
                                                    <Loader2 className="w-4 h-4 animate-spin" />
                                                ) : (
                                                    <Trash2 className="w-4 h-4" />
                                                )}
                                            </button>
                                            <div className="w-px h-10 bg-gray-100 mx-1"></div>
                                            <button
                                                onClick={() => router.push(`/dashboard/manajemen-posyandu/review/${p.id}`)}
                                                className="flex items-center gap-1.5 px-3 py-1.5 bg-black text-white rounded-lg text-xs font-black shadow-[3px_3px_0px_0px_rgba(147,51,234,0.5)] hover:shadow-none hover:translate-x-[1px] hover:translate-y-[1px] transition-all"
                                            >
                                                <Eye className="w-3.5 h-3.5" />
                                                REVIEW
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            ))
                        )}
                    </tbody>
                </table>
            </div>

            {isModalOpen && (
                <PosyanduFormModal
                    isOpen={isModalOpen}
                    onClose={() => setIsModalOpen(false)}
                    selectedData={selectedPosyandu}
                />
            )}
        </div>
    )
}

function Loader2(props: any) {
    return (
        <svg
            {...props}
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
        >
            <path d="M21 12a9 9 0 1 1-6.219-8.56" />
        </svg>
    )
}
