import { Head, Link } from '@inertiajs/react';
import {
    Users, Activity, ClipboardList, BookOpen,
    LogOut, Search, AlertTriangle, CheckCircle2,
    ChevronRight, MoreVertical, Plus, X, Utensils, Droplet, Flame, Beef, Wheat,
    Download, ChevronLeft, CalendarDays // <-- Tambahan icon untuk kalender
} from 'lucide-react';
import { useState } from 'react';

export default function AdminDashboard({ auth, patients = [], stats = { total: 0, avgCompliance: 0, highSodium: 0 } }) {
    const [searchQuery, setSearchQuery] = useState('');

    const [isDetailModalOpen, setIsDetailModalOpen] = useState(false);
    const [selectedPatient, setSelectedPatient] = useState(null);

    // --- STATE UNTUK TANGGAL DI DALAM MODAL ---
    const todayStr = new Date().toLocaleDateString('en-CA');
    const [modalDate, setModalDate] = useState(todayStr);

    const filteredPatients = patients.filter(p =>
        p.name.toLowerCase().includes(searchQuery.toLowerCase())
    );

    const openDetailModal = (patient) => {
        setSelectedPatient(patient);
        setModalDate(todayStr); // Selalu reset ke hari ini saat modal dibuka
        setIsDetailModalOpen(true);
    };

    // --- FUNGSI GESER TANGGAL MODAL ---
    const changeModalDate = (days) => {
        const date = new Date(modalDate);
        date.setDate(date.getDate() + days);
        setModalDate(date.toLocaleDateString('en-CA'));
    };

    const formatDateIndo = (dateStr) => {
        const options = { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' };
        return new Date(dateStr).toLocaleDateString('id-ID', options);
    };

    const formatWaktu = (waktu) => {
        const labels = { pagi: 'Sarapan', snack_pagi: 'Snack Pagi', siang: 'Makan Siang', snack_sore: 'Snack Sore', malam: 'Makan Malam' };
        return labels[waktu] || 'Lainnya';
    };

    // --- KALKULASI DINAMIS UNTUK MODAL BERDASARKAN TANGGAL DIPILIH ---
    const filteredModalMeals = selectedPatient?.food_history?.filter(f => f.tanggal === modalDate) || [];
    const modalSodium = filteredModalMeals.reduce((sum, f) => sum + Number(f.natrium), 0);
    const modalKalori = filteredModalMeals.reduce((sum, f) => sum + Number(f.kalori), 0);
    const modalProtein = filteredModalMeals.reduce((sum, f) => sum + Number(f.protein), 0);
    const modalKarbo = filteredModalMeals.reduce((sum, f) => sum + Number(f.karbo), 0);

    return (
        <div className={`min-h-screen bg-[#F8FBF8] font-sans text-slate-800 flex pb-24 lg:pb-0 relative ${isDetailModalOpen ? 'h-screen overflow-hidden' : ''}`}>
            <Head title="Admin Dashboard - HiperDiet" />

            {/* --- 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 bg-[#F4F8F5] text-[#145C33] rounded-2xl font-bold transition border border-[#E5EFE9]">
                        <Activity size={20} /> Monitoring Pasien
                    </Link>

                    <Link href={route('admin.users')} 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">
                        <Users size={20} /> Data Pasien
                    </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} /> Evaluasi 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 || 'Ahli Gizi'}</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">

                <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">
                            Monitoring <span className="text-[#145C33] italic font-serif">Pasien Hipertensi</span>
                        </h1>
                        <p className="text-xs text-slate-500 mt-0.5">Pantau kepatuhan diet dan asupan garam harian.</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 pasien..."
                                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">

                    {/* --- STATISTIK CARDS --- */}
                    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-6">
                        <div className="bg-white p-5 lg:p-6 rounded-[1.5rem] lg:rounded-[2rem] shadow-sm border border-[#E5EFE9] flex items-center gap-4 lg:gap-5">
                            <div className="w-12 h-12 lg:w-14 lg:h-14 rounded-2xl bg-blue-50 text-blue-600 flex items-center justify-center shrink-0">
                                <Users size={24} className="lg:w-7 lg:h-7" />
                            </div>
                            <div>
                                <p className="text-[10px] lg:text-xs font-bold text-slate-400 uppercase tracking-wider">Total Pasien Hipertensi</p>
                                <h3 className="text-2xl lg:text-3xl font-black text-slate-900">{stats.total}</h3>
                            </div>
                        </div>

                        <div className="bg-white p-5 lg:p-6 rounded-[1.5rem] lg:rounded-[2rem] shadow-sm border border-[#E5EFE9] flex items-center gap-4 lg:gap-5">
                            <div className="w-12 h-12 lg:w-14 lg:h-14 rounded-2xl bg-emerald-50 text-[#145C33] flex items-center justify-center shrink-0">
                                <CheckCircle2 size={24} className="lg:w-7 lg:h-7" />
                            </div>
                            <div>
                                <p className="text-[10px] lg:text-xs font-bold text-slate-400 uppercase tracking-wider">Rata-rata Kepatuhan</p>
                                <h3 className="text-2xl lg:text-3xl font-black text-slate-900">{stats.avgCompliance}<span className="text-sm lg:text-lg text-slate-400">%</span></h3>
                            </div>
                        </div>

                        <div className="bg-gradient-to-br from-[#EA580C] to-[#c24100] p-5 lg:p-6 rounded-[1.5rem] lg:rounded-[2rem] shadow-md shadow-orange-500/20 flex items-center gap-4 lg:gap-5 text-white sm:col-span-2 lg:col-span-1">
                            <div className="w-12 h-12 lg:w-14 lg:h-14 rounded-2xl bg-white/20 text-white flex items-center justify-center backdrop-blur-sm shrink-0">
                                <AlertTriangle size={24} className="lg:w-7 lg:h-7" />
                            </div>
                            <div>
                                <p className="text-[10px] lg:text-xs font-bold text-orange-100 uppercase tracking-wider">Asupan Garam Berlebih Hari Ini</p>
                                <h3 className="text-2xl lg:text-3xl font-black text-white">{stats.highSodium} <span className="text-sm lg:text-lg font-medium opacity-80">Pasien</span></h3>
                            </div>
                        </div>
                    </div>

                    {/* --- TABEL MONITORING - 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="px-6 lg:px-8 py-5 lg:py-6 border-b border-[#E5EFE9] flex justify-between items-center bg-[#F8FBF8]">
                            <div>
                                <h3 className="font-extrabold text-slate-900 text-base lg:text-lg tracking-tight">Status Asupan & Evaluasi</h3>
                                <p className="text-xs text-slate-500 mt-1 hidden sm:block">Status natrium tabel ini berdasarkan data <strong className="text-slate-700">Hari Ini</strong>.</p>
                            </div>

                            <div className="flex items-center gap-3">
                                <a
                                    href="/admin/export-excel"
                                    className="text-[#145C33] bg-emerald-50 hover:bg-[#145C33] hover:text-white border border-emerald-200 px-4 py-2.5 rounded-xl text-xs font-bold transition flex items-center gap-2 shadow-sm"
                                >
                                    <Download size={16} />
                                    <span>Export Excel</span>
                                </a>

                                <button className="text-slate-400 text-xs lg:text-sm font-bold flex items-center gap-1 hover:text-emerald-900 transition ml-2">
                                    Lihat Semua <ChevronRight size={16} />
                                </button>
                            </div>
                        </div>

                        <div className="overflow-x-auto">
                            <table className="w-full text-left whitespace-nowrap cursor-default">
                                <thead>
                                    <tr className="bg-white text-slate-400 text-[10px] font-black uppercase tracking-widest border-b border-slate-100">
                                        <th className="px-6 lg:px-8 py-4 lg:py-5">Nama Pasien</th>
                                        <th className="px-6 lg:px-8 py-4 lg:py-5 text-right">Asupan Garam (Hari Ini)</th>
                                        <th className="px-6 lg:px-8 py-4 lg:py-5 text-center">Skor Evaluasi</th>
                                        <th className="px-6 lg:px-8 py-4 lg:py-5 text-center">Status Kepatuhan</th>
                                        <th className="px-6 lg:px-8 py-4 lg:py-5 text-center">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody className="divide-y divide-slate-50">
                                    {filteredPatients.length === 0 ? (
                                        <tr>
                                            <td colSpan="5" className="px-6 lg:px-8 py-12 text-center text-slate-400 font-medium">
                                                Belum ada data pasien atau pasien tidak ditemukan.
                                            </td>
                                        </tr>
                                    ) : (
                                        filteredPatients.map((patient) => (
                                            <tr key={patient.id} onClick={() => openDetailModal(patient)} className="hover:bg-slate-50/80 transition-colors cursor-pointer group">
                                                <td className="px-6 lg:px-8 py-4">
                                                    <div className="flex items-center gap-3">
                                                        <div className="w-9 h-9 lg:w-10 lg:h-10 rounded-full bg-[#F4F8F5] flex items-center justify-center font-bold text-[#145C33] text-sm lg:text-base border border-[#E5EFE9]">
                                                            {patient.name.charAt(0).toUpperCase()}
                                                        </div>
                                                        <div>
                                                            <p className="font-bold text-slate-800 text-sm lg:text-base group-hover:text-[#145C33] transition-colors">{patient.name}</p>
                                                            <p className="text-[10px] font-semibold text-slate-400">Evaluasi Terakhir: {patient.last_quiz_date}</p>
                                                        </div>
                                                    </div>
                                                </td>

                                                <td className="px-6 lg:px-8 py-4 text-right">
                                                    <p className={`font-black text-base lg:text-lg ${patient.sodium > 2000 ? 'text-red-500' : 'text-slate-800'}`}>
                                                        {patient.sodium} <span className="text-[10px] font-semibold text-slate-400">mg / hari</span>
                                                    </p>
                                                    {patient.sodium > 2000 && <span className="text-[10px] font-bold text-red-500 bg-red-50 px-2 py-0.5 rounded mt-1 inline-block border border-red-100">Batas Terlampaui</span>}
                                                </td>

                                                <td className="px-6 lg:px-8 py-4 text-center">
                                                    <div className="inline-flex items-center justify-center w-10 h-10 lg:w-12 lg:h-12 rounded-full border-[3px] lg:border-4 border-slate-100 relative bg-white">
                                                        <span className="font-bold text-xs lg:text-sm text-slate-700">{patient.compliance}%</span>
                                                    </div>
                                                </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 border ${
                                                        patient.status === 'Aman' ? 'bg-emerald-50 text-[#145C33] border-emerald-100' :
                                                        patient.status === 'Waspada' ? 'bg-orange-50 text-[#EA580C] border-orange-100' :
                                                        'bg-red-50 text-red-600 border-red-100'
                                                    }`}>
                                                        {patient.status === 'Aman' ? 'Patuh Diet' : patient.status === 'Waspada' ? 'Kurang Patuh' : 'Tidak Patuh'}
                                                    </span>
                                                </td>

                                                <td className="px-6 lg:px-8 py-4 text-center">
                                                    <button className="p-2 text-[#145C33] bg-emerald-50 border border-emerald-100 hover:bg-[#145C33] hover:text-white rounded-lg transition shadow-sm font-bold text-xs flex items-center gap-1 mx-auto">
                                                        Detail Asupan
                                                    </button>
                                                </td>
                                            </tr>
                                        ))
                                    )}
                                </tbody>
                            </table>
                        </div>
                    </div>

                    {/* --- CARD LAYOUT - Mobile --- */}
                    <div className="md:hidden space-y-4">
                        <div className="bg-white rounded-[1.5rem] border border-[#E5EFE9] p-5 flex flex-col gap-4">
                            <div className="flex justify-between items-start">
                                <div>
                                    <h3 className="font-extrabold text-slate-900 text-base">Status Asupan & Evaluasi</h3>
                                    <p className="text-xs text-slate-500 mt-1">Ketuk kartu untuk melihat detail asupan & histori.</p>
                                </div>
                            </div>

                            <a
                                href="/admin/export-excel"
                                className="w-full text-[#145C33] bg-emerald-50 hover:bg-[#145C33] hover:text-white border border-emerald-200 px-4 py-2.5 rounded-xl text-xs font-bold transition flex justify-center items-center gap-2 shadow-sm"
                            >
                                <Download size={16} />
                                <span>Export Data ke Excel</span>
                            </a>
                        </div>

                        {filteredPatients.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 data pasien</h3>
                                <p className="text-slate-500 text-sm">Belum ada data pasien atau pasien tidak ditemukan.</p>
                            </div>
                        ) : (
                            filteredPatients.map((patient) => (
                                <div key={patient.id} onClick={() => openDetailModal(patient)} className="bg-white rounded-[1.5rem] shadow-sm border border-[#E5EFE9] p-5 active:bg-slate-50 transition-colors">
                                    <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-[#F4F8F5] flex items-center justify-center font-bold text-[#145C33] text-base border border-[#E5EFE9]">
                                                {patient.name.charAt(0).toUpperCase()}
                                            </div>
                                            <div>
                                                <p className="font-bold text-slate-800 text-base">{patient.name}</p>
                                                <p className="text-xs font-semibold text-slate-400">Evaluasi: {patient.last_quiz_date}</p>
                                            </div>
                                        </div>
                                        <div className="p-2 text-[#145C33] bg-emerald-50 rounded-lg">
                                            <ChevronRight size={16} />
                                        </div>
                                    </div>

                                    <div className="space-y-4">
                                        <div className="bg-slate-50 rounded-xl p-4">
                                            <div className="flex justify-between items-center mb-2">
                                                <span className="text-xs font-bold text-slate-600 uppercase tracking-wider">Asupan Garam</span>
                                                <span className={`text-sm font-black ${patient.sodium > 2000 ? 'text-red-500' : 'text-slate-800'}`}>
                                                    {patient.sodium} mg/hari
                                                </span>
                                            </div>
                                            {patient.sodium > 2000 && (
                                                <span className="text-[10px] font-bold text-red-500 bg-red-50 px-2 py-1 rounded border border-red-100 inline-block">
                                                    Batas Terlampaui
                                                </span>
                                            )}
                                        </div>

                                        <div className="flex items-center justify-between">
                                            <div className="flex items-center gap-3">
                                                <div className="flex items-center justify-center w-12 h-12 rounded-full border-4 border-slate-100 bg-white">
                                                    <span className="font-bold text-sm text-slate-700">{patient.compliance}%</span>
                                                </div>
                                                <div>
                                                    <p className="text-xs font-bold text-slate-400 uppercase tracking-wider">Skor Evaluasi</p>
                                                </div>
                                            </div>
                                            <span className={`px-3 py-1.5 rounded-lg text-xs font-bold border ${
                                                patient.status === 'Aman' ? 'bg-emerald-50 text-[#145C33] border-emerald-100' :
                                                patient.status === 'Waspada' ? 'bg-orange-50 text-[#EA580C] border-orange-100' :
                                                'bg-red-50 text-red-600 border-red-100'
                                            }`}>
                                                {patient.status === 'Aman' ? 'Patuh Diet' : patient.status === 'Waspada' ? 'Kurang Patuh' : 'Tidak Patuh'}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            ))
                        )}
                    </div>
                </div>
            </main>

            {/* --- MODAL DETAIL ASUPAN PASIEN (DENGAN KALENDER) --- */}
            {isDetailModalOpen && selectedPatient && (
                <div className="fixed inset-0 z-[100] flex items-end sm:items-center justify-center p-0 sm:p-6 bg-slate-900/60 backdrop-blur-sm transition-opacity">
                    <div className="bg-white w-full max-w-4xl sm:rounded-[2rem] rounded-t-[2rem] shadow-2xl overflow-hidden animate-[slide-up_0.3s_ease-out] sm:animate-none flex flex-col h-[90vh] sm:h-auto sm:max-h-[90vh]">

                        <div className="px-6 sm:px-8 py-5 border-b border-[#E5EFE9] flex justify-between items-center bg-gradient-to-r from-[#145C33] to-[#0f4425] shrink-0">
                            <div className="flex items-center gap-4">
                                <div className="w-12 h-12 rounded-full bg-white/20 flex items-center justify-center font-bold text-white text-xl border border-white/30 backdrop-blur-sm">
                                    {selectedPatient.name.charAt(0).toUpperCase()}
                                </div>
                                <div>
                                    <h3 className="font-extrabold text-lg sm:text-xl text-white tracking-tight">{selectedPatient.name}</h3>
                                    <p className="text-xs font-medium text-emerald-100 mt-0.5">Pemantauan Detail Asupan Makanan</p>
                                </div>
                            </div>
                            <button onClick={() => setIsDetailModalOpen(false)} className="p-2 bg-white/10 rounded-full text-white hover:bg-white/20 transition backdrop-blur-sm">
                                <X size={20} />
                            </button>
                        </div>

                        <div className="overflow-y-auto flex-1 bg-[#F8FBF8] p-6 sm:p-8 space-y-6">

                            {/* FILTER TANGGAL (PENGATURAN HARI) */}
                            <div className="flex items-center justify-between bg-white rounded-2xl p-1.5 border border-[#E5EFE9] w-full shadow-sm">
                                <button onClick={() => changeModalDate(-1)} className="p-2.5 text-slate-400 hover:text-[#145C33] hover:bg-emerald-50 rounded-xl transition">
                                    <ChevronLeft size={20} />
                                </button>
                                <div className="flex items-center gap-2 px-3 font-bold text-slate-700 text-sm">
                                    <CalendarDays size={18} className="text-[#EA580C]"/>
                                    <span>{formatDateIndo(modalDate)}</span>
                                    {modalDate === todayStr && <span className="hidden sm:inline text-[10px] bg-emerald-100 text-[#145C33] px-2 py-0.5 rounded-md ml-1">Hari ini</span>}
                                </div>
                                <button onClick={() => changeModalDate(1)} disabled={modalDate === todayStr} className="p-2.5 text-slate-400 hover:text-[#145C33] hover:bg-emerald-50 rounded-xl transition disabled:opacity-30">
                                    <ChevronRight size={20} />
                                </button>
                            </div>

                            {/* Ringkasan Makro Pasien BERDASARKAN TANGGAL */}
                            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                                <div className="bg-white rounded-2xl p-4 border border-slate-200 shadow-sm">
                                    <div className="flex items-center gap-2 mb-2">
                                        <div className="p-1.5 bg-blue-50 text-blue-500 rounded-lg"><Droplet size={16}/></div>
                                        <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Natrium</p>
                                    </div>
                                    <p className={`text-xl font-black ${modalSodium > 2000 ? 'text-red-500' : 'text-slate-800'}`}>{modalSodium} <span className="text-[10px] text-slate-400 font-semibold">mg</span></p>
                                </div>
                                <div className="bg-white rounded-2xl p-4 border border-slate-200 shadow-sm">
                                    <div className="flex items-center gap-2 mb-2">
                                        <div className="p-1.5 bg-orange-50 text-[#EA580C] rounded-lg"><Flame size={16}/></div>
                                        <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Kalori</p>
                                    </div>
                                    <p className="text-xl font-black text-slate-800">{modalKalori} <span className="text-[10px] text-slate-400 font-semibold">Kkal</span></p>
                                </div>
                                <div className="bg-white rounded-2xl p-4 border border-slate-200 shadow-sm">
                                    <div className="flex items-center gap-2 mb-2">
                                        <div className="p-1.5 bg-rose-50 text-rose-500 rounded-lg"><Beef size={16}/></div>
                                        <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Protein</p>
                                    </div>
                                    <p className="text-xl font-black text-slate-800">{modalProtein} <span className="text-[10px] text-slate-400 font-semibold">g</span></p>
                                </div>
                                <div className="bg-white rounded-2xl p-4 border border-slate-200 shadow-sm">
                                    <div className="flex items-center gap-2 mb-2">
                                        <div className="p-1.5 bg-amber-50 text-amber-500 rounded-lg"><Wheat size={16}/></div>
                                        <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Karbo</p>
                                    </div>
                                    <p className="text-xl font-black text-slate-800">{modalKarbo} <span className="text-[10px] text-slate-400 font-semibold">g</span></p>
                                </div>
                            </div>

                            {/* Daftar Makanan Pasien BERDASARKAN TANGGAL */}
                            <div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
                                <div className="px-5 py-4 border-b border-slate-100 bg-slate-50 flex items-center justify-between">
                                    <h4 className="font-bold text-slate-800 text-sm flex items-center gap-2">
                                        <Utensils size={16} className="text-[#145C33]"/> Rincian Makanan
                                    </h4>
                                </div>

                                <div className="divide-y divide-slate-100">
                                    {(!filteredModalMeals || filteredModalMeals.length === 0) ? (
                                         <div className="px-5 py-12 text-center text-slate-400">
                                            <p className="font-medium text-sm">Pasien tidak mencatat asupan makanan pada tanggal ini.</p>
                                         </div>
                                    ) : (
                                        filteredModalMeals.map((food) => (
                                            <div key={food.id} className="p-5 flex flex-col sm:flex-row sm:items-center justify-between gap-4 hover:bg-slate-50 transition-colors">
                                                <div className="flex items-start gap-4">
                                                    <div className={`px-2.5 py-1 rounded-md text-[10px] font-black uppercase tracking-wider shrink-0 mt-0.5 ${
                                                        food.waktu === 'pagi' ? 'bg-amber-50 text-amber-700 border border-amber-100' :
                                                        food.waktu === 'snack_pagi' || food.waktu === 'snack_sore' ? 'bg-lime-50 text-lime-700 border border-lime-100' :
                                                        food.waktu === 'siang' ? 'bg-orange-50 text-[#EA580C] border border-orange-100' :
                                                        'bg-indigo-50 text-indigo-700 border border-indigo-100'
                                                    }`}>
                                                        {formatWaktu(food.waktu)}
                                                    </div>
                                                    <div>
                                                        <p className="font-bold text-slate-800 text-sm">{food.nama_makanan}</p>
                                                        <p className="text-xs font-semibold text-slate-500 mt-0.5">{food.porsi}</p>
                                                    </div>
                                                </div>

                                                <div className="flex items-center gap-4 sm:gap-6 bg-slate-50 sm:bg-transparent p-3 sm:p-0 rounded-xl">
                                                    <div className="text-right">
                                                        <p className="text-[10px] font-bold text-slate-400 uppercase">Natrium</p>
                                                        <p className="font-black text-blue-600 text-sm">{food.natrium} <span className="text-[10px] text-blue-400 font-medium">mg</span></p>
                                                    </div>
                                                    <div className="w-px h-8 bg-slate-200 hidden sm:block"></div>
                                                    <div className="text-right">
                                                        <p className="text-[10px] font-bold text-slate-400 uppercase">Kalori</p>
                                                        <p className="font-black text-[#EA580C] text-sm">{food.kalori} <span className="text-[10px] text-orange-400 font-medium">Kkal</span></p>
                                                    </div>
                                                </div>
                                            </div>
                                        ))
                                    )}
                                </div>
                            </div>

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