import { Icon } from '@/Components/AppUi';
import PeopleBanner from '@/Components/PeopleVisuals';
import { Link, usePage } from '@inertiajs/react';
import { PropsWithChildren, ReactNode, useState } from 'react';

export default function Authenticated({ header, children }: PropsWithChildren<{ header?: ReactNode }>) {
    const page = usePage();
    const { auth, flash, workspace } = page.props;
    const [open, setOpen] = useState(false);
    const isAdmin = usePage().url.startsWith('/admin');
    const nav = [
        ['dashboard', 'Vue d’ensemble', 'grid'], ['workspace.debtors', 'Mes clients', 'users'],
        ['workspace.receivables', 'Créances', 'file'], ['workspace.repayments', 'Remboursements', 'wallet'],
        ['workspace.reminders', 'Relances', 'bell'], ['workspace.reports', 'Rapports', 'chart'],
        ['workspace.subscription', 'Abonnement', 'wallet'],
        ['operations.index', 'Notifications & aide', 'bell'],
    ];
    if (workspace?.role === 'owner') nav.push(['workspace.team', 'Mon équipe', 'users']);
    return <div className="app-shell">
        {open && <button className="sidebar-overlay" aria-label="Fermer le menu" onClick={() => setOpen(false)} />}
        <aside className={'app-sidebar ' + (open ? 'is-open' : '')}>
            <Link href={route('dashboard')} className="app-brand"><span className="brand-mark">C</span><span>Créance<span className="brand-accent">Pro</span><small>Votre commerce, en confiance.</small></span></Link>
            <div className="sidebar-rule" />
            <p className="nav-caption">ESPACE COMMERÇANT</p>
            <nav aria-label="Navigation du commerce">{nav.map(([name, label, icon]) => <Link key={name} href={route(name)} onClick={() => setOpen(false)} className={'sidebar-link ' + (route().current(name) ? 'selected' : '')}><span className="nav-icon"><Icon name={icon} size={18} /></span>{label}</Link>)}</nav>
            <p className="nav-caption mt-7">MON COMPTE</p>
            <Link href={route('profile.edit')} className={'sidebar-link ' + (route().current('profile.*') ? 'selected' : '')}><span className="nav-icon"><Icon name="settings" size={18} /></span>Paramètres</Link>
            <Link href={route('installation')} className="sidebar-link"><span className="nav-icon"><Icon name="grid" size={18} /></span>Installer l’application</Link>
            {auth.user.is_superadmin && <Link href={route('admin.index')} className={'sidebar-link ' + (isAdmin ? 'selected' : '')}><span className="nav-icon"><Icon name="shield" size={18} /></span>Superadministration</Link>}
            <div className="sidebar-bottom"><div className="sidebar-tip"><Icon name="shield" size={22} /><strong>Vos données, votre espace.</strong><p>Les accès à votre commerce sont contrôlés côté serveur.</p></div><Link href={route('logout')} method="post" as="button" className="logout-button">Se déconnecter</Link></div>
        </aside>
        <div className="app-main"><div className="app-blue-band" />
            <header className="app-topbar"><div className="flex items-center gap-3"><button onClick={() => setOpen(!open)} aria-label="Ouvrir le menu" aria-expanded={open} className="mobile-menu"><Icon name="menu" /></button><div><p className="breadcrumb">{isAdmin ? 'Plateforme / Administration' : 'Mon commerce / Espace de gestion'}</p><p className="topbar-title">{isAdmin ? 'Superadministration' : workspace?.name ?? 'Mon compte'}</p></div></div><Link href={route('profile.edit')} className="user-pill"><span className="user-avatar">{auth.user.name.slice(0, 1).toUpperCase()}</span><span>{auth.user.name}</span></Link></header>
            <main className="app-content">{header && <div className="page-header">{header}</div>}{flash?.success && <div className="alert alert-success" role="status">{flash.success}</div>}{flash?.whatsappUrl && <div className="alert alert-success"><strong>Message préparé.</strong> Vous devez l’envoyer vous-même dans WhatsApp. <a className="underline" href={flash.whatsappUrl} target="_blank" rel="noreferrer">Ouvrir WhatsApp</a></div>}<PeopleBanner path={page.url} />{children}</main>
            <footer className="app-footer"><span>CréancePro · Gestion des créances en FCFA</span><span>Présentation inspirée d’Argon · Creative Tim</span></footer>
        </div>
    </div>;
}