/* Main app with login wrapper + live data from real backend */

class ErrorBoundary extends React.Component {
  constructor(p) { super(p); this.state = { err: null }; }
  static getDerivedStateFromError(err) { return { err }; }
  componentDidCatch(err, info) { console.error('UI crash:', err, info); }
  render() {
    if (this.state.err) {
      return (
        <div style={{ padding: 30, maxWidth: 720, margin: '40px auto',
                       color: 'var(--text)', background: 'var(--surface)',
                       border: '1px solid var(--border)', borderRadius: 8 }}>
          <h2 style={{ marginTop: 0 }}>Noe gikk galt</h2>
          <p>En komponent feilet under rendering. Detaljer:</p>
          <pre style={{ padding: 12, background: 'var(--surface-2)',
                        borderRadius: 4, fontSize: 11, overflow: 'auto' }}>
            {String(this.state.err?.message || this.state.err)}
            {'\n\n'}
            {String(this.state.err?.stack || '').slice(0, 800)}
          </pre>
          <div className="row" style={{ gap: 8, marginTop: 14 }}>
            <button className="btn primary" onClick={() => this.setState({ err: null })}>
              Prøv på nytt
            </button>
            <button className="btn" onClick={() => location.reload()}>Last på nytt</button>
          </div>
        </div>
      );
    }
    return this.props.children;
  }
}

const Root = () => {
  const [authed, setAuthed] = React.useState(false);
  const [booting, setBooting] = React.useState(true);

  React.useEffect(() => {
    (async () => {
      if (window.AUTH.isLoggedIn()) {
        try {
          await window.AUTH.loadAllData();
          setAuthed(true);
        } catch {
          window.AUTH.clearSession();
        }
      }
      setBooting(false);
    })();
  }, []);

  if (booting) {
    return (
      <div style={{ minHeight: '100vh', display: 'grid', placeItems: 'center', background: 'var(--bg)', color: 'var(--text-faint)' }}>
        Laster…
      </div>
    );
  }
  if (!authed) return <LoginScreen onSuccess={() => setAuthed(true)} />;
  return <App />;
};

const App = () => {
  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "theme": "dark",
    "density": "normal",
    "accent": "#f59e0b"
  }/*EDITMODE-END*/;

  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [lang, setLang] = React.useState('no');
  const me = window.AUTH.getUser() || {};

  // Bestem brukerens primære rolle (superadmin > tenant_admin > worker)
  const tenantRoles = new Set((me.tenants || []).map(t => t.role));
  const realRole = me.is_superadmin
    ? 'superadmin'
    : tenantRoles.has('tenant_admin')
      ? 'tenant_admin'
      : (tenantRoles.has('tenant_worker') || tenantRoles.has('operator'))
        ? 'worker'
        : 'unknown';

  // Superadmin kan ‚se som“ tenant_admin / worker for å validere oppsett.
  // Null = bruk sin egen rolle.
  const [impersonateRole, setImpersonateRole] = React.useState(null);
  const effectiveRole = impersonateRole || realRole;
  const userRole = effectiveRole;       // bakoverkompat for resten av filen

  // Landing page per effektiv rolle.
  const defaultRoute = effectiveRole === 'superadmin' ? 'platform'
                       : effectiveRole === 'worker'   ? 'operator'
                       : 'overview';

  // Superadmin starter med "alle tenants"; tenant-admin med sin første tenant.
  const initialTenant = me.is_superadmin
    ? { id: '__all__', name: 'Alle tenants', sub: `${DATA.TENANTS.length} tenants`, avatar: '★' }
    : (DATA.TENANTS[0] || { id: 'none', name: '—', sub: '', avatar: '—' });
  const [tenant, setTenant] = React.useState(initialTenant);
  const [route, setRoute] = React.useState({ page: defaultRoute });
  const [reloadKey, setReloadKey] = React.useState(0);
  // Mobil: sidemenyen som skyvbar overlay (hamburger i topbaren)
  const [navOpen, setNavOpen] = React.useState(false);

  // Superadmin «ser som» tenant-admin/operatør: skjul plattforminfo overalt
  // (window.isSuperView() i api-client leser dette flagget).
  window.__impersonating = !!(impersonateRole && impersonateRole !== 'superadmin');
  window.__impersonateRole = impersonateRole;   // leses av window.roleForTenant (api-client)

  // Når superadmin endrer impersonate-modus: hopp til den rollens landing-page
  // og påkrev valgt tenant hvis vi simulerer admin/worker (de har ikke __all__).
  React.useEffect(() => {
    if (impersonateRole && impersonateRole !== 'superadmin') {
      if (tenant.id === '__all__') {
        const first = DATA.TENANTS.find(t => t.id !== '__all__');
        if (first) setTenant(first);
      }
      const newDefault = impersonateRole === 'worker' ? 'operator' : 'overview';
      setRoute({ page: newDefault });
    } else if (impersonateRole === null && me.is_superadmin) {
      setRoute({ page: 'platform' });
    }
  }, [impersonateRole]);

  // ---- Filtrer DATA.machines basert på valgt tenant. ----
  // Tidligere: vi mutert DATA.machinesView OG remountet hele App via
  // `key={reloadKey}` slik at komponentene fikk lest ny verdi. Det
  // ødela scroll-posisjon, åpne drawers og pågående arbeid.
  // Nå: vi bruker et lett "dataVersion"-state-tall som komponentene
  // bruker som useEffect-dep — ingen full remount.
  React.useEffect(() => {
    if (tenant.id === '__all__') {
      DATA.machinesView = DATA.machines;
    } else {
      DATA.machinesView = DATA.machines.filter(m => m.tenantId === tenant.id);
    }
    DATA.activeTenant = tenant;
    setReloadKey(k => k + 1);
  }, [tenant.id]);

  // Hold TENANTS-listen oppdatert med Alle-valg for superadmin
  React.useEffect(() => {
    if (me.is_superadmin) {
      const hasAll = DATA.TENANTS.some(t => t.id === '__all__');
      if (!hasAll) {
        DATA.TENANTS = [
          { id: '__all__', name: 'Alle tenants',
            sub: `${DATA.TENANTS.length} tenants`, avatar: '★' },
          ...DATA.TENANTS,
        ];
      }
    }
  }, []);

  React.useEffect(() => {
    document.documentElement.dataset.theme = tweaks.theme;
    document.documentElement.dataset.density = tweaks.density;
    document.documentElement.style.setProperty('--accent', tweaks.accent);
  }, [tweaks.theme, tweaks.density, tweaks.accent]);

  // INGEN AUTO-REFRESH. Bruker trigger refresh manuelt via knapp.
  // (Tidligere hadde vi 30s setInterval som remountet hele appen — ødela
  //  scroll, drawers, pågående arbeid. Helt fjernet.)
  const manualRefresh = React.useCallback(async () => {
    try { await window.AUTH.loadAllData(); setReloadKey(k => k + 1); }
    catch (e) { console.warn('refresh failed:', e); }
  }, []);

  const t = I18N[lang];

  const crumbs = (() => {
    if (route.page === 'overview') return [{ label: tenant.name }, { label: t.nav_overview }];
    if (route.page === 'machines' || route.machineId) {
      const cs = [
        { label: tenant.name },
        { label: t.nav_machines, onClick: () => setRoute({ page: 'machines' }) },
      ];
      if (route.machineId) {
        const m = DATA.machines.find(mm => mm.id === route.machineId);
        if (m) cs.push({ label: m.name });
      }
      return cs;
    }
    const map = {
      platform: lang === 'no' ? 'Plattform' : 'Platform',
      transactions: t.nav_transactions, events: t.nav_events,
      bottles: t.nav_bottles, users: t.nav_users, settings: t.nav_settings,
      operator: lang === 'no' ? 'Daglig drift' : 'Daily ops',
      refill: lang === 'no' ? 'Fylling' : 'Refill',
      analytics: lang === 'no' ? 'Statistikk' : 'Analytics',
      map: lang === 'no' ? 'Kart' : 'Map',
      areas: lang === 'no' ? 'Områder' : 'Areas',
      activity: lang === 'no' ? 'Aktivitet' : 'Activity',
    };
    return [{ label: tenant.name }, { label: map[route.page] || '' }];
  })();

  // Varsel-teller i sidemenyen: KUN valgt tenants automater (2026-09-04 —
  // før talte den varsler fra alle tenants ved «se som tenant»/multi-tenant).
  const alarmsCount = (() => {
    const ids = new Set(
      (tenant.id === '__all__' ? DATA.machines
        : DATA.machines.filter(m => m.tenantId === tenant.id)).map(m => m.id));
    return DATA.ALARMS.filter(a => a.sev !== 'info' && ids.has(a.machineId)).length;
  })();
  const openMachine = (id) => setRoute({ page: 'machines', machineId: id });

  // dataVersion brukes som useEffect-dep i child-komponenter som vil
  // re-fetche på tenant-skift eller manuell refresh — UTEN full remount.
  const dataVersion = `${tenant.id}::${reloadKey}`;

  return (
    <div className={'app' + (navOpen ? ' nav-open' : '')} data-screen-label="app">
      <Sidebar
        lang={lang}
        tenant={tenant}
        onPickTenant={(tn) => { setTenant(tn); setNavOpen(false); }}
        route={route}
        onNavigate={(r) => { setRoute(r); setNavOpen(false); }}
        alarmsCount={alarmsCount}
        me={me}
        effectiveRole={effectiveRole}
      />
      {/* Mobil: mørkt bakteppe bak den utskjøvne sidemenyen */}
      {navOpen && <div className="sidebar-backdrop" onClick={() => setNavOpen(false)} />}
      <main className="main">
        <Topbar
          lang={lang} setLang={setLang}
          theme={tweaks.theme}
          setTheme={(th) => setTweak('theme', th)}
          crumbs={crumbs}
          onRefresh={manualRefresh}
          onMenu={() => setNavOpen(o => !o)}
          tenant={tenant}
          onNavigate={(r) => { setRoute(r); setNavOpen(false); }}
        />
        {/* Superadmin "viewing as"-banner — velg tenant + valgfri rolle-simulering */}
        {me.is_superadmin && (tenant.id !== '__all__' || impersonateRole) && (
          <div style={{
            padding: '8px 16px', background: 'var(--accent-soft)',
            borderBottom: '1px solid var(--accent)', fontSize: 12,
            display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap',
          }}>
            <Icon name="eye" size={14} style={{ color: 'var(--accent)' }} />
            <span style={{ color: 'var(--accent)', fontWeight: 500 }}>
              {lang === 'no' ? 'Visning:' : 'Viewing:'}{' '}
              {tenant.id !== '__all__' && <strong>{tenant.name}</strong>}
              {impersonateRole && (
                <span>{tenant.id !== '__all__' ? ' · ' : ''}
                  {lang === 'no' ? 'som' : 'as'}{' '}
                  <strong>
                    {impersonateRole === 'tenant_admin' ? 'tenant-admin'
                      : impersonateRole === 'worker' ? (lang === 'no' ? 'operatør' : 'operator')
                      : 'superadmin'}
                  </strong>
                </span>
              )}
            </span>
            <div className="row" style={{ gap: 4 }}>
              <span className="muted" style={{ fontSize: 11 }}>
                {lang === 'no' ? 'Simuler rolle:' : 'Simulate:'}
              </span>
              <button className={'btn sm' + (impersonateRole === null ? ' primary' : '')}
                      onClick={() => setImpersonateRole(null)}>
                Superadmin
              </button>
              <button className={'btn sm' + (impersonateRole === 'tenant_admin' ? ' primary' : '')}
                      onClick={() => setImpersonateRole('tenant_admin')}
                      disabled={tenant.id === '__all__'}>
                Admin
              </button>
              <button className={'btn sm' + (impersonateRole === 'worker' ? ' primary' : '')}
                      onClick={() => setImpersonateRole('worker')}
                      disabled={tenant.id === '__all__'}>
                {lang === 'no' ? 'Operatør' : 'Operator'}
              </button>
            </div>
            <div className="grow" />
            <button className="btn sm" onClick={() => {
              setImpersonateRole(null);
              setTenant({ id: '__all__', name: 'Alle tenants',
                sub: `${DATA.TENANTS.length} tenants`, avatar: '★' });
            }}>
              ← {lang === 'no' ? 'Tilbake til plattform' : 'Back to platform'}
            </button>
          </div>
        )}

        <ErrorBoundary key={route.page + '::' + tenant.id}>
        {route.page === 'platform' && <PlatformOverview lang={lang} dataVersion={dataVersion}
          onPickTenant={setTenant} onNavigate={setRoute} />}
        {route.page === 'overview' && <Overview lang={lang} onOpenMachine={openMachine} dataVersion={dataVersion} tenant={tenant} />}
        {route.page === 'machines' && !route.machineId && <MachinesIndex lang={lang} onOpenMachine={openMachine} dataVersion={dataVersion} tenant={tenant} />}
        {route.page === 'areas' && <AreasPage lang={lang} tenant={tenant} dataVersion={dataVersion} onReload={manualRefresh} />}
        {route.page === 'activity' && <ActivityPage lang={lang} dataVersion={dataVersion} />}
        {route.page === 'machines' && route.machineId && (
          <MachineDetail machineId={route.machineId} lang={lang}
            onBack={() => setRoute({ page: 'machines' })}
            dataVersion={dataVersion}
            onReload={manualRefresh} />
        )}
        {route.page === 'transactions' && <TenantTransactions lang={lang} tenant={tenant} dataVersion={dataVersion} />}
        {route.page === 'events' && <TenantEvents lang={lang} onOpenMachine={openMachine} tenant={tenant} dataVersion={dataVersion} />}
        {route.page === 'operator' && <OperatorDashboard lang={lang} tenant={tenant} dataVersion={dataVersion} onOpenMachine={openMachine} />}
        {route.page === 'refill' && <RefillPage lang={lang} tenant={tenant} dataVersion={dataVersion} onPickTenant={setTenant} />}
        {route.page === 'analytics' && <AnalyticsPage lang={lang} tenant={tenant} dataVersion={dataVersion} />}
        {route.page === 'map' && <MapPage lang={lang} tenant={tenant} dataVersion={dataVersion} />}
        {route.page === 'bottles' && <Bottles lang={lang} dataVersion={dataVersion} />}
        {route.page === 'users' && <Users lang={lang} />}
        {route.page === 'settings' && <AdminSettings lang={lang} me={me} onReload={manualRefresh} />}
        </ErrorBoundary>
      </main>

      <TweaksPanel title="Tweaks">
        <TweakSection label={lang === 'no' ? 'Utseende' : 'Appearance'}>
          <TweakRadio label={lang === 'no' ? 'Tema' : 'Theme'} value={tweaks.theme}
            options={[{ value: 'dark', label: 'Dark' }, { value: 'light', label: 'Light' }]}
            onChange={(v) => setTweak('theme', v)} />
          <TweakRadio label={lang === 'no' ? 'Tetthet' : 'Density'} value={tweaks.density}
            options={[
              { value: 'compact', label: 'Tett' },
              { value: 'normal', label: 'Normal' },
              { value: 'roomy', label: 'Luftig' },
            ]} onChange={(v) => setTweak('density', v)} />
          <TweakColor label={lang === 'no' ? 'Aksent' : 'Accent'} value={tweaks.accent}
            options={['#f59e0b', '#3b82f6', '#a78bfa', '#10b981', '#f43f5e']}
            onChange={(v) => setTweak('accent', v)} />
        </TweakSection>
        <TweakSection label={lang === 'no' ? 'Språk' : 'Language'}>
          <TweakRadio label="Lang" value={lang}
            options={[{ value: 'no', label: 'Norsk' }, { value: 'en', label: 'English' }]}
            onChange={setLang} />
        </TweakSection>
        <TweakSection label="Konto">
          <button className="btn danger" style={{ width: '100%' }}
            onClick={() => { window.AUTH.clearSession(); location.reload(); }}>
            Logg ut ({me.email || ''})
          </button>
        </TweakSection>
      </TweaksPanel>
    </div>
  );
};

/* Standalone machines index */
const MachinesIndex = ({ lang, onOpenMachine, tenant, dataVersion }) => {
  const t = I18N[lang];
  // Beregn fra prop, ikke fra mutert DATA.machinesView (som ikke trigger re-render)
  const activeTenant = tenant || DATA.activeTenant || { id: '__all__' };
  const machines = React.useMemo(() => (
    activeTenant.id === '__all__'
      ? DATA.machines
      : DATA.machines.filter(m => m.tenantId === activeTenant.id)
  ), [activeTenant.id, dataVersion]);
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1 className="page-title">{t.nav_machines}</h1>
          <div className="page-sub">{machines.length} {lang === 'no' ? 'automater i tenanten' : 'machines in tenant'}</div>
        </div>
      </div>
      <div className="panel">
        <MachineTable machines={machines} lang={lang} onOpen={onOpenMachine} />
      </div>
    </div>
  );
};

/* Tenant-wide transactions — henter pr-automat fra backend, slår sammen */
const TenantTransactions = ({ lang, tenant, dataVersion }) => {
  const t = I18N[lang];
  const [allTx, setAllTx] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [sortKey, setSortKey] = React.useState('ts');
  const [sortDir, setSortDir] = React.useState('desc');
  const [stateFilter, setStateFilter] = React.useState('all');     // all|complete|error
  const [openTx, setOpenTx] = React.useState(null);
  const [period, setPeriod] = React.useState('10');                // '10' | '7' | '30' | '90'

  // Eksplisitt tenant-scope fra prop (ikke fra mutert DATA.activeTenant)
  const activeTenant = tenant || DATA.activeTenant || { id: '__all__', name: 'Alle' };
  const machines = activeTenant.id === '__all__'
    ? DATA.machines
    : DATA.machines.filter(m => m.tenantId === activeTenant.id);
  const machineIds = machines.map(m => m.id).join(',');

  React.useEffect(() => {
    setLoading(true);
    // Map periode til API-kall: '10' = siste 10 (limit=10, days=365 så vi tar uavhengig av tid)
    let perAutomatLimit = 100, days = 30;
    if (period === '10')  { perAutomatLimit = 10;  days = 365; }
    else if (period === '7')  { perAutomatLimit = 50; days = 7;  }
    else if (period === '30') { perAutomatLimit = 100; days = 30; }
    else if (period === '90') { perAutomatLimit = 200; days = 90; }
    // Send tenant_id eksplisitt slik at backend dobbelt-validerer
    const tenantQ = activeTenant.id !== '__all__' ? { tenant_id: activeTenant.id } : {};
    Promise.all(machines.map(m =>
      window.api.listOrders({ automat_id: m.id, days, limit: perAutomatLimit, ...tenantQ })
        .catch(() => [])
    )).then(perAutomat => {
      // Slå sammen + map til enhetlig form. Behold ALLE råfelter for detalj-view.
      const merged = [].concat(...perAutomat).slice(0, 2000);
      setAllTx(merged.map(r => {
        // Samme status-logikk som automat-fanen (tables.jsx orderStatusKey):
        // kreditert/delvis kreditert vinner over fullført, avbrutt ≠ feil.
        const key = orderStatusKey(r);
        return {
          ...r,            // behold raw så detail-drawer kan vise alt
          _ts: new Date(r.created_at).getTime(),
          _amount: (r.price_ore || 0) / 100,
          _status: key,
          _success: key === 'fullført' && (r.price_ore || 0) > 0,
          _refunded: key === 'kreditert' || key === 'delvis-kreditert',
          _failed: key === 'feil' || key === 'avbrutt',
          _machineName: r.automat_location || r.automat_id,
        };
      }));
      setLoading(false);
    }).catch(e => { console.warn(e); setLoading(false); });
  }, [machineIds, activeTenant.id, period, dataVersion]);

  // Sorter etter sort-key først (klient-side), så slice til 10/etc hvis 'period === 10'
  // gjør vi allerede via API-limit, så ingen ekstra slice her.

  // Filtrer + sorter
  const filtered = React.useMemo(() => {
    let rows = allTx;
    if (stateFilter === 'complete') rows = rows.filter(x => x._success);
    if (stateFilter === 'error')    rows = rows.filter(x => x._failed);
    if (stateFilter === 'refunded') rows = rows.filter(x => x._refunded);
    const dir = sortDir === 'asc' ? 1 : -1;
    const cmp = {
      ts:       (a, b) => (a._ts - b._ts) * dir,
      machine:  (a, b) => a._machineName.localeCompare(b._machineName) * dir,
      type:     (a, b) => (a.kind || '').localeCompare(b.kind || '') * dir,
      bottle:   (a, b) => (a.bottle_out || '').localeCompare(b.bottle_out || '') * dir,
      amount:   (a, b) => (a._amount - b._amount) * dir,
      state:    (a, b) => (a.session_state || '').localeCompare(b.session_state || '') * dir,
    }[sortKey] || ((a, b) => 0);
    return [...rows].sort(cmp);
  }, [allTx, stateFilter, sortKey, sortDir]);

  // Sum KUN av vellykkede
  const sumKr = filtered.filter(x => x._success).reduce((s, x) => s + x._amount, 0);
  const failedCount = filtered.filter(x => x._failed).length;

  const setSort = (key) => {
    if (key === sortKey) setSortDir(d => d === 'asc' ? 'desc' : 'asc');
    else { setSortKey(key); setSortDir('desc'); }
  };
  const SortTh = ({ k, children, num }) => (
    <th onClick={() => setSort(k)} className={num ? 'num' : ''}
        style={{ cursor: 'pointer', userSelect: 'none' }}>
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
        {children}
        {sortKey === k && <span style={{ fontSize: 10 }}>{sortDir === 'asc' ? '▲' : '▼'}</span>}
      </span>
    </th>
  );

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1 className="page-title">{t.nav_transactions}</h1>
          <div className="page-sub">
            {lang === 'no' ? 'Tenant' : 'Tenant'}: <strong>{activeTenant.name}</strong>
            {' · '}
            {machines.length} {lang === 'no' ? 'automater' : 'machines'}
            {' · '}
            <span className="muted mono" style={{ fontSize: 11 }}>{activeTenant.id}</span>
          </div>
        </div>
        <div className="row">
          <div className="stat-row" style={{ gap: 22 }}>
            <div className="stat"><div className="lbl">{lang === 'no' ? 'Sum (vellykket)' : 'Sum (success)'}</div><div className="val">{fmtKr(sumKr, lang)}</div></div>
            <div className="stat"><div className="lbl">{lang === 'no' ? 'Vellykket' : 'OK'}</div><div className="val">{filtered.filter(x => x._success).length}</div></div>
            {failedCount > 0 && (
              <div className="stat"><div className="lbl" style={{ color: 'var(--danger)' }}>{lang === 'no' ? 'Feilet' : 'Failed'}</div><div className="val" style={{ color: 'var(--danger)' }}>{failedCount}</div></div>
            )}
            <div className="stat"><div className="lbl">{lang === 'no' ? 'Totalt' : 'Total'}</div><div className="val">{filtered.length}</div></div>
          </div>
        </div>
      </div>
      <div className="panel">
        <div className="toolbar" style={{ flexWrap: 'wrap', gap: 8 }}>
          <div className="minitab">
            <button className={period === '10' ? 'on' : ''} onClick={() => setPeriod('10')}>{lang === 'no' ? 'Siste 10' : 'Last 10'}</button>
            <button className={period === '7'  ? 'on' : ''} onClick={() => setPeriod('7')}>7 d</button>
            <button className={period === '30' ? 'on' : ''} onClick={() => setPeriod('30')}>30 d</button>
            <button className={period === '90' ? 'on' : ''} onClick={() => setPeriod('90')}>90 d</button>
          </div>
          <div className="minitab">
            <button className={stateFilter === 'all'      ? 'on' : ''} onClick={() => setStateFilter('all')}>{lang === 'no' ? 'Alle' : 'All'}</button>
            <button className={stateFilter === 'complete' ? 'on' : ''} onClick={() => setStateFilter('complete')}>{lang === 'no' ? 'Vellykket' : 'OK'}</button>
            <button className={stateFilter === 'error'    ? 'on' : ''} onClick={() => setStateFilter('error')}>{lang === 'no' ? 'Feilet/avbrutt' : 'Failed/cancelled'}</button>
            <button className={stateFilter === 'refunded' ? 'on' : ''} onClick={() => setStateFilter('refunded')}>{lang === 'no' ? 'Kreditert' : 'Refunded'}</button>
          </div>
          <span className="muted mono" style={{ fontSize: 11.5 }}>{filtered.length}/{allTx.length}</span>
          <div className="grow" />
        </div>
        <div style={{ overflow: 'auto', maxHeight: 'calc(100vh - 320px)' }}>
          {loading ? (
            <div className="empty">⏳ {lang === 'no' ? 'Henter transaksjoner…' : 'Loading transactions…'}</div>
          ) : filtered.length === 0 ? (
            <div className="empty">{lang === 'no'
              ? (period === '10' ? 'Ingen transaksjoner blant siste 10' : `Ingen transaksjoner siste ${period} dager`)
              : (period === '10' ? 'No transactions in last 10' : `No transactions in last ${period} days`)}</div>
          ) : (
          <table className="tbl">
            <thead>
              <tr>
                <th style={{ width: 60 }}></th>
                <SortTh k="ts">{lang === 'no' ? 'Tid' : 'Time'}</SortTh>
                <SortTh k="machine">Automat</SortTh>
                <SortTh k="type">{lang === 'no' ? 'Type' : 'Type'}</SortTh>
                <SortTh k="bottle">{lang === 'no' ? 'Flaske' : 'Bottle'}</SortTh>
                <SortTh k="state">Status</SortTh>
                <SortTh k="amount" num>{lang === 'no' ? 'Beløp' : 'Amount'}</SortTh>
              </tr>
            </thead>
            <tbody>
              {filtered.slice(0, 500).map((x, i) => (
                <tr key={(x.order_id || 'tx') + '_' + i} onClick={() => setOpenTx(x)} style={{ cursor: 'pointer' }}>
                  <td><TxThumb machineId={x.automat_id} order={x} /></td>
                  <td className="mono" style={{ fontSize: 12 }}>
                    {new Date(x.created_at).toLocaleString('no-NO', { dateStyle: 'short', timeStyle: 'short' })}
                  </td>
                  <td><span style={{ fontWeight: 500 }}>{x._machineName}</span></td>
                  <td>{x.kind === 'exchange'
                    ? <Pill tone="accent" dot>{t.swap}</Pill>
                    : <Pill tone="info" dot>{t.buy}</Pill>}</td>
                  <td>{x.bottle_out || <span className="muted">—</span>}</td>
                  <td>{stateBadge(x)}</td>
                  <td className="num" style={{ fontWeight: 600 }}>
                    {x._success ? fmtKr(x._amount, lang) : <span className="muted">—</span>}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
          )}
        </div>
      </div>

      {openTx && window.TransactionDetail && (
        <window.TransactionDetail
          order={openTx}
          machine={{ id: openTx.automat_id, location: openTx._machineName }}
          lang={lang}
          onClose={() => setOpenTx(null)} />
      )}
    </div>
  );
};

/* Tenant-wide events */
const TenantEvents = ({ lang, onOpenMachine, tenant, dataVersion }) => {
  const t = I18N[lang];
  const [evs, setEvs] = React.useState([]);
  const [sev, setSev] = React.useState('all');
  const activeTenantId = (tenant || DATA.activeTenant || {}).id;
  React.useEffect(() => {
    window.api.recentAlarms().then(rows => {
      setEvs(rows.map(r => ({
        id: 'EV-' + r.id,
        ts: { text: new Date(r.sent_at).toLocaleString('no-NO', { timeStyle: 'short' }),
              date: new Date(r.sent_at).toLocaleDateString('no-NO'),
              raw: new Date(r.sent_at).getTime() },
        sev: r.severity === 'critical' || r.severity === 'high' ? 'danger'
           : r.severity === 'medium' ? 'warn' : 'info',
        msg_no: r.message, msg_en: r.message,
        machineName: r.automat_id, machineId: r.automat_id,
      })));
    }).catch(console.warn);
  }, [activeTenantId, dataVersion]);
  // Filter til kun denne tenants automater
  const tenantMachineIds = new Set(
    (activeTenantId === '__all__' || !activeTenantId)
      ? DATA.machines.map(m => m.id)
      : DATA.machines.filter(m => m.tenantId === activeTenantId).map(m => m.id)
  );
  const filtered = evs
    .filter(e => tenantMachineIds.has(e.machineId))
    .filter(e => sev === 'all' || e.sev === sev);
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1 className="page-title">{t.nav_events}</h1>
          <div className="page-sub">{lang === 'no' ? 'Hendelseslogg og alarmer på tvers av alle automater' : 'Event log and alarms across all machines'}</div>
        </div>
      </div>
      <div className="panel">
        <div className="toolbar">
          <div className="section-title">{lang === 'no' ? 'Alle hendelser' : 'All events'}</div>
          <span className="muted mono" style={{ fontSize: 11.5 }}>{filtered.length}/{evs.length}</span>
          <div className="grow" />
          <div className="minitab">
            <button className={sev === 'all' ? 'on' : ''} onClick={() => setSev('all')}>{lang === 'no' ? 'Alle' : 'All'}</button>
            <button className={sev === 'danger' ? 'on' : ''} onClick={() => setSev('danger')}>{t.sev_danger}</button>
            <button className={sev === 'warn' ? 'on' : ''} onClick={() => setSev('warn')}>{t.sev_warn}</button>
            <button className={sev === 'info' ? 'on' : ''} onClick={() => setSev('info')}>{t.sev_info}</button>
          </div>
        </div>
        <div style={{ overflow: 'auto', maxHeight: 'calc(100vh - 280px)' }}>
          <table className="tbl">
            <thead><tr><th style={{ width: 30 }}></th><th>{t.ev_time}</th><th>{t.ev_sev}</th>
                       <th>{t.ev_msg}</th><th>{t.ev_machine}</th><th>ID</th></tr></thead>
            <tbody>
              {filtered.map(e => (
                <tr key={e.id} style={{ cursor: 'pointer' }} onClick={() => onOpenMachine(e.machineId)}>
                  <td>{e.sev === 'danger' && <span style={{ color: 'var(--danger)' }}><Icon name="warning" size={14} /></span>}
                      {e.sev === 'warn' && <span style={{ color: 'var(--warn)' }}><Icon name="warning" size={14} /></span>}
                      {e.sev === 'info' && <span style={{ color: 'var(--info)' }}><Icon name="info" size={14} /></span>}</td>
                  <td className="mono" style={{ fontSize: 12 }}>{e.ts.text}<div className="muted" style={{ fontSize: 11 }}>{e.ts.date}</div></td>
                  <td>{e.sev === 'danger' && <Pill tone="danger">{t.sev_danger}</Pill>}
                      {e.sev === 'warn' && <Pill tone="warn">{t.sev_warn}</Pill>}
                      {e.sev === 'info' && <Pill tone="info">{t.sev_info}</Pill>}</td>
                  <td>{lang === 'no' ? e.msg_no : e.msg_en}</td>
                  <td><span style={{ fontWeight: 500 }}>{e.machineName}</span></td>
                  <td className="mono" style={{ color: 'var(--text-faint)' }}>{e.id}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
};

const AdminSettings = ({ lang, me, onReload }) => {
  const t = I18N[lang];
  const isSuper = !!me?.is_superadmin;
  const no = lang === 'no';
  // Faner (2026-09-04): tenant-info først; automat-tilhørighet, Stripe og
  // system i egne faner — automat-tabellen skal ikke være det første tenanten ser.
  const tabs = [
    { k: 'tenant', label: no ? 'Tenant' : 'Tenant', icon: 'users' },
    ...(isSuper ? [
      { k: 'automats', label: no ? 'Automater & tilhørighet' : 'Automats & assignment', icon: 'machine' },
      { k: 'stripe', label: 'Stripe Connect', icon: 'transaction' },
    ] : []),
    { k: 'system', label: no ? 'System' : 'System', icon: 'settings' },
  ];
  const [tab, setTab] = React.useState('tenant');

  return (
    <>
      <div className="page" style={{ paddingBottom: 0 }}>
        <div className="page-head">
          <div>
            <h1 className="page-title">{t.nav_settings}</h1>
            <div className="page-sub">
              {isSuper
                ? (no ? 'Tenant-info, automat-tilhørighet, Stripe og system' : 'Tenant info, automat assignment, Stripe, system')
                : (no ? 'Innstillinger' : 'Settings')}
            </div>
          </div>
        </div>
      </div>
      <div className="tabs">
        {tabs.map(tb => (
          <div key={tb.k} className={'tab' + (tab === tb.k ? ' active' : '')} onClick={() => setTab(tb.k)}>
            <Icon name={tb.icon} size={14} />{tb.label}
          </div>
        ))}
      </div>
      <div className="page">
        {tab === 'tenant' && (<>
          <TenantCompanyInfoForms lang={lang} me={me} />
          <PWAInstallPanel lang={lang} />
        </>)}
        {tab === 'automats' && isSuper && (<>
          <QuickCreateActions lang={lang} onReload={onReload} />
          <AutomatTenantManager lang={lang} onReload={onReload} />
        </>)}
        {tab === 'stripe' && isSuper && <StripeConnectManager lang={lang} />}
        {tab === 'system' && (<>
          <RolesInfoCard lang={lang} />
          <SystemInfoPanels lang={lang} me={me} />
        </>)}
      </div>
    </>
  );
};

const RolesInfoCard = ({ lang }) => (
  <div className="panel" style={{ marginTop: 16 }}>
    <div className="panel-head"><h3>{lang === 'no' ? 'Roller' : 'Roles'}</h3></div>
    <div className="panel-body">
      <table className="tbl">
        <thead><tr><th>Rolle</th><th>Tilgang</th></tr></thead>
        <tbody>
          <tr><td><Pill tone="accent">Superadmin</Pill></td>
              <td>{lang === 'no' ? 'Alt — tenants, automater, brukere, Stripe, kvitteringer, alle data' : 'Everything'}</td></tr>
          <tr><td><Pill tone="info">Tenant_admin</Pill></td>
              <td>{lang === 'no'
                ? 'Sin tenant: opprett brukere, endre kvittering-info, se rapporter. Kan IKKE legge til nye automater.'
                : 'Their tenant: create users, edit receipt info, view reports. Cannot add new automats.'}</td></tr>
          <tr><td><Pill tone="empty">Tenant_worker</Pill></td>
              <td>{lang === 'no'
                ? 'Åpne dører + fylle automater. Tilgang til fylling-modul.'
                : 'Open doors + fill automats. Refill module access.'}</td></tr>
        </tbody>
      </table>
    </div>
  </div>
);

const PWAInstallPanel = ({ lang }) => {
  const [installable, setInstallable] = React.useState(false);
  const [installed, setInstalled] = React.useState(false);
  React.useEffect(() => {
    const handler = (e) => { e.preventDefault(); window._deferredInstall = e; setInstallable(true); };
    window.addEventListener('beforeinstallprompt', handler);
    const onInstalled = () => setInstalled(true);
    window.addEventListener('appinstalled', onInstalled);
    if (window.matchMedia('(display-mode: standalone)').matches) setInstalled(true);
    return () => {
      window.removeEventListener('beforeinstallprompt', handler);
      window.removeEventListener('appinstalled', onInstalled);
    };
  }, []);
  const install = async () => {
    if (window._deferredInstall) {
      window._deferredInstall.prompt();
      const r = await window._deferredInstall.userChoice;
      if (r.outcome === 'accepted') setInstallable(false);
    }
  };
  return (
    <div className="panel" style={{ marginTop: 16 }}>
      <div className="panel-head"><h3>App-installasjon (PWA)</h3></div>
      <div className="panel-body" style={{ fontSize: 12.5 }}>
        {installed
          ? <div style={{ color: 'var(--success)' }}>✓ Appen er installert</div>
          : installable
            ? (<>
              <p>Installer denne PWA-en på Android-nettbrett for full-skjerm bruk uten browser-chrome.</p>
              <button className="btn primary" onClick={install}>
                📱 Installer på dette nettbrettet
              </button>
            </>)
            : (<>
              <p>For å installere som app: åpne nettleser-menyen og velg <strong>"Legg til på startskjermen"</strong>.
                  PWA-en fungerer offline (siste data caches) og åpnes som vanlig app.</p>
              <div className="muted" style={{ marginTop: 8 }}>
                Manifest: <a href="/admin/manifest.webmanifest" target="_blank">manifest.webmanifest</a>
              </div>
            </>)}
      </div>
    </div>
  );
};

const TenantCompanyInfoForms = ({ lang, me }) => {
  const [openTenant, setOpenTenant] = React.useState(null);
  const tenants = (DATA.TENANTS || []).filter(t => t.id !== '__all__');
  return (
    <div className="panel" style={{ marginTop: 16 }}>
      <div className="panel-head">
        <h3>{lang === 'no' ? 'Tenant kvittering-info' : 'Tenant receipt info'}</h3>
      </div>
      <div className="panel-body" style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
        <div className="muted" style={{ fontSize: 12, marginBottom: 8 }}>
          {lang === 'no'
            ? 'Påkrevd iht. Bokføringsforskriften §5-3 — vises på alle kvitteringer som sendes til kunder.'
            : 'Required by Norwegian regulations.'}
        </div>
        {tenants.map(t => (
          <div key={t.id} className="row between" style={{ padding: 8, borderBottom: '1px solid var(--border)' }}>
            <span>{t.name}</span>
            <button className="btn sm" onClick={() => setOpenTenant(t.id)}>
              {lang === 'no' ? 'Rediger' : 'Edit'}
            </button>
          </div>
        ))}
      </div>
      {openTenant && (
        <TenantCompanyEditModal tenantId={openTenant} lang={lang}
                                  onClose={() => setOpenTenant(null)} />
      )}
    </div>
  );
};

const TenantCompanyEditModal = ({ tenantId, lang, onClose }) => {
  const [form, setForm] = React.useState(null);
  const [busy, setBusy] = React.useState(false);
  const [err, setErr] = React.useState(null);
  const [logoBusy, setLogoBusy] = React.useState(false);
  const logoInputRef = React.useRef(null);

  React.useEffect(() => {
    window.api.tenantGet(tenantId).then(setForm).catch(e => setErr(e.message));
  }, [tenantId]);

  // Hvis lasting feilet (form er fortsatt null), vis en feil-skall i stedet for
  // en blank skjerm — ellers ville den fangede feilen aldri blitt vist.
  if (!form) {
    if (!err) return null;     // laster fortsatt
    return (
      <>
        <div className="drawer-backdrop" onClick={onClose} style={{ zIndex: 100 }} />
        <div style={{ position: 'fixed', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
          zIndex: 101, width: 'min(420px, 92vw)', padding: 20, background: 'var(--surface)',
          border: '1px solid var(--border)', borderRadius: 'var(--radius-lg)' }}>
          <div style={{ color: 'var(--danger)', marginBottom: 12 }}>❌ {err}</div>
          <div className="row" style={{ justifyContent: 'flex-end' }}>
            <button className="btn" onClick={onClose}>Lukk</button>
          </div>
        </div>
      </>
    );
  }
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const uploadLogo = async (fileList) => {
    const file = fileList && fileList[0];
    if (!file) return;
    setLogoBusy(true); setErr(null);
    try {
      const r = await window.api.uploadTenantLogo(tenantId, file, 'brand');
      set('brand_logo_url', r.url);            // cache-bar URL fra serveren
    } catch (e) { setErr(e.message); }
    setLogoBusy(false);
  };

  // Kun superadmin kan (de)aktivere en tenant — «ser som»-simulering skjuler også
  const isSuper = !!(window.isSuperView && window.isSuperView());

  const submit = async () => {
    setBusy(true); setErr(null);
    try {
      // Send kun redigerbare felt (TenantReceiptInfo) — ikke hele GET-svaret
      // (id, stripe_*, løpenumre …). `active` sendes bare av superadmin
      // (2026-09-05; før ble hele objektet sendt og `active` ignorert stille).
      const EDITABLE = ['name', 'business_name', 'org_number', 'vat_registered',
        'address_line1', 'address_line2', 'postal_code', 'city', 'country', 'bank_account',
        'invoice_email', 'receipt_footer', 'logo_url', 'contact_email', 'contact_phone',
        'brand_primary_color', 'brand_logo_url'];
      const patch = {};
      EDITABLE.forEach(k => { if (k in form) patch[k] = form[k]; });
      if (isSuper) patch.active = form.active !== false; else delete patch.active;
      // Tomme e-postfelt → null («fjern»), ikke tom streng (ugyldig adresse → 422)
      ['invoice_email', 'contact_email'].forEach(k => { if (patch[k] === '') patch[k] = null; });
      await window.api.tenantUpdate(tenantId, patch);
      onClose();
    } catch (e) { setErr(e.message); }
    setBusy(false);
  };

  const F = { form, set };   // felles props til TenantField (modulnivå-komponent)

  return (
    <>
      <div className="drawer-backdrop" onClick={onClose} style={{ zIndex: 100 }} />
      <div style={{
        position: 'fixed', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
        zIndex: 101, width: 'min(640px, 95vw)', maxHeight: '90vh', overflow: 'auto',
        padding: 20, background: 'var(--surface)', border: '1px solid var(--border)',
        borderRadius: 'var(--radius-lg)',
      }}>
        <h3 style={{ margin: '0 0 14px' }}>{form.name} — kvittering-info</h3>
        {isSuper && (
          <label className="row" style={{ gap: 8, fontSize: 12.5, marginBottom: 12, padding: '8px 10px',
                                          background: form.active === false ? 'var(--warn-soft)' : 'var(--surface-2)',
                                          borderRadius: 'var(--radius)', cursor: 'pointer' }}>
            <input type="checkbox" checked={form.active !== false}
                   onChange={e => set('active', e.target.checked)} />
            <span>
              <strong>{lang === 'no' ? 'Aktiv tenant' : 'Active tenant'}</strong>
              <span className="muted" style={{ marginLeft: 6 }}>
                {lang === 'no'
                  ? 'Deaktivert: skjules for brukere og salgssider. Kun superadmin kan endre.'
                  : 'Inactive: hidden from users and sales pages. Superadmin only.'}
              </span>
            </span>
          </label>
        )}
        <div className="form-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          <TenantField {...F} label={lang === 'no' ? 'Visningsnavn' : 'Display name'} k="name" cols={2} />
          <TenantField {...F} label={lang === 'no' ? 'Juridisk navn' : 'Legal name'} k="business_name" cols={2} />
          <TenantField {...F} label="Org.nr (9 siffer)" k="org_number" />
          <div style={{ display: 'flex', alignItems: 'flex-end' }}>
            <label className="row" style={{ gap: 6, fontSize: 12 }}>
              <input type="checkbox" checked={!!form.vat_registered}
                     onChange={e => set('vat_registered', e.target.checked)} />
              MVA-pliktig
            </label>
          </div>
          <TenantField {...F} label={lang === 'no' ? 'Adresse linje 1' : 'Address 1'} k="address_line1" cols={2} />
          <TenantField {...F} label={lang === 'no' ? 'Adresse linje 2' : 'Address 2'} k="address_line2" cols={2} />
          <TenantField {...F} label="Postnummer" k="postal_code" />
          <TenantField {...F} label="Sted" k="city" />
          <TenantField {...F} label="Bankkonto" k="bank_account" />
          <TenantField {...F} label="Faktura-epost" k="invoice_email" type="email" />
          <TenantField {...F} label="Kontakt-epost" k="contact_email" type="email" />
          <TenantField {...F} label="Kontakt-telefon" k="contact_phone" type="tel" />
          <TenantField {...F} label="Logo URL kvittering (https://...)" k="logo_url" cols={2} />
          <div style={{ gridColumn: 'span 2' }}>
            <label className="muted" style={{ fontSize: 11 }}>
              {lang === 'no' ? 'Footer-tekst på kvittering' : 'Receipt footer text'}
            </label>
            <textarea className="input" rows="3" value={form.receipt_footer || ''}
                      onChange={e => set('receipt_footer', e.target.value)} />
          </div>

          {/* ============ Kunde-side branding (egen profil på handle-siden) ============ */}
          <div style={{ gridColumn: 'span 2', marginTop: 12, paddingTop: 14,
                        borderTop: '2px solid var(--accent, #ff5b24)' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ fontSize: 17 }}>🎨</span>
              <div style={{ fontWeight: 700, fontSize: 14 }}>
                {lang === 'no' ? 'Kunde-side branding — logo & farge' : 'Customer page branding — logo & color'}
              </div>
            </div>
            <div className="muted" style={{ fontSize: 11.5, marginTop: 3 }}>
              {lang === 'no'
                ? 'Vises på automat-handle-siden kundene ser. «Levert av J-Gass» vises alltid og kan ikke fjernes.'
                : 'Shown on the customer purchase page. "Levert av J-Gass" is always visible and cannot be removed.'}
            </div>
          </div>

          {/* Logo: opplasting med preview (span 2) */}
          <div style={{ gridColumn: 'span 2', display: 'flex', gap: 14, alignItems: 'center', flexWrap: 'wrap' }}>
            <div style={{
              width: 104, height: 60, borderRadius: 10, flexShrink: 0,
              border: '1px solid var(--border)', overflow: 'hidden',
              background: (form.brand_primary_color && /^#[0-9a-fA-F]{6}$/.test(form.brand_primary_color))
                ? form.brand_primary_color + '14' : 'var(--surface-2, #f3f4f6)',
              display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              {form.brand_logo_url
                ? <img src={form.brand_logo_url} alt="" style={{ maxHeight: '82%', maxWidth: '88%', objectFit: 'contain' }}
                       onError={e => { e.target.style.visibility = 'hidden'; }} />
                : <span className="muted" style={{ fontSize: 10 }}>{lang === 'no' ? 'Ingen logo' : 'No logo'}</span>}
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              <input ref={logoInputRef} type="file"
                     accept="image/png,image/jpeg,image/webp,image/svg+xml"
                     style={{ display: 'none' }} onChange={e => uploadLogo(e.target.files)} />
              <div className="row" style={{ gap: 6 }}>
                <button type="button" className="btn sm primary" disabled={logoBusy}
                        onClick={() => logoInputRef.current && logoInputRef.current.click()}>
                  {logoBusy ? '⏳ …' : (lang === 'no' ? '⬆ Last opp logo' : '⬆ Upload logo')}
                </button>
                {form.brand_logo_url
                  ? <button type="button" className="btn sm" onClick={() => set('brand_logo_url', '')}>
                      {lang === 'no' ? 'Fjern' : 'Remove'}
                    </button>
                  : null}
              </div>
              <span className="muted" style={{ fontSize: 10 }}>PNG / JPG / SVG · maks 2 MB</span>
            </div>
          </div>

          {/* Aksentfarge */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
            <label className="muted" style={{ fontSize: 11 }}>
              {lang === 'no' ? 'Aksentfarge' : 'Accent color'}
            </label>
            <div className="row" style={{ gap: 8, alignItems: 'center' }}>
              <input type="color" value={form.brand_primary_color || '#ff5b24'}
                     onChange={e => set('brand_primary_color', e.target.value)}
                     style={{ width: 40, height: 34, padding: 0, border: 'none', background: 'none' }} />
              <input className="input" placeholder="#ff5b24"
                     value={form.brand_primary_color || ''}
                     onChange={e => set('brand_primary_color', e.target.value)}
                     style={{ flex: 1 }} />
            </div>
          </div>

          {/* Alternativ: ekstern logo-URL */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
            <label className="muted" style={{ fontSize: 11 }}>
              {lang === 'no' ? 'eller logo-URL (https://...)' : 'or logo URL (https://...)'}
            </label>
            <input className="input" placeholder="https://...png"
                   value={form.brand_logo_url || ''}
                   onChange={e => set('brand_logo_url', e.target.value)} />
          </div>
        </div>
        {err && <div style={{ marginTop: 10, color: 'var(--danger)' }}>❌ {err}</div>}
        <div className="row" style={{ marginTop: 16, gap: 8, justifyContent: 'flex-end' }}>
          <button className="btn" onClick={onClose} disabled={busy}>Avbryt</button>
          <button className="btn primary" onClick={submit} disabled={busy}>
            {busy ? '⏳' : (lang === 'no' ? 'Lagre' : 'Save')}
          </button>
        </div>
      </div>
    </>
  );
};

/* Skjemafelt for tenant-info — på modulnivå (2026-09-05): en komponent
   definert INNE i modalen fikk ny identitet per render, så input-feltet ble
   remontert og mistet fokus for hvert tastetrykk. */
const TenantField = ({ label, k, type = 'text', cols = 1, form, set }) => (
  <div style={{ gridColumn: `span ${cols}`, display: 'flex', flexDirection: 'column', gap: 3 }}>
    <label className="muted" style={{ fontSize: 11 }}>{label}</label>
    <input className="input" type={type} value={form[k] || ''}
           onChange={e => set(k, e.target.value)} />
  </div>
);

/* Systemstatus (2026-09-05): EKTE verdier fra GET /health og /stripe/config.
   Før: hardkodet «✓ aktiv» for Vipps/Stripe/Twilio/MQTT/Firestore (falsk
   status). Vipps/SMS/SMTP vises ikke — backend eksponerer ingen status for dem. */
const SystemInfoPanels = ({ lang, me }) => {
  const no = lang === 'no';
  const [health, setHealth] = React.useState(undefined);      // undefined=laster, null=feil
  const [stripeCfg, setStripeCfg] = React.useState(undefined);
  React.useEffect(() => {
    window.api.health().then(setHealth).catch(() => setHealth(null));
    window.api.stripeConfig().then(setStripeCfg).catch(() => setStripeCfg(null));
  }, []);
  const pending = <span className="muted">…</span>;
  const backendTxt = health === undefined ? pending
    : health && health.status === 'ok' ? <span style={{ color: 'var(--success)' }}>✓ OK</span>
    : <span style={{ color: 'var(--danger)' }}>✗ {no ? 'ikke tilgjengelig' : 'unavailable'}</span>;
  const mqttTxt = health === undefined ? pending
    : health && health.mqtt ? <span style={{ color: 'var(--success)' }}>✓ {no ? 'tilkoblet' : 'connected'}</span>
    : <span style={{ color: 'var(--danger)' }}>✗ {no ? 'frakoblet' : 'disconnected'}</span>;
  const stripeTxt = stripeCfg === undefined ? pending
    : !stripeCfg || !stripeCfg.available ? <span style={{ color: 'var(--warn)' }}>{no ? 'ikke konfigurert' : 'not configured'}</span>
    : stripeCfg.test_mode ? <span style={{ color: 'var(--info)' }}>test</span>
    : <span style={{ color: 'var(--success)' }}>live</span>;
  return (
    <div className="split-3" style={{ marginTop: 16 }}>
        <div className="panel">
          <div className="panel-head"><h3>{no ? 'Integrasjoner' : 'Integrations'}</h3></div>
          <div className="panel-body" style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            <KVPRow label="Stripe" value={stripeTxt} />
            <KVPRow label="MQTT-broker" value={mqttTxt} />
          </div>
        </div>
        <div className="panel">
          <div className="panel-head"><h3>System</h3></div>
          <div className="panel-body" style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            <KVPRow label="Backend" value={backendTxt} />
            <KVPRow label={no ? 'Admin-panel' : 'Admin UI'} value={window.APP_VERSION || '—'} />
          </div>
        </div>
        <div className="panel">
          <div className="panel-head"><h3>{lang === 'no' ? 'Konto' : 'Account'}</h3></div>
          <div className="panel-body" style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            <KVPRow label="E-post" value={me?.email || '—'} />
            <KVPRow label="Tilgang" value={`${(me?.tenants || []).length} tenants`} />
          </div>
        </div>
      </div>
  );
};

const KVPRow = ({ label, value }) => (
  <div className="row between" style={{ padding: '6px 0', borderBottom: '1px solid var(--border)' }}>
    <span className="muted" style={{ fontSize: 12 }}>{label}</span>
    <span style={{ fontSize: 12.5, fontWeight: 500 }}>{value}</span>
  </div>
);

/* Superadmin: hurtighandlinger med wizard for ny tenant + automat */
const QuickCreateActions = ({ lang, onReload }) => {
  const [showTenant, setShowTenant] = React.useState(false);
  const [showAutomat, setShowAutomat] = React.useState(false);
  return (
    <div className="panel" style={{ marginTop: 16 }}>
      <div className="panel-head"><h3>{lang === 'no' ? 'Hurtighandlinger' : 'Quick actions'}</h3></div>
      <div className="panel-body" style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
        <button className="btn primary" onClick={() => setShowTenant(true)}>
          <Icon name="plus" size={14} />{lang === 'no' ? 'Ny tenant' : 'New tenant'}
        </button>
        <button className="btn primary" onClick={() => setShowAutomat(true)}>
          <Icon name="plus" size={14} />{lang === 'no' ? 'Ny automat' : 'New automat'}
        </button>
      </div>
      {showTenant && <TenantCreateModal lang={lang} onClose={() => setShowTenant(false)}
                                          onDone={() => { setShowTenant(false); onReload(); }} />}
      {showAutomat && <AutomatCreateWizard lang={lang} onClose={() => setShowAutomat(false)}
                                             onDone={() => { setShowAutomat(false); onReload(); }} />}
    </div>
  );
};

const TenantCreateModal = ({ lang, onClose, onDone }) => {
  const [name, setName] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [phone, setPhone] = React.useState('');
  const [busy, setBusy] = React.useState(false);
  const [err, setErr] = React.useState(null);
  const submit = async () => {
    if (!name.trim()) { setErr('Navn påkrevd'); return; }
    // E-post er valgfri, men hvis den er fylt ut må den være gyldig — ellers
    // avviser backend hele opprettelsen (streng EmailStr-validering).
    const em = email.trim();
    if (em && !/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(em)) {
      setErr('Ugyldig e-post — la feltet stå tomt eller skriv en gyldig adresse');
      return;
    }
    setBusy(true); setErr(null);
    try {
      await window.api.tenantCreate({ name: name.trim(), contact_email: em || null, contact_phone: phone.trim() || null });
      onDone();
    } catch (e) { setErr(e.message); }
    setBusy(false);
  };
  return (
    <>
      <div className="drawer-backdrop" onClick={onClose} style={{ zIndex: 100 }} />
      <div style={{
        position: 'fixed', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
        zIndex: 101, width: 'min(480px, 95vw)', padding: 20,
        background: 'var(--surface)', border: '1px solid var(--border)',
        borderRadius: 'var(--radius-lg)',
      }}>
        <h3 style={{ margin: '0 0 14px' }}>{lang === 'no' ? 'Opprett ny tenant' : 'Create new tenant'}</h3>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          <div>
            <label className="muted" style={{ fontSize: 11 }}>{lang === 'no' ? 'Navn (organisasjon)' : 'Name'}</label>
            <input className="input" value={name} onChange={e => setName(e.target.value)}
                   autoFocus placeholder={lang === 'no' ? 'F.eks. Hervik Camping AS' : 'e.g. Acme Corp'} />
          </div>
          <div>
            <label className="muted" style={{ fontSize: 11 }}>{lang === 'no' ? 'Kontakt-epost' : 'Contact email'}</label>
            <input className="input" type="email" value={email} onChange={e => setEmail(e.target.value)} />
          </div>
          <div>
            <label className="muted" style={{ fontSize: 11 }}>{lang === 'no' ? 'Telefon' : 'Phone'}</label>
            <input className="input" type="tel" value={phone} onChange={e => setPhone(e.target.value)} />
          </div>
        </div>
        <div className="muted" style={{ fontSize: 11, marginTop: 8 }}>
          {lang === 'no'
            ? 'Etter opprettelse: fyll inn firmainfo (org.nr/adresse), opprett Stripe-konto og tildel automater.'
            : 'After creation: fill in company info, set up Stripe, assign automats.'}
        </div>
        {err && <div style={{ marginTop: 10, color: 'var(--danger)' }}>❌ {err}</div>}
        <div className="row" style={{ marginTop: 16, justifyContent: 'flex-end', gap: 8 }}>
          <button className="btn" onClick={onClose} disabled={busy}>{lang === 'no' ? 'Avbryt' : 'Cancel'}</button>
          <button className="btn primary" onClick={submit} disabled={busy}>
            {busy ? '⏳' : (lang === 'no' ? 'Opprett' : 'Create')}
          </button>
        </div>
      </div>
    </>
  );
};

const AutomatCreateWizard = ({ lang, onClose, onDone }) => {
  const [step, setStep] = React.useState(1);
  const [form, setForm] = React.useState({
    id: '', location: '', tenant_id: '', kind: 'v2',
    firestore_loc_id: '', lat: null, lon: null,
  });
  const [busy, setBusy] = React.useState(false);
  const [err, setErr] = React.useState(null);
  const tenants = (DATA.TENANTS || []).filter(t => t.id !== '__all__');
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const submit = async () => {
    setBusy(true); setErr(null);
    try {
      await window.api.createAutomat({
        id: form.id, location: form.location,
        tenant_id: form.tenant_id || null, kind: form.kind,
        firestore_loc_id: form.kind === 'legacy' ? form.firestore_loc_id : null,
      });
      // Hvis GPS gitt — sett etterpå
      if (form.lat && form.lon) {
        try { await window.api.setAutomatLocation(form.id, { lat: form.lat, lon: form.lon }); }
        catch {}
      }
      onDone();
    } catch (e) { setErr(e.message); }
    setBusy(false);
  };

  const canNext = step === 1 ? form.id && form.location
                   : step === 2 ? !!form.tenant_id
                   : step === 3 ? true       // GPS valgfri
                   : true;

  return (
    <>
      <div className="drawer-backdrop" onClick={onClose} style={{ zIndex: 100 }} />
      <div style={{
        position: 'fixed', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
        zIndex: 101, width: 'min(560px, 95vw)', maxHeight: '90vh', overflow: 'auto',
        padding: 20, background: 'var(--surface)', border: '1px solid var(--border)',
        borderRadius: 'var(--radius-lg)',
      }}>
        <div className="row between" style={{ marginBottom: 14 }}>
          <h3 style={{ margin: 0 }}>{lang === 'no' ? 'Ny automat' : 'New automat'}</h3>
          <span className="muted mono" style={{ fontSize: 11 }}>Steg {step}/3</span>
        </div>
        {/* Progress dots */}
        <div className="row" style={{ gap: 6, marginBottom: 14 }}>
          {[1, 2, 3].map(s => (
            <span key={s} style={{
              flex: 1, height: 4, borderRadius: 2,
              background: s <= step ? 'var(--accent)' : 'var(--surface-3)',
            }} />
          ))}
        </div>

        {step === 1 && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <div>
              <label className="muted" style={{ fontSize: 11 }}>Automat-ID (unik, a-z0-9-)</label>
              <input className="input" value={form.id} autoFocus
                     onChange={e => set('id', e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, '-'))}
                     placeholder="automat-tjorhom-1" />
            </div>
            <div>
              <label className="muted" style={{ fontSize: 11 }}>{lang === 'no' ? 'Lokasjon (vises i UI)' : 'Location'}</label>
              <input className="input" value={form.location} onChange={e => set('location', e.target.value)}
                     placeholder="Tjørhom Camping" />
            </div>
            <div>
              <label className="muted" style={{ fontSize: 11 }}>Type</label>
              <div className="row" style={{ gap: 8 }}>
                <label className="row" style={{ gap: 6 }}>
                  <input type="radio" checked={form.kind === 'v2'} onChange={() => set('kind', 'v2')} />
                  v2 (ESP32 + MQTT)
                </label>
                <label className="row" style={{ gap: 6 }}>
                  <input type="radio" checked={form.kind === 'legacy'} onChange={() => set('kind', 'legacy')} />
                  v1 (legacy)
                </label>
              </div>
            </div>
            {form.kind === 'legacy' && (
              <div>
                <label className="muted" style={{ fontSize: 11 }}>Firestore location_id</label>
                <input className="input" value={form.firestore_loc_id}
                       onChange={e => set('firestore_loc_id', e.target.value)} />
              </div>
            )}
          </div>
        )}

        {step === 2 && (
          <div>
            <label className="muted" style={{ fontSize: 11 }}>{lang === 'no' ? 'Hvilken tenant?' : 'Which tenant?'}</label>
            <select value={form.tenant_id} onChange={e => set('tenant_id', e.target.value)}
                    style={{ width: '100%', background: 'var(--surface-2)', color: 'var(--text)',
                             border: '1px solid var(--border)', borderRadius: 4, padding: 8, fontSize: 13 }}>
              <option value="">— {lang === 'no' ? 'Velg tenant' : 'Pick tenant'} —</option>
              {tenants.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}
            </select>
            <div className="muted" style={{ fontSize: 11, marginTop: 8 }}>
              {lang === 'no'
                ? 'Tenanten må ha aktiv Stripe Connect for at automaten skal kunne ta betalt med kort.'
                : 'Tenant must have active Stripe Connect for card payments.'}
            </div>
          </div>
        )}

        {step === 3 && (
          <div>
            <div className="muted" style={{ fontSize: 11, marginBottom: 8 }}>
              {lang === 'no' ? 'GPS-posisjon (valgfri — kan settes via kartet senere)' : 'GPS (optional)'}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
              <input className="input" type="number" step="0.000001" placeholder="Lat (f.eks. 59.4)"
                     value={form.lat || ''} onChange={e => set('lat', parseFloat(e.target.value) || null)} />
              <input className="input" type="number" step="0.000001" placeholder="Lon (f.eks. 5.5)"
                     value={form.lon || ''} onChange={e => set('lon', parseFloat(e.target.value) || null)} />
            </div>
            <button className="btn sm" style={{ marginTop: 8 }} onClick={() => {
              if (!navigator.geolocation) return alert('GPS ikke tilgjengelig');
              navigator.geolocation.getCurrentPosition(p => {
                set('lat', p.coords.latitude); set('lon', p.coords.longitude);
              });
            }}>📍 {lang === 'no' ? 'Bruk min posisjon' : 'Use my position'}</button>
            <div className="muted" style={{ fontSize: 11, marginTop: 12 }}>
              {lang === 'no'
                ? 'For v2: ESP32-controlleren vil automatisk publisere ekte GPS-koordinater når den kommer online.'
                : 'v2 controller publishes real GPS once online.'}
            </div>
          </div>
        )}

        {err && <div style={{ marginTop: 10, color: 'var(--danger)' }}>❌ {err}</div>}
        <div className="row" style={{ marginTop: 16, justifyContent: 'space-between', gap: 8 }}>
          <button className="btn" onClick={step === 1 ? onClose : () => setStep(step - 1)} disabled={busy}>
            {step === 1 ? (lang === 'no' ? 'Avbryt' : 'Cancel') : '← ' + (lang === 'no' ? 'Forrige' : 'Back')}
          </button>
          {step < 3 ? (
            <button className="btn primary" onClick={() => setStep(step + 1)} disabled={!canNext}>
              {lang === 'no' ? 'Neste' : 'Next'} →
            </button>
          ) : (
            <button className="btn primary" onClick={submit} disabled={busy}>
              {busy ? '⏳' : '✓ ' + (lang === 'no' ? 'Opprett automat' : 'Create automat')}
            </button>
          )}
        </div>
      </div>
    </>
  );
};

/* Superadmin-only: tildel automater til tenants */
const AutomatTenantManager = ({ lang, onReload }) => {
  const [automats, setAutomats] = React.useState([]);
  const [busy, setBusy] = React.useState(null);
  const [error, setError] = React.useState(null);
  const tenants = (DATA.TENANTS || []).filter(t => t.id !== '__all__');

  const refresh = React.useCallback(async () => {
    try {
      const list = await window.api.req('GET', '/api/admin/automats');
      setAutomats(list);
    } catch (e) { setError(e.message); }
  }, []);

  React.useEffect(() => { refresh(); }, [refresh]);

  const assignTenant = async (automatId, newTenantId) => {
    setBusy(automatId);
    setError(null);
    try {
      await window.api.updateAutomat(automatId, { tenant_id: newTenantId || '' });
      await refresh();
      if (onReload) await onReload();        // oppdater DATA.machines globalt
    } catch (e) {
      setError(`${automatId}: ${e.message}`);
    }
    setBusy(null);
  };

  const setStage = async (automatId, stage) => {
    setBusy(automatId);
    setError(null);
    try {
      await window.api.updateAutomat(automatId, { production_stage: stage });
      await refresh();
    } catch (e) {
      setError(`${automatId}: ${e.message}`);
    }
    setBusy(null);
  };

  const no = lang === 'no';
  const orphans = automats.filter(a => !a.tenant_id);
  const [filter, setFilter] = React.useState('all');   // all | orphans | <tenantId>
  const tenantName = (id) => (tenants.find(t => t.id === id) || {}).name || id;
  // Uten tenant først, deretter gruppert per tenant (alfabetisk), så lokasjon
  const vis = automats
    .filter(a => filter === 'all' ? true : filter === 'orphans' ? !a.tenant_id : a.tenant_id === filter)
    .slice()
    .sort((a, b) => {
      if (!a.tenant_id !== !b.tenant_id) return a.tenant_id ? 1 : -1;
      const ta = tenantName(a.tenant_id || ''), tb = tenantName(b.tenant_id || '');
      if (ta !== tb) return ta.localeCompare(tb, 'nb');
      return (a.location || '').localeCompare(b.location || '', 'nb');
    });
  // Betalingsruting (speiler regelen i payment_stripe.init): tenantens
  // Connect brukes KUN når automaten er i produksjon ('levert') OG tenantens
  // Connect-konto er klar — ellers plattformens TEST-Stripe.
  const [connect, setConnect] = React.useState({});
  React.useEffect(() => {
    window.api.stripeListAccounts()
      .then(list => {
        const m = {};
        (list || []).forEach(x => { m[x.tenant_id] = !!x.charges_enabled; });
        setConnect(m);
      }).catch(() => {});
  }, []);
  const ruting = (a) => {
    if (a.production_stage !== 'levert') {
      return <Pill tone="warn" dot>{no ? 'Test · plattformens test-Stripe' : 'Test · platform test Stripe'}</Pill>;
    }
    if (a.tenant_id && connect[a.tenant_id]) {
      return <Pill tone="ok" dot>{no ? 'Produksjon · tenantens Stripe' : 'Production · tenant Stripe'}</Pill>;
    }
    return <Pill tone="warn" dot title={no ? 'Sett i produksjon, men tenanten mangler klar Stripe Connect' : 'Production stage but tenant has no ready Stripe Connect'}>
      {no ? 'I drift, uten tenant-Stripe → test-Stripe' : 'Live, no tenant Stripe → test Stripe'}
    </Pill>;
  };

  return (
    <div className="panel" style={{ marginTop: 16 }}>
      <div className="panel-head">
        <h3>{no ? 'Automater og tenant-tilhørighet' : 'Automats and tenant assignment'}</h3>
        <div className="actions">
          {orphans.length > 0 && (
            <span className="pill warn">{orphans.length} {no ? 'uten tenant' : 'unassigned'}</span>
          )}
          <select className="select" value={filter} onChange={e => setFilter(e.target.value)}>
            <option value="all">{no ? 'Alle automater' : 'All automats'}</option>
            <option value="orphans">{no ? 'Kun uten tenant' : 'Unassigned only'}</option>
            {tenants.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}
          </select>
          <button className="btn sm" onClick={refresh}>
            <Icon name="refresh" size={12} />{no ? 'Oppdater' : 'Refresh'}
          </button>
        </div>
      </div>
      <div className="muted" style={{ padding: '8px 16px', fontSize: 11.5, borderBottom: '1px solid var(--border)' }}>
        {no
          ? 'Velges en tenant, arver automaten automatisk tenantens kvitterings-, firma- og betalingsoppsett. Betaling går til tenantens egen Stripe Connect FØRST når automaten settes i produksjon — i testfase (eller om tenanten mangler Stripe-nøkler) brukes plattformens test-Stripe.'
          : 'Assigning a tenant makes the automat inherit its receipt, company and payment setup. Payment routes to the tenant’s Stripe Connect only once the automat is set to production.'}
      </div>
      {error && (
        <div style={{ padding: '8px 16px', color: 'var(--danger)', fontSize: 12 }}>
          ❌ {error}
        </div>
      )}
      <table className="tbl">
        <thead>
          <tr>
            <th>ID</th>
            <th>{no ? 'Lokasjon' : 'Location'}</th>
            <th>Type</th>
            <th>Tenant</th>
            <th>{no ? 'Fase' : 'Stage'}</th>
            <th>{no ? 'Betalingsruting' : 'Payment routing'}</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          {vis.map(a => (
            <tr key={a.id} style={{ background: a.tenant_id ? 'transparent' : 'var(--warn-soft)' }}>
              <td className="mono" style={{ fontSize: 11.5 }}>{a.id}</td>
              <td>{a.location}</td>
              <td>{a.kind === 'legacy'
                ? <Pill tone="warn">v1 (gammel)</Pill>
                : <Pill tone="ok">v2</Pill>}
              </td>
              <td>
                <select
                  className="select"
                  value={a.tenant_id || ''}
                  disabled={busy === a.id}
                  onChange={(e) => assignTenant(a.id, e.target.value)}
                  style={{ minWidth: 160 }}>
                  <option value="">{no ? '— Ingen tenant —' : '— No tenant —'}</option>
                  {tenants.map(t => (
                    <option key={t.id} value={t.id}>{t.name}</option>
                  ))}
                </select>
              </td>
              <td>
                {a.kind === 'legacy' ? <span className="muted">—</span> : (
                  <select className="select"
                          value={a.production_stage || 'produksjon'}
                          disabled={busy === a.id}
                          onChange={(e) => setStage(a.id, e.target.value)}>
                    <option value="produksjon">{no ? 'Test / oppsett' : 'Test / setup'}</option>
                    <option value="levert">{no ? 'Produksjon (i drift)' : 'Production (live)'}</option>
                  </select>
                )}
              </td>
              <td>{a.kind === 'legacy' ? <span className="muted">v1 (Vipps i v1)</span> : ruting(a)}</td>
              <td>
                {busy === a.id ? <span className="muted">⏳</span>
                  : a.online ? <Pill tone="ok" dot>Online</Pill>
                  : <Pill tone="empty" dot>Offline</Pill>}
              </td>
            </tr>
          ))}
          {vis.length === 0 && (
            <tr><td colSpan="7" className="empty" style={{ padding: 20 }}>
              {no ? 'Ingen automater i dette utvalget' : 'No automats in this selection'}
            </td></tr>
          )}
        </tbody>
      </table>
    </div>
  );
};

/* Stripe Connect-management — kun synlig for superadmin */
const StripeConnectManager = ({ lang }) => {
  const [config, setConfig] = React.useState(null);
  const [accounts, setAccounts] = React.useState([]);
  const [busy, setBusy] = React.useState(null);
  const [error, setError] = React.useState(null);

  const refresh = React.useCallback(async () => {
    try {
      const [cfg, accs] = await Promise.all([
        window.api.stripeConfig(),
        window.api.stripeListAccounts(),
      ]);
      setConfig(cfg);
      setAccounts(accs);
    } catch (e) { setError(e.message); }
  }, []);

  React.useEffect(() => { refresh(); }, [refresh]);

  const createAccount = async (tenantId) => {
    setBusy(tenantId); setError(null);
    try {
      await window.api.stripeCreateAccount(tenantId, {});
      await refresh();
    } catch (e) { setError(`${tenantId}: ${e.message}`); }
    setBusy(null);
  };

  const onboard = async (tenantId) => {
    setBusy(tenantId); setError(null);
    try {
      const link = await window.api.stripeOnboardLink(tenantId, {});
      if (link.url && link.url !== '#stripe-stub-onboarding') {
        window.open(link.url, '_blank');
      } else {
        alert(lang === 'no'
          ? 'Stripe i stub-modus — sett STRIPE_SECRET_KEY i backend-config'
          : 'Stripe in stub mode — set STRIPE_SECRET_KEY');
      }
    } catch (e) { setError(`${tenantId}: ${e.message}`); }
    setBusy(null);
  };

  const refreshStatus = async (tenantId) => {
    setBusy(tenantId);
    try { await window.api.stripeAccountStatus(tenantId); await refresh(); }
    catch (e) { setError(`${tenantId}: ${e.message}`); }
    setBusy(null);
  };

  const openDashboard = async (tenantId) => {
    setBusy(tenantId);
    try {
      const link = await window.api.stripeDashboardLink(tenantId);
      if (link.url && link.url !== '#stripe-stub-dashboard') {
        window.open(link.url, '_blank');
      }
    } catch (e) { setError(`${tenantId}: ${e.message}`); }
    setBusy(null);
  };

  const disconnect = async (tenantId) => {
    if (!confirm(lang === 'no'
      ? 'Frikoble Stripe-account fra tenanten? Eksisterende betalinger berøres ikke.'
      : 'Disconnect Stripe account from tenant?')) return;
    setBusy(tenantId);
    try { await window.api.stripeDisconnect(tenantId); await refresh(); }
    catch (e) { setError(`${tenantId}: ${e.message}`); }
    setBusy(null);
  };

  if (!config) return null;
  const stub = !config.available;

  return (
    <div className="panel" style={{ marginTop: 16 }}>
      <div className="panel-head">
        <h3>Stripe Connect</h3>
        <div className="actions">
          {stub
            ? <span className="pill warn" title="STRIPE_SECRET_KEY ikke satt">⚠ Stub-modus</span>
            : config.test_mode
              ? <span className="pill info">TEST-modus</span>
              : <span className="pill ok">LIVE</span>}
          {config.platform_fee_bps > 0 && (
            <span className="muted" style={{ fontSize: 11 }}>
              Plattform-fee: {(config.platform_fee_bps / 100).toFixed(2)} %
            </span>
          )}
          <button className="btn sm" onClick={refresh}>
            <Icon name="refresh" size={12} />{lang === 'no' ? 'Oppdater' : 'Refresh'}
          </button>
        </div>
      </div>
      {stub && (
        <div style={{ padding: '8px 16px', fontSize: 12, color: 'var(--warn)' }}>
          Stripe-pakken er installert men <code>STRIPE_SECRET_KEY</code> er ikke satt.
          Du kan teste flyten i stub-modus — ekte betalinger og refusjoner krever ekte nøkkel.
        </div>
      )}
      {error && (
        <div style={{ padding: '8px 16px', fontSize: 12, color: 'var(--danger)' }}>
          ❌ {error}
        </div>
      )}
      <table className="tbl">
        <thead>
          <tr>
            <th>Tenant</th>
            <th>Account ID</th>
            <th>Type</th>
            <th>Charges</th>
            <th>Payouts</th>
            <th>Onboarding</th>
            <th style={{ width: 280 }}>{lang === 'no' ? 'Handlinger' : 'Actions'}</th>
          </tr>
        </thead>
        <tbody>
          {accounts.map(a => {
            const hasAcc = !!a.stripe_account_id;
            return (
              <tr key={a.tenant_id}>
                <td><span style={{ fontWeight: 500 }}>{a.tenant_name}</span>
                  <div className="muted mono" style={{ fontSize: 11 }}>{a.tenant_id}</div>
                </td>
                <td className="mono" style={{ fontSize: 11 }}>{a.stripe_account_id || <span className="muted">—</span>}</td>
                <td>{a.account_type || <span className="muted">—</span>}</td>
                <td>{hasAcc
                  ? a.charges_enabled
                    ? <Pill tone="ok">✓</Pill>
                    : <Pill tone="warn">venter</Pill>
                  : <span className="muted">—</span>}
                </td>
                <td>{hasAcc
                  ? a.payouts_enabled
                    ? <Pill tone="ok">✓</Pill>
                    : <Pill tone="warn">venter</Pill>
                  : <span className="muted">—</span>}
                </td>
                <td>{hasAcc
                  ? a.details_submitted
                    ? <Pill tone="ok">fullført</Pill>
                    : <Pill tone="warn">ufullført</Pill>
                  : <span className="muted">—</span>}
                </td>
                <td>
                  <div className="row" style={{ gap: 4, flexWrap: 'wrap' }}>
                    {!hasAcc && (
                      <button className="btn sm primary" disabled={busy === a.tenant_id}
                              onClick={() => createAccount(a.tenant_id)}>
                        {lang === 'no' ? 'Opprett' : 'Create'}
                      </button>
                    )}
                    {hasAcc && !a.details_submitted && (
                      <button className="btn sm primary" disabled={busy === a.tenant_id}
                              onClick={() => onboard(a.tenant_id)}>
                        {lang === 'no' ? 'Onboard' : 'Onboard'}
                      </button>
                    )}
                    {hasAcc && a.details_submitted && (
                      <button className="btn sm" disabled={busy === a.tenant_id}
                              onClick={() => openDashboard(a.tenant_id)}>
                        Dashboard
                      </button>
                    )}
                    {hasAcc && (
                      <button className="btn sm" disabled={busy === a.tenant_id}
                              onClick={() => refreshStatus(a.tenant_id)}>
                        <Icon name="refresh" size={11} />
                      </button>
                    )}
                    {hasAcc && (
                      <button className="btn sm danger" disabled={busy === a.tenant_id}
                              onClick={() => disconnect(a.tenant_id)}>
                        {lang === 'no' ? 'Frikoble' : 'Disconnect'}
                      </button>
                    )}
                  </div>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<Root />);