import { Link, usePage } from '@inertiajs/react';
import { useState } from 'react';
import {
    Activity, ClipboardCheck, Home, User, LogOut, Plus, Bell
} from 'lucide-react';

export default function AuthenticatedLayout({ header, children }) {
    // PENGAMAN: Gunakan optional chaining agar tidak error blank screen
    const { auth } = usePage().props;
    const user = auth?.user || { name: 'Pengguna' };

    const [showProfileMenu, setShowProfileMenu] = useState(false);

    return (
        <div className="min-h-screen bg-[#F8FBF8] font-sans text-slate-800 pb-24 md:pb-0 relative">

            {/* --- NAVBAR ATAS (Desktop) --- */}
            <nav className="fixed top-0 w-full bg-[#F8FBF8]/90 backdrop-blur-md z-50 py-4 border-b border-[#E5EFE9]">
                <div className="max-w-7xl mx-auto px-6 lg:px-8">
                    <div className="flex justify-between items-center">

                        {/* Logo */}
                        <div className="flex-shrink-0 flex items-center gap-2">
                            <div className="w-8 h-8 rounded-xl bg-gradient-to-br from-[#EA580C] to-[#145C33] flex items-center justify-center text-white font-bold">
                                H
                            </div>
                            <span className="font-bold text-xl text-emerald-900 tracking-tight hidden sm:block">HiperDiet</span>
                        </div>

                        {/* Center Menu (Desktop Saja) */}
                        <div className="hidden md:flex space-x-8 items-center">
                            <Link href={route('dashboard')} className={`text-sm font-semibold transition ${route().current('dashboard') ? 'text-[#EA580C] border-b-2 border-[#EA580C] pb-1 font-bold' : 'text-slate-500 hover:text-[#EA580C]'}`}>
                                Beranda
                            </Link>
                            <Link href={route('input.asupan')} className={`text-sm font-semibold transition ${route().current('input.asupan') ? 'text-[#EA580C] border-b-2 border-[#EA580C] pb-1 font-bold' : 'text-slate-500 hover:text-[#EA580C]'}`}>
                                Riwayat Makan
                            </Link>
                            <Link href={route('kuis')} className={`text-sm font-semibold transition ${route().current('kuis') ? 'text-[#EA580C] border-b-2 border-[#EA580C] pb-1 font-bold' : 'text-slate-500 hover:text-[#EA580C]'}`}>
                                Kuis Kepatuhan
                            </Link>
                        </div>

                        {/* Profil Menu */}
                        <div className="relative flex items-center gap-3">
                            <button className="hidden sm:block p-2 text-slate-400 hover:text-slate-600 bg-slate-50 rounded-full">
                                <Bell size={20}/>
                            </button>

                            <button
                                onClick={() => setShowProfileMenu(!showProfileMenu)}
                                className="flex items-center gap-3 bg-white border border-[#E5EFE9] pl-3 pr-4 py-2 rounded-full hover:shadow-md transition"
                            >
                                <div className="w-8 h-8 bg-[#145C33] text-white rounded-full flex items-center justify-center font-bold text-sm">
                                    {user.name.charAt(0)}
                                </div>
                                <span className="text-sm font-bold text-slate-700 hidden sm:block">{user.name}</span>
                            </button>

                            {/* Dropdown Logout */}
                            {showProfileMenu && (
                                <div className="absolute right-0 top-12 mt-2 w-48 bg-white rounded-2xl shadow-xl border border-slate-100 py-2 z-50">
                                    <Link href={route('profile.edit')} className="flex items-center gap-2 px-4 py-2 text-sm text-slate-700 hover:bg-slate-50 hover:text-[#145C33]">
                                        <User size={16} /> Profil Saya
                                    </Link>
                                    <Link href={route('logout')} method="post" as="button" className="flex w-full items-center gap-2 px-4 py-2 text-sm text-red-600 hover:bg-red-50">
                                        <LogOut size={16} /> Keluar
                                    </Link>
                                </div>
                            )}
                        </div>
                    </div>
                </div>
            </nav>

            {/* --- BOTTOM NAVIGATION BAR (Khusus Mobile) --- */}
            <div className="md:hidden fixed bottom-0 w-full bg-white rounded-t-3xl shadow-[0_-10px_40px_rgba(0,0,0,0.08)] z-50 px-6 py-3 pb-safe border-t border-slate-100">
                <div className="flex justify-between items-center text-[10px] font-bold text-slate-400 relative">

                    <Link href={route('dashboard')} className={`flex flex-col items-center gap-1 w-12 ${route().current('dashboard') ? 'text-[#145C33]' : 'hover:text-[#145C33] transition-colors'}`}>
                        <Home size={24} className={route().current('dashboard') ? 'fill-[#145C33]/20' : ''} />
                        <span>Home</span>
                    </Link>

                    <Link href={route('input.asupan')} className={`flex flex-col items-center gap-1 w-12 mr-6 ${route().current('input.asupan') ? 'text-[#145C33]' : 'hover:text-[#145C33] transition-colors'}`}>
                        <Activity size={24} className={route().current('input.asupan') ? 'fill-[#145C33]/20' : ''} />
                        <span>Riwayat</span>
                    </Link>

                    <div className="absolute left-1/2 -translate-x-1/2 -top-6">
                        <Link href={route('input.asupan')} className="bg-gradient-to-br from-[#EA580C] to-[#c24100] text-white w-14 h-14 rounded-full flex items-center justify-center shadow-lg shadow-orange-500/30 transform hover:-translate-y-1 transition border-4 border-[#F8FBF8]">
                            <Plus size={28} />
                        </Link>
                    </div>

                    <Link href={route('kuis')} className={`flex flex-col items-center gap-1 w-12 ml-6 ${route().current('kuis') ? 'text-[#145C33]' : 'hover:text-[#145C33] transition-colors'}`}>
                        <ClipboardCheck size={24} className={route().current('kuis') ? 'fill-[#145C33]/20' : ''} />
                        <span>Kuis</span>
                    </Link>

                    {/* Jika menu profil aktif, beri warna hijau */}
                    <Link href={route('profile.edit')} className={`flex flex-col items-center gap-1 w-12 ${route().current('profile.edit') ? 'text-[#145C33]' : 'hover:text-[#145C33] transition-colors'}`}>
                        <User size={24} className={route().current('profile.edit') ? 'fill-[#145C33]/20' : ''} />
                        <span>Profil</span>
                    </Link>
                </div>
            </div>

            {/* --- KONTEN UTAMA --- */}
            {/* Jarak atas (pt-28 md:pt-32) ditambahkan agar tidak tertutup oleh fixed navbar */}
            <main className="pt-28 md:pt-32 max-w-7xl mx-auto px-6 lg:px-8 space-y-8">

                {/* Render Header Prop dari Breeze (jika ada) dan perbaiki stylingnya */}
                {header && (
                    <div className="mb-8">
                        <h2 className="text-3xl font-extrabold text-slate-900 leading-tight tracking-tight">
                            {header}
                        </h2>
                    </div>
                )}

                {/* Render konten komponen anak (seperti Profile/Edit.jsx) */}
                {children}

            </main>
        </div>
    );
}
