import React from 'react';
import { Toaster } from 'sonner';
import { Head, Link, usePage } from '@inertiajs/react';
import { LogOut, Home, CalendarClock, User, Menu } from 'lucide-react';

interface EmployeeLayoutProps {
    children: React.ReactNode;
    title?: string;
}

export default function EmployeeLayout({ children, title }: EmployeeLayoutProps) {
    const user = (usePage<any>().props.auth as any).user;
    
    return (
        <div className="min-h-screen bg-slate-50 font-sans text-slate-900 pb-20 md:pb-0">
            {title && <Head title={title} />}
            <Toaster position="top-center" richColors />
            
            <nav className="hidden md:block bg-white border-b border-slate-200 sticky top-0 z-50 shadow-sm">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="flex justify-between items-center h-16">
                        <div className="flex items-center gap-8">
                            <div className="flex-shrink-0 flex items-center gap-3">
                                <img src="/assets/logo-clear.png" alt="Logo" className="h-8 w-auto object-contain" onError={(e) => { e.currentTarget.style.display='none'; }} />
                                <span className="font-bold text-xl text-sky-800 tracking-tight hidden lg:block">HRIS Portal</span>
                            </div>
                            <div className="flex space-x-1">
                                <Link href="/employee/index" className="px-3 py-2 rounded-md text-sm font-medium text-slate-600 hover:text-sky-600 hover:bg-sky-50 transition-colors flex items-center gap-2">
                                    <Home className="w-4 h-4" /> Beranda
                                </Link>
                                <Link href="/employee/attendances" className="px-3 py-2 rounded-md text-sm font-medium text-slate-600 hover:text-sky-600 hover:bg-sky-50 transition-colors flex items-center gap-2">
                                    <CalendarClock className="w-4 h-4" /> Absensi
                                </Link>
                            </div>
                        </div>
                        <div className="flex items-center gap-4">
                            <div className="text-sm font-medium text-slate-700 hidden sm:block">
                                Halo, {user.name}
                            </div>
                            <Link href="/logout" method="post" as="button" className="p-2 text-slate-500 hover:text-red-600 transition-colors rounded-full hover:bg-slate-100">
                                <LogOut className="w-5 h-5" />
                            </Link>
                        </div>
                    </div>
                </div>
            </nav>

            <header className="md:hidden bg-white border-b border-slate-200 sticky top-0 z-40 px-4 h-14 flex items-center justify-between">
                <img src="/assets/logo-clear.png" alt="Logo" className="h-7 w-auto object-contain" onError={(e) => { e.currentTarget.style.display='none'; }} />
                <div className="font-semibold text-slate-800 text-sm">HRIS Portal</div>
                <div className="w-7 h-7"></div>
            </header>

            <main className="w-full relative">
                {children}
            </main>

            <nav className="md:hidden fixed bottom-0 left-0 right-0 z-50 bg-white border-t border-slate-200 px-6 py-2 flex justify-between items-center pb-safe shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.05)]">
                <Link href="/employee/index" className="flex flex-col items-center gap-1 text-slate-400 hover:text-sky-500 focus:text-sky-500 transition-colors p-1">
                    <Home className="w-5 h-5" />
                    <span className="text-[10px] font-medium">Beranda</span>
                </Link>
                <Link href="/employee/attendances" className="flex flex-col items-center gap-1 text-slate-400 hover:text-sky-500 focus:text-sky-500 transition-colors p-1">
                    <CalendarClock className="w-5 h-5" />
                    <span className="text-[10px] font-medium">Absensi</span>
                </Link>
                <Link href="/profile" className="flex flex-col items-center gap-1 text-slate-400 hover:text-sky-500 focus:text-sky-500 transition-colors p-1">
                    <User className="w-5 h-5" />
                    <span className="text-[10px] font-medium">Profil</span>
                </Link>
                <Link href="/logout" method="post" as="button" className="flex flex-col items-center gap-1 text-slate-400 hover:text-red-500 focus:text-red-500 transition-colors p-1">
                    <LogOut className="w-5 h-5" />
                    <span className="text-[10px] font-medium">Keluar</span>
                </Link>
            </nav>
        </div>
    );
}
