import { Link, usePage } from '@inertiajs/react';
import { useState } from 'react';

export default function MainLayout({ children }) {
    const [sidebarOpen, setSidebarOpen] = useState(true);
    const { url } = usePage();

    const menus = [
        { name: 'Dashboard',   href: '/',            icon: '🏠' },
        { name: 'Buku',        href: '/buku',        icon: '📚' },
        { name: 'Kategori',    href: '/kategori',    icon: '🏷️' },
        { name: 'Anggota',     href: '/anggota',     icon: '👥' },
        { name: 'Peminjaman',  href: '/peminjaman',  icon: '📋' },
    ];

    return (
        <div className="flex h-screen bg-gray-100">
            {/* Sidebar */}
            <aside className={`${sidebarOpen ? 'w-64' : 'w-16'} bg-indigo-800 text-white transition-all duration-300 flex flex-col`}>
                <div className="flex items-center justify-between p-4 border-b border-indigo-700">
                    {sidebarOpen && (
                        <h1 className="text-xl font-bold">📖 Perpustakaanku</h1>
                    )}
                    <button
                        onClick={() => setSidebarOpen(!sidebarOpen)}
                        className="p-1 rounded hover:bg-indigo-700"
                    >
                        {sidebarOpen ? '◀' : '▶'}
                    </button>
                </div>
                <nav className="flex-1 p-2 space-y-1">
                    {menus.map((menu) => (
                        <Link
                            key={menu.href}
                            href={menu.href}
                            className={`flex items-center gap-3 px-3 py-2 rounded-lg transition-colors ${
                                url === menu.href
                                    ? 'bg-indigo-600 text-white'
                                    : 'hover:bg-indigo-700 text-indigo-200'
                            }`}
                        >
                            <span className="text-xl">{menu.icon}</span>
                            {sidebarOpen && <span className="font-medium">{menu.name}</span>}
                        </Link>
                    ))}
                </nav>
            </aside>

            {/* Main Content */}
            <div className="flex-1 flex flex-col overflow-hidden">
                {/* Header */}
                <header className="bg-white shadow-sm px-6 py-4 flex items-center justify-between">
                    <h2 className="text-lg font-semibold text-gray-700">Sistem Perpustakaanku</h2>
                    <span className="text-sm text-gray-500">📅 {new Date().toLocaleDateString('id-ID', {
                        weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'
                    })}</span>
                </header>

                {/* Flash Message */}
                <FlashMessage />

                {/* Content */}
                <main className="flex-1 overflow-y-auto p-6">
                    {children}
                </main>
            </div>
        </div>
    );
}

function FlashMessage() {
    const { flash } = usePage().props;
    if (!flash?.success) return null;

    return (
        <div className="mx-6 mt-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg flex items-center gap-2">
            <span>✅</span>
            <span>{flash.success}</span>
        </div>
    );
}