/* Machine detail page with tabs */

const MachineDetail = ({ machineId, lang, onBack, onReload }) => {
  const t = I18N[lang];
  const baseMachine = DATA.machines.find(m => m.id === machineId);
  const machine = baseMachine ? { ...baseMachine, _onReload: onReload } : null;
  // Legacy-automater starter på inventory (ingen statistics-tab)
  const initialTab = baseMachine?.kind === 'legacy' ? 'inventory' : 'statistics';
  const [tab, setTab] = React.useState(initialTab);
  if (!machine) return <div className="empty">Ingen automat funnet</div>;

  const isLegacyForTabs = baseMachine?.kind === 'legacy';
  const isSuper = !!(window.isSuperView && window.isSuperView());
  // Innstillinger krever tenant_admin (backend: 403 for tenant_worker/operator).
  // Fanen skjules derfor for sjåfører/operatører som kommer hit fra Daglig
  // drift (2026-09-05). roleForTenant tar hensyn til «se som»-simulering.
  const roleHere = window.roleForTenant ? window.roleForTenant(baseMachine?.tenantId) : null;
  const canSettings = roleHere === 'superadmin' || roleHere === 'tenant_admin';
  const tabs = isLegacyForTabs ? [
    { k: 'inventory', label: t.tab_inventory, icon: 'inventory' },
    { k: 'shelves', label: t.tab_shelves, icon: 'door' },
    { k: 'transactions', label: t.tab_transactions, icon: 'transaction' },
    ...(canSettings ? [{ k: 'legacy-settings', label: t.tab_settings, icon: 'settings' }] : []),
  ] : [
    { k: 'statistics', label: t.tab_statistics, icon: 'chart' },
    { k: 'inventory', label: t.tab_inventory, icon: 'inventory' },
    { k: 'fill', label: lang === 'no' ? 'Påfylling' : 'Refill', icon: 'bottle' },
    { k: 'shelves', label: t.tab_shelves, icon: 'door' },
    // Mock-revisjon 2026-09-04: den dekorative 'cameras'-fanen (tegnet SVG,
    // falsk LIVE-HUD, døde slidere) er fjernet — Kamera-oppsett er den ekte.
    // Kamera-oppsett er infrastruktur (ROI, binding, helse) — kun superadmin.
    ...(isSuper ? [{ k: 'cam-setup', label: t.tab_cameras, icon: 'camera' }] : []),
    { k: 'transactions', label: t.tab_transactions, icon: 'transaction' },
    { k: 'events', label: t.tab_events, icon: 'bell' },
    ...(canSettings ? [{ k: 'settings', label: t.tab_settings, icon: 'settings' }] : []),
  ];

  const isLegacy = machine.kind === 'legacy';
  return (
    <>
      <div className="page" style={{ paddingBottom: 0 }}>
        <div className="page-head">
          <div>
            <div className="row" style={{ gap: 8, flexWrap: 'wrap' }}>
              <h1 className="page-title">{machine.name}</h1>
              {isLegacy && (
                <span className="pill warn" style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.05em' }}>
                  v1 GAMMEL TYPE — FIRESTORE
                </span>
              )}
              {!isLegacy && (
                <span className="pill ok" style={{ fontSize: 10 }}>ny type (v2)</span>
              )}
              {/* Produksjonsfase fra backend (2026-09-05): test/oppsett vs. i drift */}
              {!isLegacy && machine.productionStage && (
                <span className={'pill ' + (machine.productionStage === 'levert' ? 'ok' : 'warn')} style={{ fontSize: 10 }}>
                  {machine.productionStage === 'levert'
                    ? (lang === 'no' ? 'i drift' : 'live')
                    : (lang === 'no' ? 'test / oppsett' : 'test / setup')}
                </span>
              )}
              <StatusDot status={machine.status} />
              <span className="muted" style={{ fontSize: 12 }}>
                {machine.status === 'online' ? <span className="live">{t.live}</span> : machine.lastSeen}
              </span>
            </div>
            <div className="page-sub">
              <span className="mono">{machine.id}</span> · {machine.address} · {t.firmware} <span className="mono">{machine.firmware}</span>
              {isLegacy && machine.firestoreLocId && <> · Firestore: <span className="mono">{machine.firestoreLocId}</span></>}
            </div>
          </div>
          <div className="row">
            <button className="btn" onClick={() => onReload && onReload()}>
              <Icon name="refresh" size={14} />{t.refresh}
            </button>
            {!isLegacy && (
              <button className={'btn ' + (machine.maintenanceMode ? 'primary' : 'danger')}
                onClick={async () => {
                  try {
                    await window.api.updateAutomat(machine.id, { maintenance_mode: !machine.maintenanceMode });
                    if (onReload) await onReload();
                  } catch (e) { alert(e.message); }
                }}>
                <Icon name={machine.maintenanceMode ? 'play' : 'pause'} size={14} />
                {machine.maintenanceMode ? (lang === 'no' ? 'Avslutt vedlikehold' : 'End maintenance')
                  : (lang === 'no' ? 'Sett i vedlikehold' : 'Maintenance mode')}
              </button>
            )}
          </div>
        </div>
        {isLegacy && (
          <div style={{
            margin: '4px 0 0', padding: '10px 14px',
            background: 'var(--warn-soft)', borderRadius: 'var(--radius)',
            color: 'var(--warn)', fontSize: 12.5, fontWeight: 500,
            borderLeft: '3px solid var(--warn)',
          }}>
            ℹ v1-automat: kommandoer og innstillinger skrives til Firestore (krever tenant_admin).
            Automaten kjører v1 på Raspberry Pi og henter kommandoer derfra — svar på
            dør-/kamerakommandoer kan ta noen sekunder. Ingen påfyllingsflyt (v2-funksjon).
          </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 === 'statistics' && <Statistics machine={machine} lang={lang} />}
        {tab === 'inventory' && <Inventory machine={machine} lang={lang} />}
        {tab === 'fill' && <FillTab machine={machine} lang={lang} />}
        {tab === 'shelves' && <ShelvesTab machine={machine} lang={lang} />}
        {tab === 'cam-setup' && <CameraSetupPage machine={machine} lang={lang} onReload={onReload} />}
        {tab === 'transactions' && <Transactions machine={machine} lang={lang} />}
        {tab === 'events' && <Events machine={machine} lang={lang} />}
        {tab === 'settings' && <MachineSettings machine={machine} lang={lang} />}
        {tab === 'legacy-settings' && <LegacySettings machine={machine} lang={lang} />}
      </div>
    </>
  );
};

/* ===== Statistics tab ===== */
const Statistics = ({ machine, lang }) => {
  const t = I18N[lang];
  const isSuper = !!(window.isSuperView && window.isSuperView());
  const [range, setRange] = React.useState('30');
  // EKTE data (mock-revisjon 2026-09-04): alt under kommer fra
  // /api/admin/sales/series — Math.sin-illustrasjonene er fjernet.
  const [serie, setSerie] = React.useState(null);
  React.useEffect(() => {
    let dau = false;
    window.api.salesSeries(parseInt(range, 10), machine.id)
      .then(d => { if (!dau) setSerie(d); })
      .catch(() => { if (!dau) setSerie({ feil: true }); });
    return () => { dau = true; };
  }, [range, machine.id]);

  const s = serie && !serie.feil ? serie : null;
  const dagRevs = s ? s.series.map(x => x.revenue_ore) : [];
  const maxRev = Math.max(1, ...dagRevs);
  const bars = dagRevs.map(v => Math.max(2, (v / maxRev) * 100));
  // Backend gir ØRE — fmtKr forventer KRONER (før viste omsetning/salgs-
  // fordeling 100× for høyt, f.eks. «190 000 kr» for 1 900 kr).
  const totalRev = s ? s.revenue_total_ore / 100 : 0;
  const swapTx = s ? s.split.exchange.count : 0;
  const buyTx = s ? s.split.buy.count : 0;
  const swapRev = s ? s.split.exchange.revenue_ore / 100 : 0;
  const buyRev = s ? s.split.buy.revenue_ore / 100 : 0;
  const matrix = s ? s.matrix : null;
  const maxCell = matrix ? Math.max(1, ...matrix.flat()) : 1;

  const days = lang === 'no' ? ['Man','Tir','Ons','Tor','Fre','Lør','Søn'] : ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'];

  return (
    <>
      {serie && serie.feil && (
        <div className="muted" style={{ fontSize: 11, marginBottom: 10 }}>
          {lang === 'no' ? 'Kunne ikke hente salgsserien.' : 'Could not load sales series.'}
        </div>
      )}
      <div className="stat-row" style={{ gap: 22 }}>
        <div className="stat">
          <div className="lbl">{t.revenue} ({range}d)</div>
          <div className="val">{s ? fmtKr(totalRev, lang) : '—'}</div>
        </div>
        <div className="stat">
          <div className="lbl">{t.transactions}</div>
          <div className="val">{s ? fmtNum(s.orders_total, lang) : '—'}</div>
        </div>
        <div className="stat">
          <div className="lbl">{t.avg_basket}</div>
          <div className="val">{s && s.orders_total > 0 ? fmtKr(totalRev / s.orders_total, lang) : '—'}</div>
        </div>
        {/* AI-konfidens er drifts-/plattforminfo — kun superadmin */}
        {isSuper && (
          <div className="stat">
            <div className="lbl">{t.classification_conf}</div>
            <div className="val">{s && s.avg_detected_score != null
              ? `${Math.round(s.avg_detected_score * 100)} %` : '—'}</div>
          </div>
        )}
      </div>

      <div className="split-2">
        <div className="panel">
          <div className="panel-head">
            <h3>{t.revenue} · {range === '7' ? t.last7 : range === '30' ? t.last30 : t.last90}</h3>
            <div className="minitab">
              <button className={range === '7' ? 'on' : ''} onClick={() => setRange('7')}>7d</button>
              <button className={range === '30' ? 'on' : ''} onClick={() => setRange('30')}>30d</button>
              <button className={range === '90' ? 'on' : ''} onClick={() => setRange('90')}>90d</button>
            </div>
          </div>
          <div className="panel-body">
            <div className="bars">
              {bars.map((v, i) => (
                <div key={i} className={'bar' + (i === bars.length - 2 ? ' active' : '')}
                  style={{ height: `${v}%` }} />
              ))}
            </div>
            <div className="row between muted" style={{ fontSize: 11, marginTop: 8 }}>
              <span>{lang === 'no' ? `${range} dager siden` : `${range} days ago`}</span>
              <span>{lang === 'no' ? 'Snitt' : 'Avg'} {s ? fmtKr(totalRev / Math.max(1, bars.length), lang) : '—'}/d</span>
              <span>{lang === 'no' ? 'I dag' : 'Today'}</span>
            </div>
          </div>
        </div>

        <div className="panel">
          <div className="panel-head"><h3>{t.sales_split}</h3></div>
          <div className="panel-body" style={{ display: 'flex', gap: 18, alignItems: 'center', flexWrap: 'wrap', justifyContent: 'center' }}>
            <Donut
              size={140} stroke={20}
              segments={[
                { value: swapRev, color: 'var(--accent)' },
                { value: buyRev, color: 'var(--info)' },
              ]}
            />
            <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 10 }}>
              <div>
                <div className="row" style={{ justifyContent: 'space-between' }}>
                  <span className="row" style={{ gap: 6 }}>
                    <span className="legend"><span className="sw" style={{ background: 'var(--accent)' }} /></span>
                    <span>{t.swap}</span>
                  </span>
                  <span className="num">{fmtKr(swapRev, lang)}</span>
                </div>
                <div className="muted" style={{ fontSize: 11.5 }}>{swapTx} {lang === 'no' ? 'transaksjoner' : 'transactions'}</div>
              </div>
              <div>
                <div className="row" style={{ justifyContent: 'space-between' }}>
                  <span className="row" style={{ gap: 6 }}>
                    <span className="legend"><span className="sw" style={{ background: 'var(--info)' }} /></span>
                    <span>{t.buy} ({lang === 'no' ? 'med ny flaske' : 'with new bottle'})</span>
                  </span>
                  <span className="num">{fmtKr(buyRev, lang)}</span>
                </div>
                <div className="muted" style={{ fontSize: 11.5 }}>{buyTx} {lang === 'no' ? 'transaksjoner' : 'transactions'}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="split-2">
        <div className="panel">
          <div className="panel-head"><h3>{t.top_bottles}</h3></div>
          <div className="panel-body no-pad">
            {/* EKTE salgstall per flasketype (før: lagerbeholdning feilmerket
                som «mest solgte»). Kilde: /sales/series by_bottle. */}
            <table className="tbl">
              <thead>
                <tr>
                  <th>{lang === 'no' ? 'Flaske' : 'Bottle'}</th>
                  <th className="num">{lang === 'no' ? 'Siste uke' : 'Last week'}</th>
                  <th className="num">{lang === 'no' ? 'Siste mnd' : 'Last month'}</th>
                  <th className="num">{lang === 'no' ? 'Totalt (12 mnd)' : 'Total (12 mo)'}</th>
                  <th style={{ width: 110 }}>{lang === 'no' ? 'Andel' : 'Share'}</th>
                </tr>
              </thead>
              <tbody>
                {(s?.by_bottle || []).map(b => {
                  const bt = (window.DATA?.BOTTLE_TYPES || []).find(x => x.id === b.code);
                  return (
                    <tr key={b.code}>
                      <td>
                        <span className="row" style={{ gap: 10, alignItems: 'center' }}>
                          {bt?.image ? (
                            <img src={`/app/img/bottles/${bt.image}`} alt=""
                                 style={{ width: 22, height: 28, objectFit: 'contain' }}
                                 onError={e => { e.target.style.display = 'none'; }} />
                          ) : <BottleGlyph type={b.code} />}
                          <span>{bt?.name || b.name || b.code}</span>
                        </span>
                      </td>
                      <td className="num">{b.count_7d}</td>
                      <td className="num" style={{ fontWeight: 600 }}>{b.count_30d}</td>
                      <td className="num">{b.count_365d}</td>
                      <td>
                        <div className="row" style={{ gap: 6, alignItems: 'center' }}>
                          <div style={{ flex: 1 }}><BarRow pct={b.share_pct} /></div>
                          <span className="muted" style={{ fontSize: 11, minWidth: 30, textAlign: 'right' }}>{b.share_pct}%</span>
                        </div>
                      </td>
                    </tr>
                  );
                })}
                {(!s || (s.by_bottle || []).length === 0) && (
                  <tr><td colSpan="5" className="muted" style={{ textAlign: 'center', padding: 20 }}>
                    {lang === 'no' ? 'Ingen salg registrert ennå' : 'No sales recorded yet'}
                  </td></tr>
                )}
              </tbody>
            </table>
          </div>
        </div>

        <div className="panel">
          <div className="panel-head"><h3>{t.busy_hours}</h3></div>
          <div className="panel-body">
            {/* Mobil: heatmapen side-scroller i egen boks i stedet for å bli grøt */}
            <div style={{ overflowX: 'auto', WebkitOverflowScrolling: 'touch' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '36px 1fr', gap: 6, alignItems: 'center', fontSize: 11, minWidth: 460 }}>
              {[0,1,2,3,4,5,6].map((d) => (
                <React.Fragment key={d}>
                  <span className="muted">{days[d]}</span>
                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(24,1fr)', gap: 2 }}>
                    {Array.from({ length: 24 }).map((_, h) => {
                      // EKTE ordretall per ukedag×time (mock-revisjon 2026-09-04)
                      const v = matrix ? matrix[d][h] / maxCell : 0;
                      return <div key={h} style={{
                        height: 14, borderRadius: 2,
                        background: `color-mix(in oklab, var(--accent) ${Math.min(95, v*95)}%, var(--surface-3))`
                      }} />;
                    })}
                  </div>
                </React.Fragment>
              ))}
              <span />
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(24,1fr)', gap: 2, marginTop: 4, color: 'var(--text-faint)', fontSize: 10 }}>
                {Array.from({ length: 24 }).map((_, h) => (
                  <div key={h} style={{ textAlign: 'center' }}>{h % 3 === 0 ? h : ''}</div>
                ))}
              </div>
            </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

const BarRow = ({ pct }) => (
  <div style={{ height: 6, background: 'var(--surface-3)', borderRadius: 3, overflow: 'hidden' }}>
    <div style={{ width: pct + '%', height: '100%', background: 'var(--accent)' }} />
  </div>
);

const BottleGlyph = ({ type, size = 18 }) => {
  // Farge basert på material — stål=grå, kompositt=oransje, aluminium=blå
  const mat = window.bottleHelpers?.material(type) || 'unknown';
  const color = {
    stal: '#94a3b8', lettstal: '#cbd5e1',
    kompositt: '#fb923c', aluminium: '#60a5fa',
  }[mat] || 'var(--accent)';
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <rect x="9" y="2" width="6" height="2" rx="1" fill={color} />
      <path d="M8 6 Q8 9 6 10 Q5 11 5 13 V20 Q5 21.5 6.5 21.5 H17.5 Q19 21.5 19 20 V13 Q19 11 18 10 Q16 9 16 6 Z" fill={color} opacity="0.85" />
      <rect x="8" y="14" width="8" height="1.4" fill="#1a1100" opacity="0.3" />
    </svg>
  );
};

Object.assign(window, { MachineDetail, BottleGlyph });