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

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>
    ),
    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" />
        </svg>
    ),
    performance: (
        <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 8h16M6 12h3" />
        </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="M12 2H6a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V7z" />
            <path d="M12 2v5h5M7 11h6M7 14h4" />
        </svg>
    ),
    support: (
        <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="8" />
            <path d="M10 14v-1M10 10a2 2 0 10-2-2" />
            <circle cx="10" cy="14.5" r="0.5" fill="currentColor" />
        </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>
    ),
};

const NAV_ITEMS = [
    { id: 'dashboard',   label: 'Dashboard',   icon: 'dashboard' },
    { id: 'campaigns',   label: 'Campaigns',   icon: 'campaigns' },
    { id: 'performance', label: 'Performance', icon: 'performance' },
    { divider: true },
    { id: 'billing',     label: 'Billing',     icon: 'billing',   disabled: true },
    { id: 'documents',   label: 'Documents',   icon: 'documents' },
    { id: 'support',     label: 'Support',     icon: 'support' },
];

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

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

            {/* Client name badge */}
            {!collapsed && user?.clientName && (
                <div style={{
                    padding: '6px 16px 10px',
                    fontSize: 12,
                    color: 'var(--sidebar-muted, #94a3b8)',
                    borderBottom: '1px solid var(--sidebar-border, rgba(255,255,255,0.08))',
                    marginBottom: 8,
                }}>
                    {user.clientName}
                </div>
            )}

            <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>
                                    {isDisabled && <span className="sidebar-soon">Soon</span>}
                                </>
                            )}
                        </button>
                    );
                })}
            </nav>

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