/* global React, Icon, Avatar */
const { useState, useEffect, useRef } = React;

/* ============================================================
   SIDEBAR
   ============================================================ */

const NAV_ITEMS = [
  { id: 'dashboard', label: 'Dashboard', icon: 'dashboard' },
  { id: 'inbox',     label: 'Inbox',     icon: 'inbox', count: 4 },
  { id: 'pipeline',  label: 'Pipeline',  icon: 'pipeline' },
  { id: 'contacts',  label: 'Contacts',  icon: 'contacts' },
  { id: 'accounts',  label: 'Accounts',  icon: 'accounts' },
  { id: 'calendar',  label: 'Calendar',  icon: 'calendar' },
  { id: 'funnels',   label: 'Funnels',   icon: 'funnels' },
  { id: 'campaigns', label: 'Email Campaign',     icon: 'campaigns' },
  { id: 'linkedin-campaigns', label: 'LinkedIn Campaign', icon: 'linkedinIcon' },
  { id: 'documents', label: 'Documents', icon: 'documents' },
  { id: 'contracts', label: 'Contracts', icon: 'contracts' },
  { id: 'payments',  label: 'Payments',  icon: 'payments' },
];

function Sidebar({ route, setRoute }) {
  return (
    <aside className="sidebar">
      <div className="workspace">
        <div className="workspace-mark">L</div>
        <div className="workspace-name">Linea</div>
        <Icon name="chevDown" size={14} className="workspace-chev" />
      </div>

      <nav className="nav">
        <div className="nav-section-label">Workspace</div>
        {NAV_ITEMS.map(item => (
          <div
            key={item.id}
            className={`nav-item ${route === item.id ? 'active' : ''}`}
            onClick={() => setRoute(item.id)}
          >
            <Icon name={item.icon} size={15} className="nav-item-icon" />
            <span>{item.label}</span>
            {item.count != null && <span className="nav-count">{item.count}</span>}
          </div>
        ))}
      </nav>

      <div className="sidebar-footer">
        <div
          className={`nav-item ${route === 'settings' ? 'active' : ''}`}
          onClick={() => setRoute('settings')}
        >
          <Icon name="settings" size={15} className="nav-item-icon" />
          <span>Settings</span>
        </div>
      </div>
    </aside>
  );
}

/* ============================================================
   TOPBAR
   ============================================================ */

function Topbar({ openCmdK, route }) {
  const titles = {
    dashboard: 'Dashboard',
    inbox: 'Inbox',
    pipeline: 'Pipeline',
    contacts: 'Contacts',
    accounts: 'Accounts',
    calendar: 'Calendar',
    funnels: 'Funnels',
    campaigns: 'Email Campaign',
    'linkedin-campaigns': 'LinkedIn Campaign',
    'linkedin-builder': 'LinkedIn Campaign',
    documents: 'Documents',
    contracts: 'Contracts',
    payments: 'Payments',
    settings: 'Settings',
    contact: 'Contacts',
    account: 'Accounts',
    'document-builder': 'Documents',
    'funnel-builder': 'Funnels',
    'campaign-builder': 'Email Campaign',
    'booking-editor': 'Calendar',
  };
  return (
    <div className="topbar">
      <div style={{ fontSize: 12, color: 'var(--text-dim)', display: 'flex', alignItems: 'center', gap: 6 }}>
        <span>Workspace</span>
        <Icon name="chevRight" size={12} />
        <span style={{ color: 'var(--text)' }}>{titles[route] || ''}</span>
      </div>

      <div className="topbar-spacer" />

      <div className="topbar-search" onClick={openCmdK}>
        <Icon name="search" size={13} style={{ color: 'var(--text-dim)' }} />
        <span className="topbar-search-text">Search contacts, deals, docs…</span>
        <span className="topbar-search-kbd">
          <span className="kbd">⌘</span>
          <span className="kbd">K</span>
        </span>
      </div>

      <button className="topbar-icon-btn" title="Notifications">
        <Icon name="bell" size={15} />
        <span className="topbar-bell-dot"></span>
      </button>

      <Avatar name="Sebastiano" initials="SB" color="#22c55e" size="sm" />
    </div>
  );
}

Object.assign(window, { Sidebar, Topbar, NAV_ITEMS });