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 && !flash?.error) return null;

    return (
        <div className="mx-6 mt-4 space-y-2">
            {flash?.success && (
                <div className="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>
            )}
            {flash?.error && (
                <div className="p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg flex items-center gap-2">
                    <span>❌</span>
                    <span>{flash.error}</span>
                </div>
            )}
        </div>
    );
}