/* Sidebar + Topbar + small shared components */

const Sidebar = ({ lang, tenant, onPickTenant, route, onNavigate, alarmsCount, me, effectiveRole, onOpenTweaks }) => {
  const t = I18N[lang];

  // Bestem den ekte rollen til brukeren — superadmin > tenant_admin > tenant_worker
  const isSuperadmin = !!me?.is_superadmin;
  const tenantRoles = new Set((me?.tenants || []).map(t => t.role));
  const isTenantAdmin = !isSuperadmin && tenantRoles.has('tenant_admin');

  // Bygg nav-listen basert på rolle. Workers ser kun det de trenger.
  const allItems = [
    { k: 'platform',     label: lang === 'no' ? 'Plattform' : 'Platform', icon: 'dashboard', roles: ['superadmin'] },
    { k: 'overview',     label: t.nav_overview, icon: 'dashboard', roles: ['superadmin', 'tenant_admin'] },
    { k: 'operator',     label: lang === 'no' ? 'Daglig drift' : 'Daily ops', icon: 'list', roles: ['superadmin', 'tenant_admin', 'worker'] },
    { k: 'refill',       label: lang === 'no' ? 'Påfylling' : 'Refill', icon: 'bottle', roles: ['superadmin', 'tenant_admin', 'worker'] },
    { k: 'machines',     label: t.nav_machines, icon: 'machine', roles: ['superadmin', 'tenant_admin'] },
    { k: 'areas',        label: lang === 'no' ? 'Områder' : 'Areas', icon: 'list', roles: ['superadmin', 'tenant_admin'] },
    { k: 'map',          label: lang === 'no' ? 'Kart' : 'Map', icon: 'list', roles: ['superadmin', 'tenant_admin', 'worker'] },
    { k: 'transactions', label: t.nav_transactions, icon: 'transaction', roles: ['superadmin', 'tenant_admin'] },
    { k: 'events',       label: t.nav_events, icon: 'bell', badge: alarmsCount, badgeDanger: true, roles: ['superadmin', 'tenant_admin'] },
    { k: 'analytics',    label: lang === 'no' ? 'Statistikk' : 'Analytics', icon: 'chart', roles: ['superadmin', 'tenant_admin'] },
    { k: 'bottles',      label: t.nav_bottles, icon: 'bottle', roles: ['superadmin', 'tenant_admin'] },
    { k: 'users',        label: t.nav_users, icon: 'users', roles: ['superadmin', 'tenant_admin'] },
    { k: 'activity',     label: lang === 'no' ? 'Aktivitet' : 'Activity', icon: 'bell', roles: ['superadmin'] },
    { k: 'settings',     label: t.nav_settings, icon: 'settings', roles: ['superadmin', 'tenant_admin'] },
  ];

  let realRole = 'worker';
  if (isSuperadmin) realRole = 'superadmin';
  else if (isTenantAdmin) realRole = 'tenant_admin';

  // effectiveRole — superadmin kan velge å ‚se som“ tenant_admin / worker
  const role = effectiveRole || realRole;
  const items = allItems.filter(item => item.roles.includes(role));

  const [tenantOpen, setTenantOpen] = React.useState(false);

  return (
    <aside className="sidebar">
      <div className="sidebar-head">
        <div className="sidebar-logo">G</div>
        <div className="sidebar-brand">
          Gassautomat
          <small>Admin · {window.APP_VERSION || ''}</small>
        </div>
      </div>

      <div style={{ position: 'relative' }}>
        <div className="tenant-pick" onClick={() => setTenantOpen(o => !o)}>
          <div className="tenant-avatar">{tenant.avatar}</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div className="tenant-name" style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{tenant.name}</div>
            <div className="tenant-sub">{tenant.sub}</div>
          </div>
          <Icon name="chevdown" size={14} style={{ color: 'var(--text-faint)' }} />
        </div>
        {tenantOpen && (
          <div style={{
            position: 'absolute', top: '100%', left: 12, right: 12,
            background: 'var(--surface)', border: '1px solid var(--border)',
            borderRadius: 'var(--radius)', boxShadow: 'var(--shadow-md)',
            zIndex: 30, padding: 4, marginTop: 4
          }}>
            {DATA.TENANTS.map(tn => (
              <div key={tn.id}
                onClick={() => { onPickTenant(tn); setTenantOpen(false); }}
                className="tenant-pick" style={{ margin: 0, border: 0, padding: '6px 8px' }}>
                <div className="tenant-avatar">{tn.avatar}</div>
                <div style={{ flex: 1 }}>
                  <div className="tenant-name">{tn.name}</div>
                  <div className="tenant-sub">{tn.sub}</div>
                </div>
                {tn.id === tenant.id && <Icon name="check" size={14} style={{ color: 'var(--accent)' }} />}
              </div>
            ))}
            <div style={{ borderTop: '1px solid var(--border)', marginTop: 4, paddingTop: 4 }}>
              <div className="tenant-pick" style={{ margin: 0, border: 0, padding: '6px 8px', color: 'var(--text-faint)', cursor: 'pointer' }}
                onClick={() => { setTenantOpen(false); onNavigate && onNavigate({ page: 'settings' }); }}>
                <Icon name="plus" size={14} />
                <div className="tenant-name" style={{ fontSize: 12 }}>{lang === 'no' ? 'Ny tenant' : 'New tenant'}</div>
              </div>
            </div>
          </div>
        )}
      </div>

      <nav className="nav-section">
        {items.map(it => (
          <div key={it.k}
            className={'nav-item' + (route.page === it.k ? ' active' : '')}
            onClick={() => onNavigate({ page: it.k })}>
            <Icon name={it.icon} size={15} />
            <span>{it.label}</span>
            {it.badge != null && it.badge > 0 && (
              <span className={'badge' + (it.badgeDanger ? ' danger' : '')}>{it.badge}</span>
            )}
          </div>
        ))}
      </nav>

      <div className="sidebar-foot">
        <div className="avatar">{
          (me?.name || me?.email || '?').split(/[\s@.]/).filter(Boolean)
            .slice(0,2).map(s => s.charAt(0).toUpperCase()).join('')
        }</div>
        <div className="who">
          <div className="who-name" style={{ overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>
            {me?.name || me?.email || '—'}
          </div>
          <div className="who-role">
            {realRole === 'superadmin' ? (lang === 'no' ? 'Superadmin' : 'Superadmin')
              : realRole === 'tenant_admin' ? (lang === 'no' ? 'Admin' : 'Admin')
              : (lang === 'no' ? 'Operatør' : 'Operator')}
            {effectiveRole && effectiveRole !== realRole && (
              <span className="muted" style={{ marginLeft: 4, fontSize: 10 }}>
                · {lang === 'no' ? 'ser som' : 'as'} {effectiveRole === 'tenant_admin' ? 'admin' : 'operatør'}
              </span>
            )}
          </div>
        </div>
        <button className="icon-btn" title={lang === 'no' ? 'Innstillinger' : 'Settings'}
                onClick={() => onNavigate && onNavigate({ page: 'settings' })}>
          <Icon name="settings" size={14} />
        </button>
      </div>
    </aside>
  );
};

const Topbar = ({ lang, setLang, theme, setTheme, crumbs, onRefresh, onMenu, tenant, onNavigate }) => {
  const t = I18N[lang];
  const [refreshing, setRefreshing] = React.useState(false);
  const handleRefresh = async () => {
    if (!onRefresh || refreshing) return;
    setRefreshing(true);
    try { await onRefresh(); }
    finally { setRefreshing(false); }
  };

  // Søk (2026-09-05): filtrerer automatlista (valgt tenant) på navn/ID og
  // navigerer til automaten — før var feltet dekorativt uten handler.
  // ⌘K / Ctrl+K fokuserer feltet, piltaster + Enter velger, Esc lukker.
  const [q, setQ] = React.useState('');
  const [searchOpen, setSearchOpen] = React.useState(false);
  const [hi, setHi] = React.useState(0);
  const searchRef = React.useRef(null);
  React.useEffect(() => {
    const onKey = (e) => {
      if ((e.metaKey || e.ctrlKey) && String(e.key).toLowerCase() === 'k') {
        e.preventDefault();
        if (searchRef.current) { searchRef.current.focus(); searchRef.current.select(); }
      }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);
  const tenantMachines = (() => {
    const all = (window.DATA && DATA.machines) || [];
    return (tenant && tenant.id !== '__all__') ? all.filter(m => m.tenantId === tenant.id) : all;
  })();
  const s = q.trim().toLowerCase();
  const hits = !s ? [] : tenantMachines.filter(m =>
    (m.location || '').toLowerCase().includes(s) ||
    (m.id || '').toLowerCase().includes(s) ||
    (m.name || '').toLowerCase().includes(s)).slice(0, 8);
  const go = (m) => {
    setQ(''); setSearchOpen(false);
    if (searchRef.current) searchRef.current.blur();
    onNavigate && onNavigate({ page: 'machines', machineId: m.id });
  };
  const onSearchKey = (e) => {
    if (e.key === 'ArrowDown') { e.preventDefault(); setHi(h => Math.min(h + 1, Math.max(0, hits.length - 1))); }
    else if (e.key === 'ArrowUp') { e.preventDefault(); setHi(h => Math.max(h - 1, 0)); }
    else if (e.key === 'Enter') { if (hits[hi]) go(hits[hi]); }
    else if (e.key === 'Escape') { setQ(''); setSearchOpen(false); e.target.blur(); }
  };

  // Varsel-bjelle (2026-09-05): de 5 siste varslene (ikke info) for valgt
  // tenant fra DATA.ALARMS — før var den dekorativ med permanent rød prikk.
  const [bellOpen, setBellOpen] = React.useState(false);
  const bellAlarms = (() => {
    const ids = new Set(tenantMachines.map(m => m.id));
    const nameOf = (id) => (tenantMachines.find(m => m.id === id) || {}).location || id;
    return ((window.DATA && DATA.ALARMS) || [])
      .filter(a => ids.has(a.machineId) && a.sev !== 'info')
      .slice(0, 5)
      .map(a => ({ ...a, machineName: nameOf(a.machineId) }));
  })();
  const popStyle = {
    position: 'absolute', top: '100%', marginTop: 4,
    background: 'var(--surface)', border: '1px solid var(--border)',
    borderRadius: 'var(--radius)', boxShadow: 'var(--shadow-md)', zIndex: 40,
  };

  return (
    <header className="topbar">
      {/* Mobil: hamburger som åpner sidemenyen (skjult på desktop via CSS) */}
      <button className="icon-btn hamburger" aria-label="Meny"
              onClick={() => onMenu && onMenu()}>
        <svg className="icon" width="18" height="18" viewBox="0 0 24 24">
          <line x1="4" y1="7" x2="20" y2="7" />
          <line x1="4" y1="12" x2="20" y2="12" />
          <line x1="4" y1="17" x2="20" y2="17" />
        </svg>
      </button>
      <div className="crumbs">
        {crumbs.map((c, i) => (
          <React.Fragment key={i}>
            {i > 0 && <span className="sep"><Icon name="chevright" size={12} /></span>}
            <span className={i === crumbs.length - 1 ? 'here' : ''} onClick={c.onClick} style={{ cursor: c.onClick ? 'pointer' : 'default' }}>{c.label}</span>
          </React.Fragment>
        ))}
      </div>
      <div className="topbar-spacer" />

      <div className="search" style={{ position: 'relative' }}>
        <Icon name="search" size={14} />
        <input ref={searchRef} placeholder={t.search_placeholder} value={q}
               aria-label={t.search_placeholder}
               onChange={e => { setQ(e.target.value); setHi(0); setSearchOpen(true); }}
               onFocus={() => setSearchOpen(true)}
               onBlur={() => setTimeout(() => setSearchOpen(false), 150)}
               onKeyDown={onSearchKey} />
        <kbd>⌘K</kbd>
        {searchOpen && s && (
          <div style={{ ...popStyle, left: 0, right: 0, maxHeight: 320, overflow: 'auto' }}>
            {hits.length === 0 && (
              <div className="muted" style={{ padding: '8px 10px', fontSize: 12 }}>
                {lang === 'no' ? 'Ingen automater matcher' : 'No machines match'}
              </div>
            )}
            {hits.map((m, i) => (
              <div key={m.id} onMouseDown={(e) => { e.preventDefault(); go(m); }}
                   onMouseEnter={() => setHi(i)}
                   style={{ padding: '7px 10px', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 8,
                            background: i === hi ? 'var(--accent-soft)' : 'transparent' }}>
                <StatusDot status={m.status} />
                <span style={{ flex: 1, color: 'var(--text)', fontSize: 12.5, overflow: 'hidden',
                               textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{m.location}</span>
                <span className="mono muted" style={{ fontSize: 10.5 }}>{m.id}</span>
              </div>
            ))}
          </div>
        )}
      </div>

      <div className="lang-toggle">
        <button className={lang === 'no' ? 'on' : ''} onClick={() => setLang('no')}>NO</button>
        <button className={lang === 'en' ? 'on' : ''} onClick={() => setLang('en')}>EN</button>
      </div>

      <button className="icon-btn" title="Theme" onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
        <Icon name={theme === 'dark' ? 'sun' : 'moon'} size={15} />
      </button>
      <button className="icon-btn" title={lang === 'no' ? 'Oppdater data' : 'Refresh data'}
              onClick={handleRefresh} disabled={refreshing}
              style={{ opacity: refreshing ? 0.5 : 1 }}>
        <Icon name="refresh" size={15} />
      </button>
      <div style={{ position: 'relative' }}>
        <button className="icon-btn" title={lang === 'no' ? 'Varsler' : 'Notifications'}
                style={{ position: 'relative' }} onClick={() => setBellOpen(o => !o)}>
          <Icon name="bell" size={15} />
          {bellAlarms.length > 0 && (
            <span style={{ position: 'absolute', top: 4, right: 4, width: 6, height: 6, borderRadius: '50%', background: 'var(--danger)' }} />
          )}
        </button>
        {bellOpen && (
          <>
            <div onClick={() => setBellOpen(false)} style={{ position: 'fixed', inset: 0, zIndex: 39 }} />
            <div style={{ ...popStyle, right: 0, width: 320, maxWidth: 'calc(100vw - 24px)' }}>
              <div className="row between" style={{ padding: '8px 10px', borderBottom: '1px solid var(--border)' }}>
                <span style={{ fontSize: 12, fontWeight: 600 }}>{lang === 'no' ? 'Siste varsler' : 'Latest alerts'}</span>
                <a style={{ fontSize: 11, color: 'var(--accent)', cursor: 'pointer' }}
                   onClick={() => { setBellOpen(false); onNavigate && onNavigate({ page: 'events' }); }}>
                  {lang === 'no' ? 'Alle hendelser →' : 'All events →'}
                </a>
              </div>
              {bellAlarms.length === 0 && (
                <div className="muted" style={{ padding: 10, fontSize: 12 }}>
                  {lang === 'no' ? 'Ingen aktive varsler' : 'No active alerts'}
                </div>
              )}
              {bellAlarms.map(a => (
                <div key={a.id}
                     onClick={() => { setBellOpen(false); onNavigate && onNavigate({ page: 'machines', machineId: a.machineId }); }}
                     style={{ padding: '8px 10px', borderBottom: '1px solid var(--border)', cursor: 'pointer', fontSize: 12 }}>
                  <div className="row" style={{ gap: 6, alignItems: 'center' }}>
                    <span style={{ color: a.sev === 'danger' ? 'var(--danger)' : 'var(--warn)' }}><Icon name="warning" size={12} /></span>
                    <span style={{ fontWeight: 500, flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{a.machineName}</span>
                    <span className="muted mono" style={{ fontSize: 10.5 }}>
                      {a.mins < 60 ? `${a.mins} min` : a.mins < 1440 ? `${Math.floor(a.mins / 60)} t` : `${Math.floor(a.mins / 1440)} d`}
                    </span>
                  </div>
                  <div className="muted" style={{ fontSize: 11.5, marginTop: 2 }}>{lang === 'no' ? a.msg_no : a.msg_en}</div>
                </div>
              ))}
            </div>
          </>
        )}
      </div>
    </header>
  );
};

/* --- Tiny widgets --- */

const Sparkline = ({ data, width = 80, height = 28, color = 'var(--accent)', filled = true }) => {
  if (!data || !data.length) return null;
  const min = Math.min(...data);
  const max = Math.max(...data);
  const range = max - min || 1;
  const step = width / (data.length - 1);
  const pts = data.map((v, i) => [i * step, height - ((v - min) / range) * (height - 4) - 2]);
  const d = pts.map((p, i) => (i === 0 ? `M${p[0]},${p[1]}` : `L${p[0]},${p[1]}`)).join(' ');
  const dFill = d + ` L${width},${height} L0,${height} Z`;
  return (
    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} className="sparkline">
      {filled && <path d={dFill} fill={color} opacity="0.13" />}
      <path d={d} fill="none" stroke={color} strokeWidth="1.5" />
    </svg>
  );
};

const Donut = ({ size = 130, stroke = 18, segments }) => {
  const r = (size - stroke) / 2;
  const c = 2 * Math.PI * r;
  const total = segments.reduce((s, x) => s + x.value, 0) || 1;
  let acc = 0;
  // viewBox: CSS kan skalere donuten (mobil-laget setter .donut 110px) uten
  // at tegningen klippes — før ble den avskåret i ramma på smal skjerm.
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} className="donut"
         style={{ maxWidth: '100%', height: 'auto' }}>
      <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke="var(--surface-3)" strokeWidth={stroke} />
      {segments.map((seg, i) => {
        const len = (seg.value / total) * c;
        const dash = `${len} ${c - len}`;
        const offset = -acc;
        acc += len;
        return (
          <circle key={i}
            cx={size / 2} cy={size / 2} r={r}
            fill="none" stroke={seg.color} strokeWidth={stroke}
            strokeDasharray={dash} strokeDashoffset={offset}
            transform={`rotate(-90 ${size/2} ${size/2})`}
            strokeLinecap="butt"
          />
        );
      })}
    </svg>
  );
};

const StatusDot = ({ status }) => <span className={`status-dot ${status}`} />;

const Pill = ({ tone = 'empty', children, dot }) => (
  <span className={`pill ${tone}`}>
    {dot && <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'currentColor', display: 'inline-block' }} />}
    {children}
  </span>
);

Object.assign(window, { Sidebar, Topbar, Sparkline, Donut, StatusDot, Pill });