import { Head, Link } from '@inertiajs/react';
import {
    Users, Activity, ClipboardList, BookOpen,
    LogOut, Search
} from 'lucide-react';
import { useState } from 'react';

export default function DataPengguna({ auth, users = [] }) {
    const [searchQuery, setSearchQuery] = useState('');

    const formatDate = (dateString) => {
        if (!dateString) return '-';
        const options = { day: 'numeric', month: 'short', year: 'numeric' };
        return new Date(dateString).toLocaleDateString('id-ID', options);
    };

    const filteredUsers = users.filter(user =>
        user.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
        user.email.toLowerCase().includes(searchQuery.toLowerCase())
    );

    return (
        <div className="min-h-screen bg-[#F8FBF8] font-sans text-slate-800 flex pb-24 lg:pb-0">
            <Head title="Data Pengguna - Admin" />

            {/* --- SIDEBAR ADMIN (KHUSUS DESKTOP) --- */}
            <aside className="hidden lg:flex flex-col w-72 bg-white border-r border-[#E5EFE9] fixed h-full z-20">
                <div className="p-8 flex items-center gap-3 border-b border-slate-50">
                    <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[#EA580C] to-[#145C33] flex items-center justify-center text-white font-bold text-lg">
                        H
                    </div>
                    <span className="font-black text-2xl text-emerald-900 tracking-tight">HiperDiet</span>
                </div>

                <div className="flex-1 overflow-y-auto py-6 px-4 space-y-2">
                    <p className="px-4 text-xs font-bold text-slate-400 uppercase tracking-widest mb-4">Menu Utama</p>

                    <Link href={route('admin.dashboard')} className="flex items-center gap-3 px-4 py-3 text-slate-500 hover:bg-slate-50 hover:text-[#EA580C] rounded-2xl font-semibold transition">
                        <Activity size={20} /> Monitoring Pasien
                    </Link>

                    <Link href={route('admin.users')} className="flex items-center gap-3 px-4 py-3 bg-[#F4F8F5] text-[#145C33] rounded-2xl font-bold transition border border-[#E5EFE9]">
                        <Users size={20} /> Data Pengguna
                    </Link>

                    <Link href={route('admin.kuis')} className="flex items-center gap-3 px-4 py-3 text-slate-500 hover:bg-slate-50 hover:text-[#EA580C] rounded-2xl font-semibold transition">
                        <ClipboardList size={20} /> Kelola Kuis
                    </Link>

                </div>

                <div className="p-6 border-t border-slate-50">
                    <div className="flex items-center gap-3 mb-4 px-2">
                        <div className="w-10 h-10 bg-slate-100 rounded-full flex items-center justify-center font-bold text-[#145C33]">
                            {auth?.user?.name ? auth.user.name.charAt(0) : 'A'}
                        </div>
                        <div>
                            <p className="text-sm font-bold text-slate-800">{auth?.user?.name || 'Admin Utama'}</p>
                            <p className="text-xs text-slate-500">{auth?.user?.email || 'admin@hiperdiet.com'}</p>
                        </div>
                    </div>
                    <Link href={route('logout')} method="post" as="button" className="flex items-center justify-center gap-2 w-full py-2.5 rounded-xl text-red-500 hover:bg-red-50 font-bold text-sm transition">
                        <LogOut size={16} /> Keluar
                    </Link>
                </div>
            </aside>

            {/* --- BOTTOM NAVIGATION BAR (KHUSUS MOBILE) --- */}
            <div className="lg:hidden fixed bottom-0 w-full bg-white rounded-t-3xl shadow-[0_-10px_40px_rgba(0,0,0,0.08)] z-40 px-6 py-3 pb-safe border-t border-slate-100 flex justify-between items-center text-[10px] font-bold text-slate-400">
                <Link href={route('admin.dashboard')} className={`flex flex-col items-center gap-1 w-14 ${route().current('admin.dashboard') ? 'text-[#EA580C]' : 'hover:text-slate-600'}`}>
                    <Activity size={24} />
                    <span>Pantau</span>
                </Link>

                <Link href={route('admin.users')} className={`flex flex-col items-center gap-1 w-14 ${route().current('admin.users') ? 'text-[#EA580C]' : 'hover:text-slate-600'}`}>
                    <Users size={24} />
                    <span>Pasien</span>
                </Link>

                <Link href={route('admin.kuis')} className={`flex flex-col items-center gap-1 w-14 ${route().current('admin.kuis') ? 'text-[#EA580C]' : 'hover:text-slate-600'}`}>
                    <ClipboardList size={24} />
                    <span>Evaluasi</span>
                </Link>


                <Link href={route('logout')} method="post" as="button" className="flex flex-col items-center gap-1 w-14 text-red-400 hover:text-red-600">
                    <LogOut size={24} />
                    <span>Keluar</span>
                </Link>
            </div>

            {/* --- MAIN CONTENT AREA --- */}
            <main className="flex-1 lg:ml-72 flex flex-col min-h-screen pb-12">

                <header className="bg-white/80 backdrop-blur-md sticky top-0 z-10 px-6 lg:px-8 py-4 lg:py-5 border-b border-[#E5EFE9] flex justify-between items-center gap-4">
                    <div className="lg:hidden flex items-center gap-2">
                        <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-[#EA580C] to-[#145C33] flex items-center justify-center text-white font-bold">
                            H
                        </div>
                    </div>

                    <div className="hidden sm:block">
                        <h1 className="text-xl lg:text-2xl font-extrabold text-slate-900 tracking-tight">
                            Data <span className="text-[#145C33] italic font-serif">Pengguna</span>
                        </h1>
                        <p className="text-xs text-slate-500 mt-0.5">Kelola data pasien terdaftar dalam sistem.</p>
                    </div>

                    <div className="flex items-center gap-3 w-full sm:w-auto justify-end">
                        <div className="relative w-full sm:w-auto flex-1 sm:flex-none">
                            <Search size={18} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
                            <input
                                type="text"
                                placeholder="Cari nama atau email..."
                                value={searchQuery}
                                onChange={(e) => setSearchQuery(e.target.value)}
                                className="w-full sm:w-64 pl-10 pr-4 py-2 bg-[#F4F8F5] border-none rounded-full text-sm focus:ring-2 focus:ring-[#145C33]"
                            />
                        </div>
                    </div>
                </header>

                <div className="p-6 lg:p-8 space-y-6 lg:space-y-8">

                    <div className="bg-white rounded-[1.5rem] lg:rounded-[2rem] shadow-sm border border-[#E5EFE9] p-5 lg:p-6 flex flex-col sm:flex-row justify-between items-center gap-4">
                        <div>
                            <h2 className="text-lg lg:text-xl font-bold text-slate-900">Daftar Pasien Terdaftar</h2>
                            <p className="text-sm text-slate-500">Total {filteredUsers.length} pasien dalam sistem.</p>
                        </div>
                    </div>

                    {/* Tabel Data - Desktop */}
                    <div className="hidden md:block bg-white rounded-[1.5rem] lg:rounded-[2rem] shadow-[0_4px_20px_rgba(0,0,0,0.03)] border border-[#E5EFE9] overflow-hidden">
                        <div className="overflow-x-auto">
                            <table className="w-full text-left whitespace-nowrap">
                                <thead>
                                    <tr className="bg-[#F8FBF8] text-slate-400 text-[10px] font-black uppercase tracking-widest border-y border-[#E5EFE9]">
                                        <th className="px-6 lg:px-8 py-4 lg:py-5">Info Pasien</th>
                                        <th className="px-6 lg:px-8 py-4 lg:py-5">Info Medis Awal</th>
                                        <th className="px-6 lg:px-8 py-4 lg:py-5 text-center">Tanggal Gabung</th>
                                        <th className="px-6 lg:px-8 py-4 lg:py-5 text-center">Status Akun</th>
                                    </tr>
                                </thead>
                                <tbody className="divide-y divide-[#E5EFE9]">
                                    {filteredUsers.length === 0 ? (
                                        <tr>
                                            <td colSpan="4" className="px-6 lg:px-8 py-12 text-center text-slate-400 font-medium">
                                                Belum ada pasien yang mendaftar atau ditemukan.
                                            </td>
                                        </tr>
                                    ) : (
                                        filteredUsers.map((user) => (
                                            <tr key={user.id} className="hover:bg-slate-50/50 transition-colors">
                                                <td className="px-6 lg:px-8 py-4">
                                                    <div className="flex items-center gap-3 lg:gap-4">
                                                        <div className="w-10 h-10 lg:w-12 lg:h-12 rounded-full bg-gradient-to-br from-emerald-100 to-emerald-50 flex items-center justify-center font-bold text-[#145C33] border border-emerald-200 shadow-sm">
                                                            {user.name.charAt(0).toUpperCase()}
                                                        </div>
                                                        <div>
                                                            <p className="font-bold text-slate-800 text-sm lg:text-base">{user.name}</p>
                                                            <p className="text-xs font-medium text-slate-500 mt-0.5">{user.email}</p>
                                                        </div>
                                                    </div>
                                                </td>

                                                <td className="px-6 lg:px-8 py-4">
                                                    <div className="flex flex-col gap-1">
                                                        <span className="text-xs lg:text-sm font-bold text-slate-700">
                                                            BB: <span className="text-slate-500 font-medium">{user.berat_badan || '-'} kg</span> | TB: <span className="text-slate-500 font-medium">{user.tinggi_badan || '-'} cm</span>
                                                        </span>
                                                        <span className={`w-fit px-2 py-0.5 rounded text-[10px] font-bold ${user.jenis_kelamin === 'L' ? 'bg-blue-50 text-blue-600' : user.jenis_kelamin === 'P' ? 'bg-pink-50 text-pink-600' : 'bg-slate-100 text-slate-500'}`}>
                                                            {user.jenis_kelamin === 'L' ? 'Laki-laki' : user.jenis_kelamin === 'P' ? 'Perempuan' : 'Belum diset'}
                                                        </span>
                                                    </div>
                                                </td>

                                                <td className="px-6 lg:px-8 py-4 text-center text-sm font-medium text-slate-600">
                                                    {formatDate(user.created_at)}
                                                </td>

                                                <td className="px-6 lg:px-8 py-4 text-center">
                                                    <span className="px-2.5 py-1 lg:px-3 lg:py-1.5 rounded-lg text-[10px] lg:text-xs font-bold uppercase tracking-wider bg-emerald-50 text-[#145C33] border border-emerald-100">
                                                        Aktif
                                                    </span>
                                                </td>
                                            </tr>
                                        ))
                                    )}
                                </tbody>
                            </table>
                        </div>

                        <div className="bg-white px-6 lg:px-8 py-4 lg:py-5 border-t border-[#E5EFE9] flex items-center justify-between">
                            <p className="text-xs lg:text-sm font-bold text-slate-400">Menampilkan total {filteredUsers.length} data pasien</p>
                        </div>
                    </div>

                    {/* Card Layout - Mobile */}
                    <div className="md:hidden space-y-4">
                        {filteredUsers.length === 0 ? (
                            <div className="bg-white rounded-[1.5rem] border border-[#E5EFE9] p-8 text-center">
                                <Users size={48} className="text-slate-300 mx-auto mb-4" />
                                <h3 className="text-lg font-bold text-slate-700 mb-2">Belum ada pasien</h3>
                                <p className="text-slate-500 text-sm">Belum ada pasien yang mendaftar atau ditemukan.</p>
                            </div>
                        ) : (
                            filteredUsers.map((user) => (
                                <div key={user.id} className="bg-white rounded-[1.5rem] shadow-sm border border-[#E5EFE9] p-5">
                                    <div className="flex items-center justify-between mb-4">
                                        <div className="flex items-center gap-3">
                                            <div className="w-12 h-12 rounded-full bg-gradient-to-br from-emerald-100 to-emerald-50 flex items-center justify-center font-bold text-[#145C33] border border-emerald-200 shadow-sm">
                                                {user.name.charAt(0).toUpperCase()}
                                            </div>
                                            <div>
                                                <p className="font-bold text-slate-800 text-base">{user.name}</p>
                                                <p className="text-xs font-medium text-slate-500">{user.email}</p>
                                            </div>
                                        </div>
                                        <span className="px-2.5 py-1 rounded-lg text-[10px] font-bold uppercase tracking-wider bg-emerald-50 text-[#145C33] border border-emerald-100">
                                            Aktif
                                        </span>
                                    </div>

                                    <div className="bg-[#F8FBF8] rounded-xl p-4 mb-4">
                                        <div className="flex flex-col gap-2">
                                            <div className="flex justify-between items-center">
                                                <span className="text-xs font-bold text-slate-700">Berat Badan</span>
                                                <span className="text-sm font-medium text-slate-600">{user.berat_badan || '-'} kg</span>
                                            </div>
                                            <div className="flex justify-between items-center">
                                                <span className="text-xs font-bold text-slate-700">Tinggi Badan</span>
                                                <span className="text-sm font-medium text-slate-600">{user.tinggi_badan || '-'} cm</span>
                                            </div>
                                            <div className="flex justify-between items-center">
                                                <span className="text-xs font-bold text-slate-700">Jenis Kelamin</span>
                                                <span className={`px-2 py-0.5 rounded text-[10px] font-bold ${user.jenis_kelamin === 'L' ? 'bg-blue-50 text-blue-600' : user.jenis_kelamin === 'P' ? 'bg-pink-50 text-pink-600' : 'bg-slate-100 text-slate-500'}`}>
                                                    {user.jenis_kelamin === 'L' ? 'Laki-laki' : user.jenis_kelamin === 'P' ? 'Perempuan' : 'Belum diset'}
                                                </span>
                                            </div>
                                        </div>
                                    </div>

                                    <div className="flex items-center justify-between border-t border-slate-100 pt-3 mt-2">
                                        <div>
                                            <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Tanggal Gabung</p>
                                            <p className="text-xs font-medium text-slate-600">{formatDate(user.created_at)}</p>
                                        </div>
                                    </div>
                                </div>
                            ))
                        )}

                        <div className="bg-white rounded-[1.5rem] border border-[#E5EFE9] p-4 text-center">
                            <p className="text-sm font-bold text-slate-400">Menampilkan total {filteredUsers.length} data pasien</p>
                        </div>
                    </div>

                </div>
            </main>
        </div>
    );
}
