/* Analytics-side: customer-funnel + refill-stats + stock-forecast + eksport-knapper */

const AnalyticsPage = ({ lang, tenant, dataVersion }) => {
  const [tab, setTab] = React.useState('customer');
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1 className="page-title">{lang === 'no' ? 'Statistikk' : 'Analytics'}</h1>
          <div className="page-sub">{tenant?.name || (lang === 'no' ? 'Alle' : 'All')}</div>
        </div>
      </div>
      <div className="tabs" style={{ marginBottom: 12 }}>
        {[
          { k: 'compare',  label: lang === 'no' ? 'Sammenlign automater' : 'Compare automats', icon: 'chart' },
          { k: 'customer', label: lang === 'no' ? 'Kunde-funnel' : 'Customer funnel', icon: 'users' },
          { k: 'refill',   label: lang === 'no' ? 'Fyll-statistikk' : 'Refill stats', icon: 'bottle' },
          { k: 'stock',    label: lang === 'no' ? 'Lager-prognose' : 'Stock forecast', icon: 'inventory' },
          { k: 'exports',  label: lang === 'no' ? 'CSV-eksport' : 'Exports', icon: 'download' },
        ].map(t => (
          <div key={t.k} className={'tab' + (tab === t.k ? ' active' : '')}
               onClick={() => setTab(t.k)}>
            <Icon name={t.icon} size={13} />{t.label}
          </div>
        ))}
      </div>
      {tab === 'compare' && <CompareAutomats tenant={tenant} lang={lang} dataVersion={dataVersion} />}
      {tab === 'customer' && <CustomerAnalytics tenant={tenant} lang={lang} />}
      {tab === 'refill' && <RefillAnalytics tenant={tenant} lang={lang} />}
      {tab === 'stock' && <StockForecastPanel tenant={tenant} lang={lang} />}
      {tab === 'exports' && <ExportsPanel tenant={tenant} lang={lang} />}
    </div>
  );
};

/* === Sammenlign automater + tid-på-døgnet / ukedag === */
const CompareAutomats = ({ tenant, lang, dataVersion }) => {
  const allMachines = (DATA.machines || []).filter(m =>
    !tenant || tenant.id === '__all__' || m.tenantId === tenant.id);
  const [selected, setSelected] = React.useState(() =>
    new Set(allMachines.slice(0, 3).map(m => m.id)));
  const [days, setDays] = React.useState(30);
  const [byMachine, setByMachine] = React.useState({});
  const [loading, setLoading] = React.useState(false);
  // Feil per automat VISES (2026-09-05) — før svelget .catch(() => []) 422-feilen
  // stille og tabellen sto på «0 salg» for alltid.
  const [errors, setErrors] = React.useState({});

  React.useEffect(() => {
    const ids = [...selected];
    if (ids.length === 0) { setByMachine({}); setErrors({}); return; }
    setLoading(true);
    // Backend tillater maks limit=500 (Query(le=500)); 2000 ga 422 → alltid tomt.
    Promise.all(ids.map(aid =>
      window.api.listOrders({ automat_id: aid, days, limit: 500 })
        .then(rows => [aid, rows || [], null])
        .catch(e => [aid, [], (e && e.message) || String(e)])
    )).then(triples => {
      setByMachine(Object.fromEntries(triples.map(([aid, rows]) => [aid, rows])));
      setErrors(Object.fromEntries(triples.filter(x => x[2]).map(([aid, _rows, err]) => [aid, err])));
      setLoading(false);
    });
  }, [[...selected].sort().join(','), days, dataVersion]);

  const toggle = (id) => {
    const next = new Set(selected);
    if (next.has(id)) next.delete(id); else next.add(id);
    setSelected(next);
  };

  // Beregn per-automat aggregater
  const stats = React.useMemo(() => {
    const out = {};
    for (const [aid, rows] of Object.entries(byMachine)) {
      const success = rows.filter(r => r.session_state === 'complete' && (r.price_ore || 0) > 0);
      const sumKr = success.reduce((s, r) => s + (r.price_ore / 100), 0);
      // Tid-på-døgnet (0..23)
      const hourly = Array.from({ length: 24 }, () => 0);
      // Ukedag (0=søn..6=lør) — vi viser man..søn-rekkefølge
      const weekday = Array.from({ length: 7 }, () => 0);
      success.forEach(r => {
        const d = new Date(r.created_at);
        hourly[d.getHours()]++;
        weekday[d.getDay()]++;
      });
      // Beste dag + beste time
      let bestHour = 0, bestHourN = 0;
      hourly.forEach((n, h) => { if (n > bestHourN) { bestHourN = n; bestHour = h; } });
      let bestDay = 0, bestDayN = 0;
      weekday.forEach((n, d) => { if (n > bestDayN) { bestDayN = n; bestDay = d; } });
      out[aid] = {
        total: rows.length,
        success: success.length,
        revenue: sumKr,
        avgOrder: success.length ? sumKr / success.length : 0,
        hourly, weekday, bestHour, bestDay,
      };
    }
    return out;
  }, [byMachine]);

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

  // Max for heat-skalering på tvers av valgte automater
  const maxHour = Math.max(1, ...selList.flatMap(id => stats[id]?.hourly || [0]));
  const maxDay  = Math.max(1, ...selList.flatMap(id => stats[id]?.weekday || [0]));
  // Automater som traff backend-taket (500 rader) — tallene er da ufullstendige
  const nameOf = (aid) => (allMachines.find(m => m.id === aid) || {}).location || aid;
  const truncated = selList.filter(id => (byMachine[id] || []).length >= 500);

  return (
    <div>
      <div className="row" style={{ gap: 8, marginBottom: 12, flexWrap: 'wrap' }}>
        <div className="minitab">
          {[7, 30, 90, 180].map(d => (
            <button key={d} className={days === d ? 'on' : ''}
                    onClick={() => setDays(d)}>{d} d</button>
          ))}
        </div>
        <span className="muted" style={{ fontSize: 11 }}>
          {selected.size} {lang === 'no' ? 'automater valgt' : 'automats picked'}
          {loading && ' · ⏳'}
        </span>
      </div>
      {Object.keys(errors).length > 0 && (
        <div style={{ padding: 10, background: 'var(--danger-soft)', color: 'var(--danger)',
                      borderRadius: 'var(--radius)', marginBottom: 12, fontSize: 12 }}>
          ❌ {lang === 'no' ? 'Kunne ikke hente salg for' : 'Could not load sales for'}{' '}
          {Object.entries(errors).map(([aid, e]) => `${nameOf(aid)} (${e})`).join(', ')}
        </div>
      )}
      {truncated.length > 0 && (
        <div style={{ padding: 10, background: 'var(--warn-soft)', color: 'var(--warn)',
                      borderRadius: 'var(--radius)', marginBottom: 12, fontSize: 12 }}>
          ⚠ {lang === 'no' ? 'Viser de 500 siste salgene for' : 'Showing the latest 500 sales for'}{' '}
          {truncated.map(nameOf).join(', ')}
          {lang === 'no' ? ' — velg kortere periode for komplette tall.' : ' — pick a shorter period for complete figures.'}
        </div>
      )}

      {/* Velg automater */}
      <div className="panel" style={{ marginBottom: 12 }}>
        <div className="panel-head">
          <h3>{lang === 'no' ? 'Velg automater å sammenligne' : 'Pick automats to compare'}</h3>
        </div>
        <div className="panel-body" style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
          {allMachines.map(m => (
            <button key={m.id}
                    className={'btn sm' + (selected.has(m.id) ? ' primary' : '')}
                    onClick={() => toggle(m.id)}>
              {selected.has(m.id) ? '✓ ' : ''}{m.location}
              <span className="muted" style={{ fontSize: 10, marginLeft: 4 }}>
                {m.kind === 'legacy' ? 'v1' : 'v2'}
              </span>
            </button>
          ))}
          {allMachines.length === 0 && (
            <span className="muted" style={{ fontSize: 12 }}>
              {lang === 'no' ? 'Ingen automater' : 'No automats'}
            </span>
          )}
        </div>
      </div>

      {/* Sammenligning-tabell */}
      {selList.length > 0 && (
        <div className="panel" style={{ marginBottom: 12 }}>
          <div className="panel-head">
            <h3>{lang === 'no' ? 'Nøkkeltall' : 'Key figures'}</h3>
          </div>
          <table className="tbl" style={{ fontSize: 12 }}>
            <thead>
              <tr>
                <th>Automat</th>
                <th className="num">{lang === 'no' ? 'Salg' : 'Sales'}</th>
                <th className="num">{lang === 'no' ? 'Vellykket' : 'OK'}</th>
                <th className="num">{lang === 'no' ? 'Omsetning' : 'Revenue'}</th>
                <th className="num">{lang === 'no' ? 'Snitt/ordre' : 'Avg/order'}</th>
                <th>{lang === 'no' ? 'Beste dag' : 'Best day'}</th>
                <th>{lang === 'no' ? 'Beste time' : 'Best hour'}</th>
              </tr>
            </thead>
            <tbody>
              {selList.map(aid => {
                const m = allMachines.find(x => x.id === aid);
                const s = stats[aid] || {};
                return (
                  <tr key={aid}>
                    <td>
                      <span style={{ fontWeight: 500 }}>{m?.location || aid}</span>
                      <div className="muted mono" style={{ fontSize: 10 }}>{aid}</div>
                    </td>
                    <td className="num">{s.total || 0}</td>
                    <td className="num" style={{ color: 'var(--success)' }}>{s.success || 0}</td>
                    <td className="num" style={{ fontWeight: 600 }}>
                      {fmtKr(s.revenue || 0, lang)}
                    </td>
                    <td className="num">{fmtKr(s.avgOrder || 0, lang)}</td>
                    <td>{s.success ? DAY_LABELS[s.bestDay] : <span className="muted">—</span>}</td>
                    <td className="mono">
                      {s.success
                        ? `${String(s.bestHour).padStart(2,'0')}–${String(s.bestHour+1).padStart(2,'0')}`
                        : <span className="muted">—</span>}
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      )}

      {/* Tid-på-døgnet heatmap (24t) per automat */}
      {selList.length > 0 && (
        <div className="split-2">
          <div className="panel">
            <div className="panel-head">
              <h3>{lang === 'no' ? 'Tid på døgnet' : 'Time of day'}</h3>
              <span className="muted" style={{ fontSize: 11 }}>
                {lang === 'no' ? 'antall salg per time' : 'orders per hour'}
              </span>
            </div>
            <div className="panel-body" style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {selList.map(aid => {
                const m = allMachines.find(x => x.id === aid);
                const h = stats[aid]?.hourly || [];
                return (
                  <div key={aid}>
                    <div className="row between" style={{ fontSize: 11, marginBottom: 3 }}>
                      <span style={{ fontWeight: 500 }}>{m?.location || aid}</span>
                      <span className="muted">{(h.reduce((a, b) => a + b, 0))} {lang === 'no' ? 'salg' : 'sales'}</span>
                    </div>
                    <div style={{ display: 'grid',
                                    gridTemplateColumns: 'repeat(24, 1fr)', gap: 2 }}>
                      {h.map((n, i) => {
                        const pct = n / maxHour;
                        return (
                          <div key={i} title={`${String(i).padStart(2,'0')}:00 — ${n}`}
                                style={{
                                  height: 22, borderRadius: 2,
                                  background: n === 0 ? 'var(--surface-3)' :
                                              `rgba(245, 158, 11, ${0.2 + 0.8 * pct})`,
                                }} />
                        );
                      })}
                    </div>
                    <div className="row between muted" style={{ fontSize: 9, marginTop: 2 }}>
                      <span>00</span><span>06</span><span>12</span><span>18</span><span>23</span>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          <div className="panel">
            <div className="panel-head">
              <h3>{lang === 'no' ? 'Ukedag' : 'Day of week'}</h3>
            </div>
            <div className="panel-body" style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {selList.map(aid => {
                const m = allMachines.find(x => x.id === aid);
                const wd = stats[aid]?.weekday || [];
                // Vis man..søn (1..6, 0)
                const order = [1, 2, 3, 4, 5, 6, 0];
                return (
                  <div key={aid}>
                    <div className="row between" style={{ fontSize: 11, marginBottom: 3 }}>
                      <span style={{ fontWeight: 500 }}>{m?.location || aid}</span>
                    </div>
                    <div style={{ display: 'grid',
                                    gridTemplateColumns: 'repeat(7, 1fr)', gap: 3 }}>
                      {order.map(i => {
                        const n = wd[i] || 0;
                        const pct = n / maxDay;
                        return (
                          <div key={i} style={{
                            padding: '6px 2px', borderRadius: 4, textAlign: 'center',
                            fontSize: 10,
                            background: n === 0 ? 'var(--surface-3)' :
                                        `rgba(245, 158, 11, ${0.2 + 0.8 * pct})`,
                            color: n > 0 ? '#000' : 'var(--text-faint)',
                          }}>
                            <div style={{ fontSize: 9, opacity: 0.7 }}>{DAY_LABELS[i]}</div>
                            <div style={{ fontWeight: 700 }}>{n}</div>
                          </div>
                        );
                      })}
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

const CustomerAnalytics = ({ tenant, lang }) => {
  const [funnel, setFunnel] = React.useState(null);
  const [visitors, setVisitors] = React.useState([]);
  const [days, setDays] = React.useState(7);

  React.useEffect(() => {
    const tid = tenant?.id !== '__all__' ? tenant.id : undefined;
    const params = { days, ...(tid ? { tenant_id: tid } : {}) };
    window.api.funnel(params).then(setFunnel).catch(() => {});
    window.api.uniqueVisitors(days, tid).then(setVisitors).catch(() => {});
  }, [tenant?.id, days]);

  return (
    <div>
      <div className="row" style={{ gap: 8, marginBottom: 12 }}>
        <div className="minitab">
          {[7, 30, 90].map(d => (
            <button key={d} className={days === d ? 'on' : ''}
                    onClick={() => setDays(d)}>Siste {d} d</button>
          ))}
        </div>
      </div>
      <div className="split-2">
        <div className="panel">
          <div className="panel-head"><h3>Konverterings-funnel</h3></div>
          <div className="panel-body">
            {funnel?.funnel?.map((step, i) => {
              const max = funnel.funnel[0]?.sessions || 1;
              const pct = (step.sessions / max) * 100;
              return (
                <div key={step.step} style={{ marginBottom: 10 }}>
                  <div className="row between" style={{ fontSize: 12.5, marginBottom: 4 }}>
                    <span>{step.step}</span>
                    <span style={{ fontWeight: 600 }}>
                      {step.sessions} ({pct.toFixed(0)}%)
                    </span>
                  </div>
                  <div style={{ height: 8, background: 'var(--surface-3)', borderRadius: 4 }}>
                    <div style={{ width: pct + '%', height: '100%',
                                    background: 'var(--accent)', borderRadius: 4 }} />
                  </div>
                </div>
              );
            })}
            {!funnel?.funnel?.length && <div className="empty">Ingen data</div>}
          </div>
        </div>

        <div className="panel">
          <div className="panel-head"><h3>Unike brukere per dag</h3></div>
          <div className="panel-body">
            <table className="tbl">
              <thead><tr><th>Dato</th><th className="num">Unike</th><th className="num">Økter</th></tr></thead>
              <tbody>
                {visitors.slice(-14).map(v => (
                  <tr key={v.day}>
                    <td className="mono" style={{ fontSize: 11 }}>{v.day}</td>
                    <td className="num">{v.unique_users}</td>
                    <td className="num muted">{v.sessions}</td>
                  </tr>
                ))}
                {!visitors.length && <tr><td colSpan="3" className="empty">Ingen data</td></tr>}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
};

const RefillAnalytics = ({ tenant, lang }) => {
  const [stats, setStats] = React.useState(null);
  const [days, setDays] = React.useState(90);
  React.useEffect(() => {
    const params = { days, ...(tenant?.id !== '__all__' ? { tenant_id: tenant.id } : {}) };
    window.api.refillStats(params).then(setStats).catch(() => {});
  }, [tenant?.id, days]);
  if (!stats) return <div className="empty">⏳ Laster…</div>;
  const s = stats.summary;
  return (
    <div>
      <div className="row" style={{ gap: 8, marginBottom: 12 }}>
        <div className="minitab">
          {[30, 90, 180, 365].map(d => (
            <button key={d} className={days === d ? 'on' : ''}
                    onClick={() => setDays(d)}>{d} d</button>
          ))}
        </div>
      </div>
      <div className="stat-row" style={{ gap: 22, marginBottom: 16 }}>
        <div className="stat"><div className="lbl">Planer</div><div className="val">{s.total_plans}</div></div>
        <div className="stat"><div className="lbl">Fullført</div><div className="val">{s.completed_plans} ({s.completion_rate_pct}%)</div></div>
        <div className="stat"><div className="lbl">Stops</div><div className="val">{s.total_stops}</div></div>
        <div className="stat"><div className="lbl">Avstand</div><div className="val">{s.total_distance_km} km</div></div>
        <div className="stat"><div className="lbl">Snitt tid/stop</div><div className="val">{s.avg_fill_min_per_stop} min</div></div>
        <div className="stat"><div className="lbl">Flasker satt inn</div><div className="val">{s.bottles_inserted}</div></div>
      </div>

      <div className="panel">
        <div className="panel-head"><h3>Per måned</h3></div>
        <div className="panel-body">
          <table className="tbl">
            <thead><tr><th>Måned</th><th className="num">Planer</th><th className="num">Fullført</th><th className="num">Stops</th><th className="num">km</th><th className="num">Drive-min</th></tr></thead>
            <tbody>
              {stats.by_month.map(m => (
                <tr key={m.month}>
                  <td className="mono">{m.month}</td>
                  <td className="num">{m.plans}</td>
                  <td className="num">{m.completed}</td>
                  <td className="num">{m.stops}</td>
                  <td className="num">{Math.round(m.distance_km)}</td>
                  <td className="num muted">{m.drive_min}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
};

const StockForecastPanel = ({ tenant, lang }) => {
  const [data, setData] = React.useState(null);
  const [busy, setBusy] = React.useState(false);
  const refresh = React.useCallback(async () => {
    if (!tenant || tenant.id === '__all__') return;
    setBusy(true);
    try { setData(await window.api.stockForecast(tenant.id)); }
    catch (e) { console.warn(e); }
    setBusy(false);
  }, [tenant?.id]);
  React.useEffect(() => { refresh(); }, [refresh]);

  const runScan = async () => {
    try { const r = await window.api.stockForecastScan();
      alert(`Skannet ${r.automats_scanned} automater · ${r.alerts_sent} alarmer sendt`);
      await refresh(); }
    catch (e) { alert(e.message); }
  };

  if (!tenant || tenant.id === '__all__') {
    return <div className="empty" style={{ padding: 30 }}>Velg en spesifikk tenant</div>;
  }
  if (!data) return <div className="empty">⏳ Laster…</div>;

  return (
    <div>
      <div className="row" style={{ gap: 8, marginBottom: 12 }}>
        <button className="btn" onClick={refresh} disabled={busy}>↻ Refresh</button>
        {/* Sender EKTE alarmer og krever superadmin i backend (403 for andre) —
            skjules derfor for tenant-admin (2026-09-05). */}
        {window.isSuperView && window.isSuperView() && (
          <button className="btn primary" onClick={runScan}>🔔 Kjør scan + send alarmer</button>
        )}
      </div>
      <div className="panel">
        <table className="tbl">
          <thead>
            <tr>
              <th>Automat</th><th>Flaske</th>
              <th className="num">På lager</th>
              <th className="num">Snitt/dag</th>
              <th className="num">Dager igjen</th>
              <th>Status</th>
            </tr>
          </thead>
          <tbody>
            {data.map((r, i) => (
              <tr key={i} style={{
                background: r.severity === 'stockout' ? 'var(--danger-soft)'
                          : r.severity === 'critical' ? 'var(--warn-soft)' : 'transparent',
              }}>
                <td>{r.location}</td>
                <td className="mono" style={{ fontSize: 11 }}>{r.bottle_code}</td>
                <td className="num">{r.current_stock}</td>
                <td className="num muted">{r.avg_daily_sales}</td>
                <td className="num" style={{ fontWeight: 600 }}>{r.days_until_empty}</td>
                <td>
                  {r.severity === 'stockout' && <Pill tone="danger">⚠ Tom snart</Pill>}
                  {r.severity === 'critical' && <Pill tone="warn">Kritisk</Pill>}
                  {r.severity === 'low' && <Pill tone="empty">Lav</Pill>}
                  {r.severity === 'ok' && <Pill tone="ok">OK</Pill>}
                </td>
              </tr>
            ))}
            {!data.length && <tr><td colSpan="6" className="empty">Ingen data</td></tr>}
          </tbody>
        </table>
      </div>
    </div>
  );
};

const ExportsPanel = ({ tenant, lang }) => {
  // Send valgt tenant til alle eksporter som støtter det, så CSV-ene matcher
  // tenant-konteksten i UI (ikke dumper alle tenants).
  const tp = tenant?.id !== '__all__' ? { tenant_id: tenant.id } : {};
  const downloads = [
    { label: 'Ordrer (siste 30 dager)', url: window.api.exportOrdersUrl({ days: 30, ...tp }), file: 'orders.csv' },
    { label: 'Refunds (siste 90 dager)', url: window.api.exportRefundsUrl({ days: 90, ...tp }), file: 'refunds.csv' },
    // tenant_id sendes også for audit/kamera-helse/e-post (2026-09-05) — før
    // fikk superadmin plattform-bred CSV selv med én tenant valgt.
    { label: 'Audit-log (siste 30 dager)', url: window.api.exportAuditUrl({ days: 30, ...tp }), file: 'audit.csv' },
    { label: 'Fyll-planer (siste 180 dager)', url: window.api.exportRefillPlansUrl({ days: 180, ...tp }), file: 'refill-plans.csv' },
    { label: 'Kamera-helse (siste 30 dager)', url: window.api.exportCameraHealthUrl({ days: 30, ...tp }), file: 'camera-health.csv' },
    { label: 'E-post-log (siste 30 dager)', url: window.api.exportEmailLogUrl({ days: 30, ...tp }), file: 'email-log.csv' },
  ];
  const dl = async (e) => {
    e.preventDefault();
    try { await window.api.downloadWithAuth(e.target.dataset.url, e.target.dataset.file); }
    catch (err) { alert(err.message); }
  };
  return (
    <div className="panel">
      <div className="panel-head"><h3>Eksport til CSV</h3></div>
      <div className="panel-body">
        {downloads.map(d => (
          <div key={d.file} className="row between" style={{ padding: '10px 0', borderBottom: '1px solid var(--border)' }}>
            <span>{d.label}</span>
            <a href="#" onClick={dl} data-url={d.url} data-file={d.file} className="btn sm">
              <Icon name="download" size={12} />Last ned
            </a>
          </div>
        ))}
      </div>
    </div>
  );
};

Object.assign(window, { AnalyticsPage, CompareAutomats });