// components/layouts/MainLayout/index.jsx
import { useState } from 'react';
import { useLocation } from 'react-router-dom';
import {
    Navbar,
    Sidebar,
    Tabbar,
    TabbarItem,
    UpperNavbarItem
} from '@cap-rel/smartcommon';
import { useNavigation, useGlobalStates, useApi } from '@cap-rel/smartcommon';
import {
    FiMenu,
    FiHome,
    FiList,
    FiPlus,
    FiSettings,
    FiLogOut
} from 'react-icons/fi';

export const MainLayout = ({ children, title }) => {
    const [sidebarOpen, setSidebarOpen] = useState(false);
    const navigate = useNavigation();
    const location = useLocation();
    const api = useApi();
    const [session] = useGlobalStates('session');

    const handleLogout = async () => {
        await api.logout();
        navigate('/login');
    };

    return (
        <div className="min-h-screen flex flex-col">
            {/* Navbar */}
            <Navbar title={title}>
                <UpperNavbarItem
                    icon={FiMenu}
                    onClick={() => setSidebarOpen(true)}
                />
            </Navbar>

            {/* Sidebar */}
            <Sidebar
                isOpen={sidebarOpen}
                onClose={() => setSidebarOpen(false)}
            >
                <div className="p-4 border-b">
                    <p className="font-bold">{session?.user?.name}</p>
                </div>

                <nav className="flex-1 p-2">
                    <SidebarLink
                        icon={FiHome}
                        label="Accueil"
                        onClick={() => {
                            navigate('/');
                            setSidebarOpen(false);
                        }}
                    />
                    <SidebarLink
                        icon={FiList}
                        label="Produits"
                        onClick={() => {
                            navigate('/products');
                            setSidebarOpen(false);
                        }}
                    />
                    <SidebarLink
                        icon={FiSettings}
                        label="Paramètres"
                        onClick={() => {
                            navigate('/settings');
                            setSidebarOpen(false);
                        }}
                    />
                </nav>

                <div className="p-4 border-t">
                    <button
                        onClick={handleLogout}
                        className="flex items-center gap-2 text-red-500"
                    >
                        <FiLogOut /> Déconnexion
                    </button>
                </div>
            </Sidebar>

            {/* Contenu principal */}
            <main className="flex-1 pb-16">
                {children}
            </main>

            {/* Tabbar */}
            <Tabbar>
                <TabbarItem
                    icon={FiHome}
                    label="Accueil"
                    active={location.pathname === '/'}
                    onClick={() => navigate('/')}
                />
                <TabbarItem
                    icon={FiList}
                    label="Produits"
                    active={location.pathname.startsWith('/products')}
                    onClick={() => navigate('/products')}
                />
                <TabbarItem
                    icon={FiPlus}
                    label="Nouveau"
                    onClick={() => navigate('/products/new')}
                />
                <TabbarItem
                    icon={FiSettings}
                    label="Paramètres"
                    active={location.pathname === '/settings'}
                    onClick={() => navigate('/settings')}
                />
            </Tabbar>
        </div>
    );
};

// Composant helper
const SidebarLink = ({ icon: Icon, label, onClick }) => (
    <button
        onClick={onClick}
        className="flex items-center gap-3 w-full p-3 rounded hover:bg-gray-100"
    >
        <Icon />
        {label}
    </button>
);