const { NavLink } = ReactRouterDOM;

// SVG icon helpers (inlined, no Lucide dep needed)
const Icon = ({ d, size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
         strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{flexShrink:0}}>
        <path d={d}/>
    </svg>
);

const icons = {
    dashboard: "M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z M9 22V12h6v10",
    agenda:    "M8 6h13 M8 12h13 M8 18h13 M3 6h.01 M3 12h.01 M3 18h.01",
    tv:        "M20 7H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z M8 21h8 M12 17v4",
};

function Sidebar() {
    return (
        <aside className="sidebar">
            {/* Brand */}
            <div style={{ padding: '28px 20px 20px', borderBottom: '1px solid var(--border)' }}>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: '2px' }}>
                    <h1 style={{ fontFamily: 'var(--font-display)', color: 'var(--accent)', fontSize: '1.4rem', margin: 0, letterSpacing: '-0.02em' }}>
                        MAC
                    </h1>
                    <span style={{ color: 'var(--text-muted)', fontSize: '1.2rem', fontWeight: 700 }}>//</span>
                    <h1 style={{ fontFamily: 'var(--font-display)', color: 'var(--text-primary)', fontSize: '1.4rem', margin: 0, letterSpacing: '-0.02em' }}>
                        HADO
                    </h1>
                </div>
                <p style={{ color: 'var(--text-muted)', fontSize: '0.7rem', marginTop: '4px', fontFamily: 'var(--font-mono)', letterSpacing: '0.08em' }}>
                    SHOP SYSTEM v2
                </p>
            </div>

            {/* Nav */}
            <nav style={{ padding: '16px 12px', flex: 1, display: 'flex', flexDirection: 'column', gap: '2px' }}>
                <p className="section-label">Navegação</p>
                <NavLink to="/" className={({ isActive }) => `sidebar-link ${isActive ? 'active' : ''}`} end>
                    <Icon d={icons.dashboard} />
                    Dashboard
                </NavLink>
                <NavLink to="/agenda" className={({ isActive }) => `sidebar-link ${isActive ? 'active' : ''}`}>
                    <Icon d={icons.agenda} />
                    Agenda &amp; Status
                </NavLink>
                <NavLink to="/mechanics" className={({ isActive }) => `sidebar-link ${isActive ? 'active' : ''}`}>
                    <Icon d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
                    Mecânicos
                </NavLink>

                <div className="divider" style={{ margin: '12px 0' }} />
                <p className="section-label">Modos</p>
                <NavLink to="/tv-mode" className={({ isActive }) => `sidebar-link ${isActive ? 'active' : ''}`}>
                    <Icon d={icons.tv} />
                    TV Mode (Kanban)
                </NavLink>
            </nav>

            {/* User footer */}
            <div style={{ padding: '16px 20px', borderTop: '1px solid var(--border)' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
                    <div style={{
                        width: '34px', height: '34px', borderRadius: '50%',
                        background: 'var(--accent-glow)', border: '1px solid var(--accent-dim)',
                        display: 'flex', alignItems: 'center', justifyContent: 'center',
                        fontFamily: 'var(--font-display)', fontSize: '0.85rem', color: 'var(--accent)', fontWeight: 700
                    }}>N</div>
                    <div>
                        <p style={{ fontSize: '0.875rem', fontWeight: 600, margin: 0 }}>Nasser Fares</p>
                        <p style={{ fontSize: '0.7rem', color: 'var(--text-muted)', margin: 0, fontFamily: 'var(--font-mono)' }}>Proprietário</p>
                    </div>
                </div>
            </div>
        </aside>
    );
}

window.Sidebar = Sidebar;