import { useState, useEffect } from 'react'
import { Outlet, NavLink, useLocation, useNavigate } from 'react-router-dom'
import styles from './Layout.module.css'

const navItems = [
    { path: '/', label: 'Bio', icon: 'fa-solid fa-user', end: true },
    { path: '/cardapio', label: 'Cardápio', icon: 'fa-solid fa-utensils', end: false },
    { path: '/karaoke', label: 'Karaokê', icon: 'fa-solid fa-microphone', end: false },
    { path: '/jogos', label: 'Jogos', icon: 'fa-solid fa-gamepad', end: false },
]

const pageTitles = {
    '/': 'Bio do Instagram',
    '/cardapio': 'Cardápio',
    '/karaoke': 'Karaokê',
    '/jogos': 'Jogos de Bar',
}

export default function Layout() {
    const [sidebarOpen, setSidebarOpen] = useState(false)
    const location = useLocation()
    const navigate = useNavigate()

    const title = pageTitles[location.pathname] ?? 'Raul Rock Bar'

    // Fecha sidebar ao mudar de rota
    useEffect(() => {
        setSidebarOpen(false)
    }, [location.pathname])

    // Fecha sidebar ao clicar fora (escape)
    useEffect(() => {
        const handleKey = (e) => { if (e.key === 'Escape') setSidebarOpen(false) }
        window.addEventListener('keydown', handleKey)
        return () => window.removeEventListener('keydown', handleKey)
    }, [])

    return (
        <div className={styles.app}>
            {/* ── Header ─────────────────────────────── */}
            <header className={styles.header}>
                <div className={styles.headerInner}>
                    <div className={styles.headerLeft}>
                        <button
                            className={styles.menuBtn}
                            onClick={() => setSidebarOpen(v => !v)}
                            aria-label="Abrir menu"
                        >
                            <i className={`fa-solid ${sidebarOpen ? 'fa-xmark' : 'fa-bars'}`} />
                        </button>
                        <img
                            src="https://files.menudino.com/cardapios/53448/logo.png"
                            alt="Logo"
                            className={styles.headerLogo}
                            onClick={() => navigate('/')}
                        />
                        <span className={styles.headerTitle}>{title}</span>
                    </div>
                </div>
            </header>

            {/* ── Sidebar ─────────────────────────────── */}
            <>
                <div
                    className={`${styles.overlay} ${sidebarOpen ? styles.overlayVisible : ''}`}
                    onClick={() => setSidebarOpen(false)}
                />
                <aside className={`${styles.sidebar} ${sidebarOpen ? styles.sidebarOpen : ''}`}>
                    <div className={styles.sidebarHeader}>
                        <img
                            src="https://files.menudino.com/cardapios/53448/logo.png"
                            alt="Logo"
                            className={styles.sidebarLogo}
                        />
                        <p className={styles.sidebarBrand}>Raul Rock Bar<br /><span>& Café</span></p>
                    </div>

                    <nav className={styles.sidebarNav}>
                        <p className={styles.sidebarSection}>Menu</p>
                        {navItems.map(item => (
                            <NavLink
                                key={item.path}
                                to={item.path}
                                end={item.end}
                                className={({ isActive }) =>
                                    `${styles.navLink} ${isActive ? styles.navLinkActive : ''}`
                                }
                            >
                                <i className={item.icon} />
                                {item.label}
                            </NavLink>
                        ))}
                    </nav>

                    <div className={styles.sidebarFooter}>
                        <p>© 2025 Raul Rock Bar & Café</p>
                    </div>
                </aside>
            </>

            {/* ── Conteúdo principal ──────────────────── */}
            <main className={styles.main}>
                <Outlet />
            </main>

            {/* ── Bottom Nav (mobile) ─────────────────── */}
            <nav className={styles.bottomNav}>
                {navItems.map(item => (
                    <NavLink
                        key={item.path}
                        to={item.path}
                        end={item.end}
                        className={({ isActive }) =>
                            `${styles.bottomNavItem} ${isActive ? styles.bottomNavActive : ''}`
                        }
                    >
                        <i className={item.icon} />
                        <span>{item.label}</span>
                    </NavLink>
                ))}
            </nav>
        </div>
    )
}
