"use client";

import { Sidebar } from "./Sidebar";
import { usePathname } from "next/navigation";
import { LuMenu, LuPanelLeftClose, LuPanelLeftOpen } from "react-icons/lu";
import { useState } from "react";
import { ThemeToggle } from "@/components/ui/ThemeToggle";

export function AppLayout({ children }: { children: React.ReactNode }) {
    const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
    const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
    const pathname = usePathname();

    // Títulos de cabecera según ruta
    const getHeaderTitle = () => {
        if (pathname.includes("/dashboard")) return "Dashboard";
        if (pathname.includes("/upload")) return "Escanear Documento";
        if (pathname.includes("/categories")) return "Categorías";
        if (pathname.includes("/employees")) return "Empleados";
        return "OCR Docs";
    };

    return (
        <div className="flex h-screen bg-[var(--color-background-subtle)]">
            {/* Desktop Sidebar */}
            <div
                className={`hidden lg:block h-full shrink-0 transition-[width] duration-300 ${isSidebarCollapsed ? "w-[72px]" : "w-[240px]"}`}
            >
                <Sidebar collapsed={isSidebarCollapsed} />
            </div>

            {/* Mobile Menu Overlay */}
            {isMobileMenuOpen && (
                <div className="fixed inset-0 z-50 lg:hidden">
                    <div
                        className="absolute inset-0 bg-black/50 backdrop-blur-sm"
                        onClick={() => setIsMobileMenuOpen(false)}
                    />
                    <div className="absolute left-0 top-0 h-full w-64">
                        <Sidebar />
                    </div>
                </div>
            )}

            {/* Main Content Area */}
            <div className="flex-1 flex flex-col min-w-0 bg-[var(--color-background)] overflow-hidden relative">
                {/* Header (mobile + desktop) */}
                <div className="flex items-center justify-between px-4 py-3 border-b border-border-subtle bg-[var(--color-background)]">
                    <div className="flex items-center gap-3 min-w-0">
                        <button
                            className="lg:hidden p-2 -ml-2 rounded-lg hover:bg-[var(--color-background-alt)] focus-ring"
                            onClick={() => setIsMobileMenuOpen(true)}
                            aria-label="Abrir menú"
                            title="Abrir menú"
                        >
                            <LuMenu className="h-6 w-6 text-text" />
                        </button>

                        <button
                            className="hidden lg:inline-flex p-2 -ml-2 rounded-lg hover:bg-[var(--color-background-alt)] focus-ring"
                            onClick={() => setIsSidebarCollapsed((v) => !v)}
                            aria-label={isSidebarCollapsed ? "Expandir menú" : "Colapsar menú"}
                            title={isSidebarCollapsed ? "Expandir menú" : "Colapsar menú"}
                        >
                            {isSidebarCollapsed ? (
                                <LuPanelLeftOpen className="h-5 w-5 text-text" />
                            ) : (
                                <LuPanelLeftClose className="h-5 w-5 text-text" />
                            )}
                        </button>

                        <span className="font-bold text-lg text-text truncate">{getHeaderTitle()}</span>
                    </div>
                    
                    <div className="flex items-center gap-2">
                        <ThemeToggle />
                    </div>
                </div>

                {/* Scrollable Content */}
                <main className="flex-1 overflow-y-auto bg-[var(--color-background-subtle)]">
                    {children}
                </main>
            </div>
        </div>
    );
}