// WTS Cyprus — App shell: light sidebar + top header with role switcher
const { useState, useEffect, useRef } = React;

const NAV_SECTIONS = [
  { group: null, items: [{ key: 'home', label: 'Overview', icon: 'layout-dashboard' }] },
  { group: 'PBC', items: [
    { key: 'pbc-engagements', label: 'Engagements', icon: 'folder-open' },
    { key: 'pbc-inbox',       label: 'Review inbox', icon: 'inbox' },
  ] },
  { group: 'Transfer Pricing', items: [{ key: 'tp-studies', label: 'Studies', icon: 'bar-chart-2' }] },
  { group: 'Admin', adminOnly: true, items: [
    { key: 'admin-users',   label: 'Users',   icon: 'users' },
    { key: 'admin-clients', label: 'Clients', icon: 'building-2' },
  ] },
];

const ROLE_META = {
  admin:   { label: 'Admin',   bg: 'hsl(213 80% 95%)', color: 'hsl(213 80% 35%)' },
  partner: { label: 'Partner', bg: 'hsl(213 80% 95%)', color: 'hsl(213 80% 35%)' },
  staff:   { label: 'Staff',   bg: 'hsl(142 50% 94%)', color: 'hsl(142 55% 26%)' },
  client:  { label: 'Client',  bg: 'hsl(28 80% 93%)',  color: 'hsl(28 80% 32%)' },
};

// ── Sidebar (light) ───────────────────────────────────────────────────────
const WTSSidebar = ({ currentTopRoute, onNavigate, currentUser, role, navOpen }) => {
  const [dropOpen, setDropOpen] = useState(false);
  const dropRef = useRef(null);
  const meta = ROLE_META[role] || ROLE_META.staff;
  const initials = currentUser.name.split(' ').map(s => s[0]).slice(0, 2).join('');
  const inboxCount = getSubmittedItems(role === 'staff' ? ENGAGEMENTS.filter(e => e.assigned.includes(currentUser.id)) : ENGAGEMENTS).length;

  useEffect(() => {
    const handler = (e) => { if (dropRef.current && !dropRef.current.contains(e.target)) setDropOpen(false); };
    document.addEventListener('mousedown', handler);
    return () => document.removeEventListener('mousedown', handler);
  }, []);

  return (
    <aside className={cn('wts-sidebar', navOpen && 'wts-sidebar--open')}>
      {/* Wordmark */}
      <div className="wts-sidebar__brand">
        <div className="wts-sidebar__logo">W</div>
        <div style={{ minWidth: 0 }}>
          <div className="wts-sidebar__brand-name">WTS Operations</div>
          <div className="wts-sidebar__brand-sub">Operations Platform</div>
        </div>
      </div>

      {/* Navigation */}
      <nav className="wts-sidebar__nav" aria-label="Main navigation">
        {NAV_SECTIONS.map((section) => {
          if (section.adminOnly && role !== 'admin') return null;
          return (
            <div key={section.group || '_main'} className="wts-sidebar__section">
              {section.group && (
                <div className="wts-sidebar__group-label">{section.group}</div>
              )}
              {section.items.map(item => (
                <button
                  key={item.key}
                  type="button"
                  onClick={() => onNavigate(item.key)}
                  data-active={currentTopRoute === item.key}
                  className="wts-sidebar__item"
                >
                  <span className="wts-sidebar__item-rail" />
                  <span className="wts-sidebar__item-icon"><Icon name={item.icon} size={15} /></span>
                  <span>{item.label}</span>
                  {item.key === 'pbc-inbox' && inboxCount > 0 && (
                    <span style={{ marginLeft: 'auto', fontSize: 10.5, fontWeight: 600, padding: '0 6px', borderRadius: 999, background: 'hsl(213 80% 45%)', color: '#fff', fontVariantNumeric: 'tabular-nums' }}>{inboxCount}</span>
                  )}
                </button>
              ))}
            </div>
          );
        })}
      </nav>

      <div style={{ flex: 1 }} />

      {/* User profile chip */}
      <div className="wts-sidebar__user-wrap" ref={dropRef}>
        {dropOpen && (
          <div className="wts-sidebar__dropdown" role="menu">
            <div className="wts-sidebar__dropdown-header">
              <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--foreground)' }}>{currentUser.name}</div>
              <div style={{ fontSize: 11.5, color: 'var(--muted-foreground)', marginTop: 1 }}>{currentUser.email}</div>
            </div>
            <div className="wts-sidebar__dropdown-divider" />
            <button type="button" className="wts-sidebar__dropdown-item" onClick={() => setDropOpen(false)}>
              <Icon name="settings" size={13} /> Settings
            </button>
            <button type="button" className="wts-sidebar__dropdown-item" onClick={() => setDropOpen(false)}>
              <Icon name="log-out" size={13} /> Sign out
            </button>
          </div>
        )}
        <button
          type="button"
          className="wts-sidebar__user"
          onClick={() => setDropOpen(d => !d)}
          aria-expanded={dropOpen}
          aria-haspopup="true"
        >
          <Avatar user={currentUser} size={30} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div className="wts-sidebar__user-name">{currentUser.name}</div>
            <div className="wts-sidebar__user-email">{currentUser.email}</div>
          </div>
          <span className="ck-badge" style={{ background: meta.bg, color: meta.color, fontSize: 10.5, padding: '1px 6px', flexShrink: 0 }}>
            {meta.label}
          </span>
        </button>
      </div>
    </aside>
  );
};

// ── Header (breadcrumb + role switcher) ──────────────────────────────────
const WTSHeader = ({ crumbs, role, onRoleChange, onToggleNav }) => {
  const [open, setOpen] = useState(false);
  const dropRef = useRef(null);

  useEffect(() => {
    const h = (e) => { if (dropRef.current && !dropRef.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', h);
    return () => document.removeEventListener('mousedown', h);
  }, []);

  return (
    <header className="wts-header">
      <button type="button" className="wts-hamburger" onClick={onToggleNav} aria-label="Toggle navigation">
        <Icon name="menu" size={17} />
      </button>
      <nav className="wts-header__breadcrumb" aria-label="Breadcrumb">
        {crumbs.map((c, i) => {
          const last = i === crumbs.length - 1;
          return (
            <React.Fragment key={i}>
              {i > 0 && (
                <Icon name="chevron-right" size={13} style={{ opacity: 0.3, margin: '0 1px' }} />
              )}
              {last ? (
                <span className="wts-header__crumb-current">{c.label}</span>
              ) : (
                <button
                  type="button"
                  className="wts-header__crumb-parent"
                  onClick={c.onClick}
                  disabled={!c.onClick}
                  style={{ cursor: c.onClick ? 'pointer' : 'default' }}
                >
                  {c.label}
                </button>
              )}
            </React.Fragment>
          );
        })}
      </nav>

      <div style={{ flex: 1 }} />
    </header>
  );
};

Object.assign(window, { WTSSidebar, WTSHeader });