'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="rounded-2xl border-2 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] overflow-hidden">
                <div className="overflow-x-auto">
                    <div className="min-w-[900px] md:min-w-full">
                        <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>
                </div>
            </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>
    )
}