// ============================================================
// Topbar.jsx
// ============================================================
const ROUTE_LABELS = {
  dashboard: 'Dashboard',
  projects: 'Progetti CAPEX',
  project_detail: 'Progetto',
  workflow: 'Workflow CAPEX',
  archive: 'Archivio storico',
  rda: 'Richieste di Acquisto',
  oda: 'Ordini di Acquisto',
  benchmark: 'Benchmark',
  communications: 'Comunicazioni',
  documents: 'Documenti',
  vendors: 'Vendor',
  reports: 'Reportistica',
  alerts: 'Alert & Early warning',
  audit: 'Audit log',
  settings: 'Impostazioni',
  aichat: 'AI Assistant',
};

function Topbar() {
  const { theme, setTheme, user, setUser, actingTenantId, setActingTenantId, route, navigate, setCmdOpen, setCopilotOpen, copilotOpen, sidebarCollapsed, setSidebarCollapsed, pushToast } = useStore();
  const isSuperadmin = (user?.roleIds || []).includes('SUPERADMIN');
  return (
    <div className="topbar" style={actingTenantId ? { borderBottom: '2px solid var(--accent)' } : undefined}>
      <div className="brand">
        <span className="mark">V</span>
        <span className="name">Veridanto<span style={{ color: 'var(--text-3)' }}>.capex</span></span>
        <span className="sub">v0.9</span>
      </div>
      <button className="icon-btn" onClick={() => setSidebarCollapsed(!sidebarCollapsed)} title="Sidebar"><Icon name="menu" /></button>
      <div className="crumbs">
        <span>Workspace</span>
        <span className="sep">/</span>
        <span>Industrial Investments</span>
        <span className="sep">/</span>
        <span className="cur">{ROUTE_LABELS[route] || route}</span>
      </div>
      {actingTenantId && (
        <div style={{
          display: 'flex', alignItems: 'center', gap: 6,
          padding: '4px 10px', background: 'color-mix(in oklch, var(--accent) 18%, var(--bg-1))',
          border: '1px solid var(--accent)', borderRadius: 4, fontSize: 11, fontWeight: 500,
        }}>
          <Icon name="shield" size={11}/>
          <span>Acting as: <code>{actingTenantId}</code></span>
          <button
            onClick={() => { setActingTenantId(null); pushToast({ title: 'Tornato al tenant reale', tone: 'ok' }); window.location.reload(); }}
            title="Esci dalla modalità acting"
            style={{
              border: 0, background: 'transparent', cursor: 'pointer', color: 'var(--accent)',
              padding: 0, display: 'flex', alignItems: 'center', marginLeft: 4,
            }}
          >
            <Icon name="x" size={11}/>
          </button>
        </div>
      )}
      {isSuperadmin && !actingTenantId && (
        <TenantSwitcherDropdown
          onPick={(tenantId) => {
            setActingTenantId(tenantId);
            pushToast({ title: `Acting as: ${tenantId}`, desc: 'Le pagine read-only mostreranno i dati del tenant target.', tone: 'info' });
            window.location.reload();
          }}
        />
      )}
      <div className="search" onClick={() => setCmdOpen(true)}>
        <Icon name="search" size={13} />
        <span>Cerca progetti, documenti, vendor…</span>
        <span className="kbd">⌘ K</span>
      </div>
      <span className="env"><span className="dot" />production</span>
      <button className="icon-btn" onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')} title="Tema">
        <Icon name={theme === 'dark' ? 'sun' : 'moon'} />
      </button>
      <button className="icon-btn" title="Notifiche" onClick={() => navigate('alerts')}>
        <Icon name="bell" />
        <span className="badge" />
      </button>
      <button className="icon-btn" title="Copilot" onClick={() => setCopilotOpen(!copilotOpen)}>
        <Icon name="sparkle" />
      </button>
      {user && (
        <div className="user">
          <span className="avatar">{user.initials}</span>
          <div>
            <div className="name">{user.name}</div>
            <div className="role">{user.role}</div>
          </div>
          <button className="icon-btn" style={{ width: 22, height: 22 }} title="Logout" onClick={async () => {
            try {
              await fetch('/api/auth/logout', { method: 'POST', credentials: 'same-origin' });
            } catch { /* ignore */ }
            // Clear acting tenant on logout (security: nessun residuo dopo logout)
            setActingTenantId(null);
            setUser(null);
            navigate('login');
          }}>
            <Icon name="logout" size={13} />
          </button>
        </div>
      )}
    </div>
  );
}
// FASE 52 — Tenant switcher dropdown per SUPERADMIN.
// Carica /api/tenants (public read) on demand, mostra select con tenant attivi.
function TenantSwitcherDropdown({ onPick }) {
  const [open, setOpen] = React.useState(false);
  const [tenants, setTenants] = React.useState(null);
  const [error, setError] = React.useState(null);

  React.useEffect(() => {
    if (!open || tenants !== null) return;
    fetch('/api/tenants', { credentials: 'same-origin', cache: 'no-store' })
      .then(r => r.json())
      .then(j => setTenants((j.data || []).filter(t => t.active)))
      .catch(e => setError(String(e?.message || e)));
  }, [open, tenants]);

  return (
    <div style={{ position: 'relative' }}>
      <button
        className="icon-btn"
        title="Switch tenant (SUPERADMIN)"
        onClick={() => setOpen((v) => !v)}
        style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '4px 8px', width: 'auto', fontSize: 11 }}
      >
        <Icon name="users" size={13}/>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10 }}>switch</span>
      </button>
      {open && (
        <div style={{
          position: 'absolute', top: '100%', right: 0, marginTop: 4, zIndex: 100,
          background: 'var(--bg-1)', border: '1px solid var(--line)', borderRadius: 6,
          minWidth: 280, maxHeight: 320, overflowY: 'auto', boxShadow: '0 4px 12px rgba(0,0,0,0.18)',
        }}>
          <div style={{ padding: '8px 10px', borderBottom: '1px solid var(--line)', fontSize: 11, color: 'var(--text-3)' }}>
            <Icon name="shield" size={11}/> Acting as another tenant (read-only)
          </div>
          {tenants === null ? (
            <div style={{ padding: 10, fontSize: 11, color: 'var(--text-3)' }}>Caricamento…</div>
          ) : error ? (
            <div style={{ padding: 10, fontSize: 11, color: 'var(--err)' }}>Errore: {error}</div>
          ) : tenants.length === 0 ? (
            <div style={{ padding: 10, fontSize: 11, color: 'var(--text-3)' }}>Nessun tenant attivo.</div>
          ) : (
            tenants.map((t) => (
              <button
                key={t.id}
                onClick={() => { setOpen(false); onPick(t.id); }}
                style={{
                  display: 'block', width: '100%', textAlign: 'left',
                  padding: '8px 10px', border: 0, background: 'transparent', cursor: 'pointer',
                  borderBottom: '1px solid var(--line)', fontSize: 11,
                }}
                onMouseEnter={(e) => e.currentTarget.style.background = 'var(--bg-2)'}
                onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
              >
                <div style={{ fontWeight: 500 }}>{t.name}</div>
                <code style={{ fontSize: 10, color: 'var(--text-3)' }}>{t.id}</code>
              </button>
            ))
          )}
          <div style={{ padding: '6px 10px', fontSize: 10, color: 'var(--text-3)', borderTop: '1px solid var(--line)' }}>
            Le mutation restano sul tenant reale (sicurezza).
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { Topbar, ROUTE_LABELS, TenantSwitcherDropdown });