// Top navigation bar with role switcher, company selector, search, notifications

const TopBar = ({ role, setRole, company, setCompany, onSearch, onChat, onNotif, notifCount, chatUnread }) => {
  const { SAIF_COMPANIES, ME_ADMIN, ME_STAFF, ME_SUPPLIER } = window.SaifData;
  const [searchQ, setSearchQ] = React.useState('');
  const [searchOpen, setSearchOpen] = React.useState(false);
  const [companyOpen, setCompanyOpen] = React.useState(false);
  const me = role === 'admin' ? ME_ADMIN : role === 'staff' ? ME_STAFF : ME_SUPPLIER;
  const currentCo = SAIF_COMPANIES.find(c => c.id === company) || SAIF_COMPANIES[5];

  // Search across tasks, suppliers, docs
  const results = React.useMemo(() => {
    if (!searchQ) return null;
    const { TASKS, SUPPLIERS, DOCUMENTS } = window.SaifData;
    const q = searchQ.toLowerCase();
    return {
      tasks: TASKS.filter(t => t.title.toLowerCase().includes(q)).slice(0, 4),
      suppliers: SUPPLIERS.filter(s => s.name.toLowerCase().includes(q) || s.industry.toLowerCase().includes(q)).slice(0, 4),
      docs: DOCUMENTS.filter(d => d.fileName.toLowerCase().includes(q) || d.type.toLowerCase().includes(q)).slice(0, 4),
    };
  }, [searchQ]);

  return (
    <div className="topbar">
      <div className="brand">
        <div className="brand-mark"><SaifLogo size={48}/></div>
      </div>

      {role !== 'supplier' && (
        <div style={{ position: 'relative' }}>
          <button className="company-selector" onClick={() => setCompanyOpen(o => !o)}>
            <span className="company-dot" style={{ background: currentCo.color }}></span>
            <span>{currentCo.name}</span>
            <Icon name="chevronDown" size={13}/>
          </button>
          {companyOpen && (
            <div style={{
              position: 'absolute', top: 'calc(100% + 6px)', left: 0, minWidth: 240,
              background: 'var(--surface)', borderRadius: 8, boxShadow: 'var(--shadow-lg)',
              border: '1px solid var(--line)', padding: 6, zIndex: 100,
            }}>
              <div style={{ padding: '6px 10px 8px', fontSize: 10, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--text-dim)' }}>Group Companies</div>
              {SAIF_COMPANIES.map(c => (
                <button key={c.id} className="company-row" data-selected={c.id === company}
                  style={{ width: '100%', border: 'none', background: c.id === company ? 'var(--surface-2)' : 'transparent' }}
                  onClick={() => { setCompany(c.id); setCompanyOpen(false); }}>
                  <span className="company-dot" style={{ background: c.color }}></span>
                  <div style={{ textAlign: 'left' }}>
                    <div style={{ fontSize: 13, color: 'var(--ink)', fontWeight: 500 }}>{c.name}</div>
                    <div style={{ fontSize: 11, color: 'var(--text-mute)' }}>{c.industry}</div>
                  </div>
                  <span className="badge-count">{c.code}</span>
                </button>
              ))}
            </div>
          )}
        </div>
      )}

      <div className="top-search">
        <span className="top-search-icon"><Icon name="search" size={14}/></span>
        <input
          type="text"
          placeholder="Search tasks, suppliers, documents…"
          value={searchQ}
          onChange={e => { setSearchQ(e.target.value); setSearchOpen(!!e.target.value); }}
          onFocus={() => searchQ && setSearchOpen(true)}
          onBlur={() => setTimeout(() => setSearchOpen(false), 200)}
        />
        <span className="top-search-kbd">⌘K</span>
        {searchOpen && results && (
          <div className="search-results">
            {results.tasks.length === 0 && results.suppliers.length === 0 && results.docs.length === 0 && (
              <div style={{ padding: '20px 14px', color: 'var(--text-mute)', fontSize: 13, textAlign: 'center' }}>No matches</div>
            )}
            {results.tasks.length > 0 && (
              <div className="search-section">
                <div className="search-section-label">Tasks</div>
                {results.tasks.map(t => (
                  <div className="search-result" key={t.id} onMouseDown={() => { onSearch({ type: 'task', id: t.id }); setSearchQ(''); setSearchOpen(false); }}>
                    <Icon name="inbox" size={14} className="text-mute"/>
                    <div style={{ flex: 1 }}>
                      <div className="search-result-title">{t.title}</div>
                      <div className="search-result-sub"><Badge kind={statusToBadge(t.status)}>{t.status}</Badge></div>
                    </div>
                  </div>
                ))}
              </div>
            )}
            {results.suppliers.length > 0 && (
              <div className="search-section">
                <div className="search-section-label">Suppliers</div>
                {results.suppliers.map(s => (
                  <div className="search-result" key={s.id} onMouseDown={() => { onSearch({ type: 'supplier', id: s.id }); setSearchQ(''); setSearchOpen(false); }}>
                    <Avatar name={s.name} size="sm" tone={s.tone}/>
                    <div style={{ flex: 1 }}>
                      <div className="search-result-title">{s.name}</div>
                      <div className="search-result-sub">{s.industry} · {s.city}</div>
                    </div>
                  </div>
                ))}
              </div>
            )}
            {results.docs.length > 0 && (
              <div className="search-section">
                <div className="search-section-label">Documents</div>
                {results.docs.map(d => (
                  <div className="search-result" key={d.id} onMouseDown={() => { setSearchQ(''); setSearchOpen(false); window.showToast({ title: 'Opened ' + d.fileName, icon: 'file' }); }}>
                    <Icon name="file" size={14} className="text-mute"/>
                    <div style={{ flex: 1 }}>
                      <div className="search-result-title">{d.fileName}</div>
                      <div className="search-result-sub">{d.type} · expires {fmtDate(d.expires)}</div>
                    </div>
                    <DocPill status={d.status}>{d.status === 'red' ? 'Expired' : d.status === 'amber' ? 'Expiring' : 'OK'}</DocPill>
                  </div>
                ))}
              </div>
            )}
          </div>
        )}
      </div>

      <div className="role-switcher" title="Switch role (demo)">
        <button className="role-pill" data-active={role === 'admin'} onClick={() => setRole('admin')}>
          <Icon name="settings" size={12}/> Admin
        </button>
        <button className="role-pill" data-active={role === 'staff'} onClick={() => setRole('staff')}>
          <Icon name="users" size={12}/> Staff
        </button>
        <button className="role-pill" data-active={role === 'supplier'} onClick={() => setRole('supplier')}>
          <Icon name="building" size={12}/> Supplier
        </button>
      </div>

      <div className="top-actions">
        <button className="icon-btn" onClick={onNotif} title="Notifications">
          <Icon name="bell" size={16}/>
          {notifCount > 0 && <span className="icon-btn-dot"></span>}
        </button>
        <button className="icon-btn" onClick={onChat} title="Chat">
          <Icon name="chat" size={16}/>
          {chatUnread > 0 && <span className="icon-btn-dot"></span>}
        </button>
        <div className="user-chip">
          <Avatar name={me.name} initials={me.initials} size="sm" tone={me.tone}/>
          <div style={{ fontSize: 12, lineHeight: 1.1 }}>
            <div style={{ fontWeight: 500 }}>{me.name}</div>
            <div style={{ fontSize: 10, opacity: 0.6 }}>{me.role || 'Supplier'}</div>
          </div>
        </div>
      </div>
    </div>
  );
};

// Sidebar
const Sidebar = ({ role, page, setPage, company, setCompany, badges }) => {
  const { SAIF_COMPANIES } = window.SaifData;

  const adminNav = [
    { id: 'dashboard', icon: 'home', label: 'Dashboard' },
    { id: 'tasks', icon: 'inbox', label: 'Tasks', badge: badges.tasks },
    { id: 'workflows', icon: 'workflow', label: 'Approval Flow', accent: true },
    { id: 'suppliers', icon: 'suppliers', label: 'Suppliers', badge: badges.suppliers },
    { id: 'documents', icon: 'docs', label: 'Documents', badge: badges.documents },
    { id: 'pos', icon: 'po', label: 'POs & Quotes' },
    { id: 'reports', icon: 'chart', label: 'Reports' },
  ];
  const adminConfig = [
    { id: 'users', icon: 'users', label: 'Users & Roles' },
    { id: 'registration-form', icon: 'edit', label: 'Registration Form' },
    { id: 'settings', icon: 'settings', label: 'Settings' },
  ];

  const staffNav = [
    { id: 'dashboard', icon: 'home', label: 'Dashboard' },
    { id: 'tasks', icon: 'inbox', label: 'My Tasks', badge: badges.myTasks },
    { id: 'suppliers', icon: 'suppliers', label: 'Suppliers' },
    { id: 'documents', icon: 'docs', label: 'Documents', badge: badges.documents },
    { id: 'pos', icon: 'po', label: 'POs & Quotes' },
  ];

  const supplierNav = [
    { id: 'sup-home', icon: 'home', label: 'My Profile' },
    { id: 'sup-docs', icon: 'docs', label: 'Documents', badge: 2 },
    { id: 'sup-pos', icon: 'po', label: 'POs & Quotes' },
    { id: 'sup-tasks', icon: 'inbox', label: 'Tasks', badge: 1 },
    { id: 'sup-msgs', icon: 'chat', label: 'Messages', badge: 2 },
  ];

  const renderNav = (items) => items.map(item => (
    <button key={item.id} className="nav-item" data-active={page === item.id} onClick={() => setPage(item.id)}>
      <span className="nav-icon"><Icon name={item.icon} size={15}/></span>
      <span>{item.label}</span>
      {item.badge && <span className={`nav-count ${item.accent ? 'accent' : ''}`}>{item.badge}</span>}
    </button>
  ));

  if (role === 'supplier') {
    return (
      <div className="sidebar">
        <div className="sidebar-section" style={{ marginTop: 0 }}>
          <div className="sidebar-label">Supplier Portal</div>
          {renderNav(supplierNav)}
        </div>
        <div className="sidebar-section">
          <div className="sidebar-label">Engaged With</div>
          <div className="sidebar-companies">
            {[SAIF_COMPANIES[0], SAIF_COMPANIES[5]].map(c => (
              <div key={c.id} className="company-row">
                <span className="company-dot" style={{ background: c.color }}></span>
                <span>{c.name}</span>
              </div>
            ))}
          </div>
        </div>
        <div style={{ marginTop: 'auto', padding: 12, borderTop: '1px solid var(--line)', fontSize: 11, color: 'var(--text-mute)' }}>
          <div style={{ fontWeight: 600, color: 'var(--ink)', marginBottom: 4 }}>Need help?</div>
          <div>Contact your assigned procurement officer</div>
          <button className="btn btn-sm" style={{ marginTop: 8, width: '100%' }}>Open support ticket</button>
        </div>
      </div>
    );
  }

  return (
    <div className="sidebar">
      <div className="sidebar-section" style={{ marginTop: 0 }}>
        <div className="sidebar-label">{role === 'admin' ? 'Group' : 'Workspace'}</div>
        {renderNav(role === 'admin' ? adminNav : staffNav)}
      </div>
      {role === 'admin' && (
        <div className="sidebar-section">
          <div className="sidebar-label">Configure</div>
          {renderNav(adminConfig)}
        </div>
      )}
    </div>
  );
};

Object.assign(window, { TopBar, Sidebar });