'use client'

import { useState } from 'react'
import { Eye, Baby, Search } from 'lucide-react'
import Link from 'next/link'

interface AkunBalita {
    id: number
    nama_orang_tua: string
    nama_anak: string
}

interface Props {
    data: AkunBalita[]
}

export function KelolaDataTable({ data }: Props) {
    const [search, setSearch] = useState('')

    const filtered = data.filter(d =>
        d.nama_orang_tua?.toLowerCase().includes(search.toLowerCase()) ||
        d.nama_anak?.toLowerCase().includes(search.toLowerCase())
    )

    return (
        <>
            {/* Search */}
            <div className="flex items-center gap-3 mb-5">
                <div className="relative flex-1 max-w-sm">
                    <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 ibu atau nama anak..."
                        value={search}
                        onChange={e => setSearch(e.target.value)}
                        className="w-full pl-9 pr-4 py-2.5 border-2 border-gray-200 rounded-lg text-sm focus:outline-none focus:border-black transition-colors"
                    />
                </div>
                <span className="text-xs text-gray-400 font-semibold">
                    {filtered.length} dari {data.length} data
                </span>
            </div>

            {/* Table */}
            <div className="rounded-xl border-2 border-black shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] overflow-hidden">
                {/* Header */}
                <div className="grid grid-cols-[60px_1fr_1fr_120px] bg-black text-white px-6 py-4 text-xs font-bold uppercase tracking-widest">
                    <span className="text-center text-gray-400">#</span>
                    <span>Nama Ibu / Orang Tua</span>
                    <span>Nama Anak</span>
                    <span className="text-center">Aksi</span>
                </div>

                {/* Rows */}
                {filtered.length === 0 ? (
                    <div className="flex flex-col items-center justify-center py-16 gap-3 text-gray-300">
                        <Baby className="w-12 h-12 opacity-30" />
                        <p className="font-semibold text-gray-400">Tidak ada data ditemukan</p>
                    </div>
                ) : (
                    filtered.map((row, idx) => (
                        <div
                            key={row.id}
                            className={`grid grid-cols-[60px_1fr_1fr_120px] items-center px-6 py-4 border-b border-gray-100 hover:bg-orange-50/50 transition-colors ${idx % 2 === 0 ? 'bg-white' : 'bg-gray-50/40'}`}
                        >
                            {/* Index */}
                            <div className="flex justify-center">
                                <span className="w-7 h-7 rounded-full bg-gray-100 border border-gray-200 flex items-center justify-center text-xs font-bold text-gray-500">
                                    {idx + 1}
                                </span>
                            </div>

                            {/* Nama Ibu */}
                            <div className="flex items-center gap-2.5">
                                <div className="w-8 h-8 rounded-full bg-orange-100 border border-orange-200 flex items-center justify-center text-orange-700 text-xs font-bold flex-shrink-0">
                                    {row.nama_orang_tua?.charAt(0).toUpperCase() ?? '?'}
                                </div>
                                <span className="text-sm font-semibold truncate">{row.nama_orang_tua ?? '-'}</span>
                            </div>

                            {/* Nama Anak */}
                            <div className="flex items-center gap-2">
                                <Baby className="w-3.5 h-3.5 text-gray-300 flex-shrink-0" />
                                <span className="text-sm text-gray-700 truncate">{row.nama_anak ?? '-'}</span>
                            </div>

                            {/* Aksi — navigate ke halaman detail */}
                            <div className="flex justify-center">
                                <Link
                                    href={`/dashboard/kelola-data/${row.id}`}
                                    className="flex items-center gap-1.5 px-3 py-1.5 bg-orange-500 text-white text-xs font-bold rounded-lg hover:bg-orange-600 transition-all shadow-[2px_2px_0px_0px_rgba(0,0,0,0.3)] hover:shadow-none hover:translate-x-[1px] hover:translate-y-[1px]"
                                >
                                    <Eye className="w-3.5 h-3.5" />
                                    Review
                                </Link>
                            </div>
                        </div>
                    ))
                )}
            </div>
        </>
    )
}