import React from 'react';
import { useAuth } from '../auth/AuthProvider';

// ─── SVG Icon components ──────────────────────────────────────────────────────
const Icons = {
    dashboard: (
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
            <rect x="2" y="2" width="7" height="8" rx="1.5" />
            <rect x="11" y="2" width="7" height="5" rx="1.5" />
            <rect x="2" y="12" width="7" height="6" rx="1.5" />
            <rect x="11" y="9" width="7" height="9" rx="1.5" />
        </svg>
    ),
    clients: (
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
            <circle cx="7" cy="6" r="3" />
            <circle cx="14" cy="7" r="2.5" />
            <path d="M1.5 17c0-3 2.5-5 5.5-5s5.5 2 5.5 5" />
            <path d="M12.5 12c1.5 0 4 1 4 3.5" />
        </svg>
    ),
    campaigns: (
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
            <path d="M16 3L8 7H4a1 1 0 00-1 1v4a1 1 0 001 1h1l2 4h2l-2-4h1l8 4V3z" />
            <path d="M16 3v14" />
        </svg>
    ),
    config: (
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
            <path d="M3 5h14M3 10h14M3 15h14" />
            <circle cx="7" cy="5" r="1.5" fill="currentColor" />
            <circle cx="13" cy="10" r="1.5" fill="currentColor" />
            <circle cx="9" cy="15" r="1.5" fill="currentColor" />
        </svg>
    ),
    intelligence: (
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
            <path d="M3 16L7 8l4 5 3-7 3 10" />
            <circle cx="7" cy="8" r="1.5" fill="currentColor" />
            <circle cx="11" cy="13" r="1.5" fill="currentColor" />
            <circle cx="14" cy="6" r="1.5" fill="currentColor" />
        </svg>
    ),
    billing: (
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
            <rect x="2" y="4" width="16" height="12" rx="2" />
            <path d="M2 8h16" />
            <path d="M6 12h3" />
        </svg>
    ),
    settings: (
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
            <circle cx="10" cy="10" r="2.5" />
            <path d="M10 2v2.5M10 15.5V18M18 10h-2.5M4.5 10H2M15.66 4.34l-1.77 1.77M6.11 13.89l-1.77 1.77M15.66 15.66l-1.77-1.77M6.11 6.11L4.34 4.34" />
        </svg>
    ),
    documents: (
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
            <path d="M11.5 2H5a1.5 1.5 0 00-1.5 1.5v13A1.5 1.5 0 005 18h10a1.5 1.5 0 001.5-1.5V7z" />
            <path d="M11.5 2v5H17" />
            <line x1="6.5" y1="11" x2="13.5" y2="11" />
            <line x1="6.5" y1="14" x2="13.5" y2="14" />
        </svg>
    ),
    chevron: (
        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
            <path d="M5 3l4 4-4 4" />
        </svg>
    ),
};

// ─── Navigation structure ─────────────────────────────────────────────────────
// Each item maps to a category in the sidebar. Tabs within each category
// are defined in AdminContext.jsx (CATEGORY_TABS).
export const NAV_ITEMS = [
    { id: 'dashboard',    label: 'Dashboard',      icon: 'dashboard' },
    { id: 'clients',      label: 'Clients',         icon: 'clients',    badge: null },
    { id: 'campaigns',    label: 'Campaigns',        icon: 'campaigns' },
    { id: 'intelligence', label: 'Intelligence',     icon: 'intelligence' },
    { id: 'config',       label: 'Configuration',    icon: 'config' },
    { id: 'documents',    label: 'Documents',        icon: 'documents' },
    { divider: true },
    { id: 'billing',    label: 'Billing',         icon: 'billing',   disabled: true },
    { id: 'settings',   label: 'Settings',        icon: 'settings',  disabled: true },
];

export default function Sidebar({ activeCategory, onSelectCategory, collapsed, onToggleCollapse }) {
    const { user, signOut } = useAuth();

    return (
        <aside className={`sidebar ${collapsed ? 'sidebar-collapsed' : ''}`}>
            {/* Logo */}
            <div className="sidebar-logo">
                <span className="sidebar-logo-icon">◆</span>
                {!collapsed && (
                    <>
                        <span className="sidebar-logo-text">AdPlatform</span>
                        <span className="sidebar-logo-badge">Mgmt</span>
                    </>
                )}
            </div>

            {/* Nav items */}
            <nav className="sidebar-nav">
                {NAV_ITEMS.map((item, i) => {
                    if (item.divider) {
                        return <div key={`d-${i}`} className="sidebar-divider" />;
                    }

                    const isActive = activeCategory === item.id;
                    const isDisabled = item.disabled;

                    return (
                        <button
                            key={item.id}
                            className={`sidebar-item ${isActive ? 'sidebar-item-active' : ''} ${isDisabled ? 'sidebar-item-disabled' : ''}`}
                            onClick={() => !isDisabled && onSelectCategory(item.id)}
                            title={collapsed ? item.label : undefined}
                        >
                            <span className="sidebar-item-icon">{Icons[item.icon]}</span>
                            {!collapsed && (
                                <>
                                    <span className="sidebar-item-label">{item.label}</span>
                                    {item.badge != null && (
                                        <span className="sidebar-badge">{item.badge}</span>
                                    )}
                                    {isDisabled && (
                                        <span className="sidebar-soon">Soon</span>
                                    )}
                                </>
                            )}
                        </button>
                    );
                })}
            </nav>

            {/* Footer: user + collapse */}
            <div className="sidebar-footer">
                {!collapsed && user && (
                    <div className="sidebar-user">
                        <div className="sidebar-user-avatar">
                            {(user.name || user.email || '?')[0].toUpperCase()}
                        </div>
                        <div className="sidebar-user-info">
                            <span className="sidebar-user-name">{user.name || user.email}</span>
                            <button onClick={signOut} className="sidebar-user-signout">Sign Out</button>
                        </div>
                    </div>
                )}
                {collapsed && user && (
                    <div className="sidebar-user-collapsed" title={user.name || user.email}>
                        <div className="sidebar-user-avatar">
                            {(user.name || user.email || '?')[0].toUpperCase()}
                        </div>
                    </div>
                )}
                <button
                    className="sidebar-collapse-btn"
                    onClick={onToggleCollapse}
                    title={collapsed ? 'Expand' : 'Collapse'}
                >
                    <span className={`sidebar-collapse-icon ${collapsed ? '' : 'sidebar-collapse-icon-flip'}`}>
                        {Icons.chevron}
                    </span>
                    {!collapsed && <span>Collapse</span>}
                </button>
            </div>
        </aside>
    );
}
