/* Platform Overview — superadmin sin landing page.
 *
 * Viser plattform-helse per tenant: hvor mange er klar, hvor mange mangler
 * Stripe/firma-info, sist aktivitet, alarmer, etc.
 *
 * Tilstrebt design: handlingsorientert. Tenants som trenger oppmerksomhet
 * skal være synlige øverst med tydelig CTA.
 */

const PlatformOverview = ({ lang, dataVersion, onPickTenant, onNavigate }) => {
  const [tenants, setTenants] = React.useState([]);
  const [stripeAccounts, setStripeAccounts] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  // Systemstatus (2026-09-05): EKTE verdier fra /health og /stripe/config.
  // undefined = laster, null = kunne ikke hentes.
  const [health, setHealth] = React.useState(undefined);
  const [stripeCfg, setStripeCfg] = React.useState(undefined);

  const refresh = React.useCallback(async () => {
    setLoading(true);
    window.api.health().then(setHealth).catch(() => setHealth(null));
    window.api.stripeConfig().then(setStripeCfg).catch(() => setStripeCfg(null));
    try {
      const [tlist, slist] = await Promise.all([
        window.api.tenantsList(),
        window.api.stripeListAccounts().catch(() => []),
      ]);
      // Hent full info per tenant
      const detailed = await Promise.all(tlist.map(async t => {
        try {
          const detail = await window.api.tenantGet(t.id);
          return { ...t, ...detail };
        } catch { return t; }
      }));
      setTenants(detailed);
      setStripeAccounts(slist);
    } catch (e) { console.warn(e); }
    setLoading(false);
  }, []);
  React.useEffect(() => { refresh(); }, [refresh, dataVersion]);

  // Klassifiser per setup-status
  const tenantStatus = (t) => {
    const stripe = stripeAccounts.find(s => s.tenant_id === t.id);
    const hasCompanyInfo = t.business_name && t.org_number;
    const hasStripe = stripe?.ready;
    const hasAutomats = (DATA.machines || []).some(m => m.tenantId === t.id);
    const steps = [
      { label: 'Firmainfo', done: hasCompanyInfo },
      { label: 'Stripe Connect', done: hasStripe },
      { label: 'Automat tildelt', done: hasAutomats },
    ];
    const completed = steps.filter(s => s.done).length;
    return { steps, completed, total: steps.length,
              ready: completed === steps.length };
  };

  // Plattform-sammendrag
  const totalAutomats = (DATA.machines || []).length;
  const totalOnline = (DATA.machines || []).filter(m => m.status === 'online').length;
  const totalLegacy = (DATA.machines || []).filter(m => m.kind === 'legacy').length;
  const totalV2 = totalAutomats - totalLegacy;
  const orphanAutomats = (DATA.machines || []).filter(m => !m.tenantId).length;
  const tenantsReady = tenants.filter(t => tenantStatus(t).ready).length;

  // Sorter tenants etter "needs attention"-score
  const sorted = [...tenants].sort((a, b) => {
    const sa = tenantStatus(a);
    const sb = tenantStatus(b);
    return sa.completed - sb.completed;
  });

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1 className="page-title">{lang === 'no' ? 'Plattform-oversikt' : 'Platform overview'}</h1>
          <div className="page-sub">
            {tenants.length} tenants · {totalAutomats} automater
            ({totalV2} v2 · {totalLegacy} v1)
          </div>
        </div>
        <div className="row">
          <button className="btn" onClick={refresh} disabled={loading}>
            <Icon name="refresh" size={12} />{lang === 'no' ? 'Oppdater' : 'Refresh'}
          </button>
        </div>
      </div>

      {/* Sammendrag-KPIer */}
      <div className="kpi-grid" style={{ marginBottom: 16 }}>
        <div className="kpi">
          <div className="kpi-label">{lang === 'no' ? 'Tenants' : 'Tenants'}</div>
          <div className="kpi-value">{tenants.length}</div>
          <div className="kpi-delta neutral">
            {tenantsReady} {lang === 'no' ? 'fullt oppsatt' : 'fully set up'}
          </div>
        </div>
        <div className="kpi">
          <div className="kpi-label">{lang === 'no' ? 'Automater' : 'Automats'}</div>
          <div className="kpi-value">{totalAutomats}</div>
          <div className="kpi-delta neutral">
            {totalOnline}/{totalAutomats} {lang === 'no' ? 'online' : 'online'}
          </div>
        </div>
        <div className="kpi">
          <div className="kpi-label">{lang === 'no' ? 'V1 vs V2' : 'V1 vs V2'}</div>
          <div className="kpi-value">{totalV2} / {totalLegacy}</div>
          <div className="kpi-delta neutral">v2 / legacy</div>
        </div>
        {orphanAutomats > 0 && (
          <div className="kpi" style={{ borderColor: 'var(--warn)' }}>
            <div className="kpi-label" style={{ color: 'var(--warn)' }}>
              ⚠ {lang === 'no' ? 'Uten tenant' : 'Orphans'}
            </div>
            <div className="kpi-value" style={{ color: 'var(--warn)' }}>{orphanAutomats}</div>
            <div className="kpi-delta">
              <a onClick={() => onNavigate({ page: 'settings' })}
                  style={{ cursor: 'pointer', color: 'var(--accent)' }}>
                {lang === 'no' ? 'Tildel tenant →' : 'Assign tenant →'}
              </a>
            </div>
          </div>
        )}
      </div>

      <div className="split-2">
        {/* Tenants-tabell */}
        <div className="panel">
          <div className="panel-head">
            <h3>{lang === 'no' ? 'Tenants — setup-status' : 'Tenants — setup status'}</h3>
            <span className="muted mono" style={{ fontSize: 12 }}>
              {tenantsReady}/{tenants.length} {lang === 'no' ? 'klar' : 'ready'}
            </span>
          </div>
          {loading ? (
            <div className="empty">⏳</div>
          ) : tenants.length === 0 ? (
            <div className="empty" style={{ padding: 30 }}>
              <div>{lang === 'no' ? 'Ingen tenants ennå' : 'No tenants yet'}</div>
              <button className="btn primary" style={{ marginTop: 12 }}
                      onClick={() => onNavigate({ page: 'settings' })}>
                + {lang === 'no' ? 'Opprett første tenant' : 'Create first tenant'}
              </button>
            </div>
          ) : (
            <div style={{ padding: 8, display: 'flex', flexDirection: 'column', gap: 8 }}>
              {sorted.map(t => (
                <TenantOnboardingCard key={t.id} t={t} lang={lang}
                  tenantStatus={tenantStatus}
                  onPickTenant={onPickTenant}
                  onNavigate={onNavigate} />
              ))}
            </div>
          )}
        </div>

        {/* Quick actions */}
        <div className="col" style={{ gap: 12 }}>
          <div className="panel">
            <div className="panel-head"><h3>{lang === 'no' ? 'Hurtighandlinger' : 'Quick actions'}</h3></div>
            <div className="panel-body" style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              <button className="btn" onClick={() => onNavigate({ page: 'settings' })}>
                <Icon name="plus" size={12} />{lang === 'no' ? 'Opprett ny tenant' : 'New tenant'}
              </button>
              <button className="btn" onClick={() => onNavigate({ page: 'settings' })}>
                <Icon name="plus" size={12} />{lang === 'no' ? 'Legg til automat' : 'Add automat'}
              </button>
              <button className="btn" onClick={() => onNavigate({ page: 'users' })}>
                <Icon name="users" size={12} />{lang === 'no' ? 'Bruker-administrasjon' : 'User management'}
              </button>
              <button className="btn" onClick={() => onNavigate({ page: 'analytics' })}>
                <Icon name="chart" size={12} />{lang === 'no' ? 'Statistikk' : 'Analytics'}
              </button>
            </div>
          </div>

          <div className="panel">
            <div className="panel-head"><h3>{lang === 'no' ? 'System' : 'System'}</h3></div>
            <div className="panel-body" style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {/* Før 2026-09-05: hardkodet «OK»/«tilkoblet»/«stub-modus» (falsk status) */}
              <div className="row between"><span className="muted" style={{ fontSize: 11 }}>Backend</span>
                {health === undefined ? <span className="muted" style={{ fontSize: 10 }}>…</span>
                  : health && health.status === 'ok' ? <span className="pill ok" style={{ fontSize: 9 }}>OK</span>
                  : <span className="pill danger" style={{ fontSize: 9 }}>{lang === 'no' ? 'ikke tilgjengelig' : 'unavailable'}</span>}</div>
              <div className="row between"><span className="muted" style={{ fontSize: 11 }}>MQTT</span>
                {health === undefined ? <span className="muted" style={{ fontSize: 10 }}>…</span>
                  : health && health.mqtt ? <span className="pill ok" style={{ fontSize: 9 }}>{lang === 'no' ? 'tilkoblet' : 'connected'}</span>
                  : <span className="pill danger" style={{ fontSize: 9 }}>{lang === 'no' ? 'frakoblet' : 'disconnected'}</span>}</div>
              <div className="row between"><span className="muted" style={{ fontSize: 11 }}>Stripe</span>
                {stripeCfg === undefined ? <span className="muted" style={{ fontSize: 10 }}>…</span>
                  : !stripeCfg || !stripeCfg.available ? <span className="pill warn" style={{ fontSize: 9 }}>{lang === 'no' ? 'ikke konfigurert' : 'not configured'}</span>
                  : stripeCfg.test_mode ? <span className="pill info" style={{ fontSize: 9 }}>test</span>
                  : <span className="pill ok" style={{ fontSize: 9 }}>live</span>}</div>
              <div className="row between"><span className="muted" style={{ fontSize: 11 }}>Audit-log</span>
                <a onClick={() => onNavigate({ page: 'activity' })}
                    style={{ cursor: 'pointer', color: 'var(--accent)', fontSize: 11 }}>
                  Se →
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

/* Tenant onboarding-card: viser hver tenant + 3 steg med klikkbar CTA per uferdig steg */
const TenantOnboardingCard = ({ t, lang, tenantStatus, onPickTenant, onNavigate }) => {
  const status = tenantStatus(t);
  const nAutomats = (DATA.machines || []).filter(m => m.tenantId === t.id).length;
  const pickAndGo = (page) => {
    onPickTenant({ id: t.id, name: t.name, sub: '',
                   avatar: t.name.charAt(0).toUpperCase() });
    if (page) onNavigate({ page });
  };
  const goSettings = () => pickAndGo('settings');
  const goStripe   = () => pickAndGo('settings');     // StripeConnectManager finnes der
  const goAutomat  = () => pickAndGo('settings');     // AutomatTenantManager finnes der

  // CTA per uferdig steg
  const stepCtas = [
    { key: 'company', done: !!(t.business_name && t.org_number),
      label: lang === 'no' ? 'Firmainfo (org.nr + adresse)' : 'Company info',
      cta:   lang === 'no' ? 'Fyll ut' : 'Fill in',
      onClick: goSettings },
    { key: 'stripe',  done: status.steps[1].done,
      label: lang === 'no' ? 'Stripe Connect (kortbetaling)' : 'Stripe Connect',
      cta:   lang === 'no' ? 'Sett opp' : 'Set up',
      onClick: goStripe },
    { key: 'automat', done: status.steps[2].done,
      label: lang === 'no' ? 'Automat tildelt tenant' : 'Automat assigned',
      cta:   lang === 'no' ? 'Tildel' : 'Assign',
      onClick: goAutomat },
  ];

  return (
    <div style={{
      padding: 12, borderRadius: 8, border: '1px solid var(--border)',
      background: status.ready ? 'var(--success-soft)' : 'var(--surface-2)',
    }}>
      <div className="row between" style={{ marginBottom: 8 }}>
        <div onClick={() => pickAndGo('overview')} style={{ cursor: 'pointer', flex: 1 }}>
          <div style={{ fontWeight: 600 }}>{t.name}</div>
          <div className="muted mono" style={{ fontSize: 10 }}>
            {t.id} · {nAutomats} {lang === 'no' ? 'automater' : 'automats'}
          </div>
        </div>
        {status.ready
          ? <span className="pill ok" style={{ fontSize: 10 }}>
              ✓ {lang === 'no' ? 'Klar' : 'Ready'}
            </span>
          : <span className="pill warn" style={{ fontSize: 10 }}>
              {status.completed}/{status.total} {lang === 'no' ? 'fullført' : 'done'}
            </span>}
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
        {stepCtas.map(s => (
          <div key={s.key} className="row between"
               style={{ padding: '5px 8px', borderRadius: 4,
                         background: s.done ? 'transparent' : 'var(--warn-soft)' }}>
            <span style={{ fontSize: 12 }}>
              {s.done
                ? <span style={{ color: 'var(--success)', marginRight: 6 }}>✓</span>
                : <span style={{ color: 'var(--warn)', marginRight: 6 }}>○</span>}
              {s.label}
            </span>
            {!s.done && (
              <button className="btn sm primary" onClick={s.onClick}>
                {s.cta} →
              </button>
            )}
          </div>
        ))}
      </div>
    </div>
  );
};

Object.assign(window, { PlatformOverview, TenantOnboardingCard });