/* Aktivitet (KUN superadmin): full oversikt over hva hver bruker GJØR og SER PÅ.
   Bygger på audit-loggen: alle skrive-handlinger + GET-visninger (dedupliseret
   til én pr. minutt pr. side). Filtrer på bruker, se tidslinje med
   menneskelesbare beskrivelser. */

const ACT_LABELS = [
  [/\/route-plan/, 'Kjørerute-planlegger'],
  [/\/refill\/plans\/[^/]+\/manifest/, 'Digitalt fraktbrev'],
  [/\/refill\/plans\/[^/]+\/stops\/[^/]+\/fill-status/, 'Fylle-status (stopp)'],
  [/\/refill\/plans\/[^/]+\/stops\/[^/]+\/arrive/, 'Ankom stopp (åpnet dører)'],
  [/\/refill\/plans\/[^/]+\/stops\/[^/]+\/rescan/, 'Re-skann av kammer'],
  [/\/refill\/plans\/[^/]+\/stops\/[^/]+\/complete/, 'Signerte fylle-tall'],
  [/\/refill\/plans/, 'Fylleplaner'],
  [/\/refill\/.+\/overview/, 'Utkjøringslista'],
  [/\/service\/(.+)/, (m) => `Servicelogg: ${m[1]}`],
  [/\/automats\/bulk-edit/, 'Bulk-redigering av automater'],
  [/\/automats\/([^/]+)\/shelves/, (m) => `Hyller på ${m[1]}`],
  [/\/shelves\/([^/]+)\/shelves\/\d+\/override/, (m) => `Overstyrte hylle på ${m[1]}`],
  [/\/shelves\/([^/]+)\/shelves/, (m) => `Lager på ${m[1]}`],
  [/\/shelves\/([^/]+)\/fill/, (m) => `Påfyll på ${m[1]}`],
  [/\/automats\/([^/]+)\/settings/, (m) => `Innstillinger for ${m[1]}`],
  [/\/automats\/([^/]+)\/location/, (m) => `Posisjon for ${m[1]}`],
  [/\/automats\/([^/]+)\/telemetry/, (m) => `Telemetri for ${m[1]}`],
  [/\/automats\/([^/]+)$/, (m) => `Automat ${m[1]}`],
  [/\/automats$/, 'Automat-oversikten'],
  [/\/sales\/orders/, 'Salgshistorikk'],
  [/\/sales\/summary/, 'Salgssammendrag'],
  [/\/sales/, 'Salg'],
  [/\/orders\/alarms/, 'Alarmer'],
  [/\/orders\/([^/]+)/, (m) => `Ordre ${m[1]}`],
  [/\/areas/, 'Områder'],
  [/\/bottles\/price-overrides/, 'Prisoverstyringer'],
  [/\/bottles/, 'Flasketyper'],
  [/\/analytics/, 'Statistikk'],
  [/\/tenants/, 'Tenants'],
  [/\/users/, 'Brukere'],
  [/\/audit/, 'Aktivitetsloggen'],
  [/\/exports/, 'Eksport'],
  [/\/cameras/, 'Kameraer'],
  [/\/production/, 'Produksjonskonsoll'],
];

function actLabel(path) {
  const p = path.replace('/api/admin', '');
  for (const [re, label] of ACT_LABELS) {
    const m = p.match(re);
    if (m) return typeof label === 'function' ? label(m) : label;
  }
  return p;
}

const ActivityPage = ({ lang, dataVersion }) => {
  const no = lang === 'no';
  const [tab, setTab] = React.useState('activity');   // activity | logins
  const [rows, setRows] = React.useState(null);
  const [logins, setLogins] = React.useState(null);
  const [userFilter, setUserFilter] = React.useState('');
  const [live, setLive] = React.useState(true);

  const refresh = React.useCallback(async () => {
    try {
      if (tab === 'logins') {
        setLogins(await window.api.logins(userFilter));
      } else {
        const q = userFilter ? `&user_email=${encodeURIComponent(userFilter)}` : '';
        setRows(await window.api.req('GET', `/api/admin/audit?limit=300${q}`));
      }
    } catch (e) {
      if (tab === 'logins') setLogins({ error: e.message });
      else setRows({ error: e.message });
    }
  }, [userFilter, tab]);

  React.useEffect(() => {
    refresh();
    if (!live) return;
    const iv = setInterval(refresh, 10000);
    return () => clearInterval(iv);
  }, [refresh, live, dataVersion]);

  const users = React.useMemo(() => {
    if (!Array.isArray(rows)) return [];
    const m = new Map();
    rows.forEach(r => {
      if (!r.user_email) return;
      const u = m.get(r.user_email) || { email: r.user_email, n: 0, last: r.created_at };
      u.n += 1;
      m.set(r.user_email, u);
    });
    return [...m.values()].sort((a, b) => b.n - a.n);
  }, [rows]);

  const fmtTime = (iso) => (iso || '').replace('T', ' ').slice(5, 16);

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1 className="page-title">{no ? 'Aktivitet' : 'Activity'}</h1>
          <div className="page-sub">
            {no ? 'Hva brukerne gjør og ser på — alle handlinger + sidevisninger'
                : 'What users do and view'}
          </div>
        </div>
        <div className="row" style={{ gap: 8 }}>
          <div className="row" style={{ gap: 0, border: '1px solid var(--border)',
                borderRadius: 'var(--radius)', overflow: 'hidden' }}>
            <button className={'btn sm' + (tab === 'activity' ? ' primary' : '')}
                    style={{ borderRadius: 0, border: 'none' }}
                    onClick={() => setTab('activity')}>
              {no ? 'Handlinger' : 'Actions'}
            </button>
            <button className={'btn sm' + (tab === 'logins' ? ' primary' : '')}
                    style={{ borderRadius: 0, border: 'none' }}
                    onClick={() => setTab('logins')}>
              {no ? 'Innlogginger' : 'Logins'}
            </button>
          </div>
          <label className="row" style={{ gap: 6, fontSize: 12 }}>
            <input type="checkbox" checked={live} onChange={e => setLive(e.target.checked)} />
            {no ? 'Live (10 s)' : 'Live'}
          </label>
          <button className="btn sm" onClick={refresh}>↻</button>
        </div>
      </div>

      {tab === 'logins' && (
        <LoginsPanel no={no} logins={logins} userFilter={userFilter}
                     setUserFilter={setUserFilter} />
      )}

      {tab === 'activity' && (
      <div className="split-7-5">
        <div className="panel">
          <div className="panel-head">
            <h3>{no ? 'Tidslinje' : 'Timeline'}</h3>
            <select className="input" style={{ width: 'auto', minWidth: 180 }}
                    value={userFilter} onChange={e => setUserFilter(e.target.value)}>
              <option value="">{no ? 'Alle brukere' : 'All users'}</option>
              {users.map(u => <option key={u.email} value={u.email}>{u.email}</option>)}
            </select>
          </div>
          <div className="panel-body no-pad" style={{ maxHeight: 640, overflow: 'auto' }}>
            {!rows && <div className="empty">⏳</div>}
            {rows && rows.error && <div style={{ padding: 16, color: 'var(--danger)' }}>❌ {rows.error}</div>}
            {Array.isArray(rows) && rows.length === 0 && (
              <div className="empty">{no ? 'Ingen aktivitet ennå.' : 'No activity yet.'}</div>
            )}
            {Array.isArray(rows) && rows.map(r => (
              <div key={r.id} className="row" style={{ gap: 10, padding: '8px 16px',
                    borderBottom: '1px solid var(--border)', alignItems: 'flex-start' }}>
                <span className={'pill ' + (r.method === 'GET' ? 'info'
                      : r.method === 'DELETE' ? 'danger' : 'warn')}
                      style={{ fontSize: 9.5, minWidth: 52, textAlign: 'center' }}>
                  {r.method === 'GET' ? (no ? 'SÅ PÅ' : 'VIEWED')
                    : r.method === 'DELETE' ? (no ? 'SLETTET' : 'DELETED')
                    : (no ? 'ENDRET' : 'CHANGED')}
                </span>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 12.5, fontWeight: 500 }}>{actLabel(r.path)}</div>
                  <div className="muted" style={{ fontSize: 11 }}>
                    {r.user_email || (no ? 'ukjent' : 'unknown')}
                    {r.is_superadmin && <span className="pill" style={{ fontSize: 8.5, marginLeft: 4 }}>super</span>}
                    {' · '}{fmtTime(r.created_at)} · {r.ip_address || ''}
                    {r.status_code >= 400 && <span style={{ color: 'var(--danger)' }}> · HTTP {r.status_code}</span>}
                  </div>
                  {r.payload && r.method !== 'GET' && (
                    <div className="muted mono" style={{ fontSize: 10, marginTop: 2,
                          whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                      {JSON.stringify(r.payload).slice(0, 140)}
                    </div>
                  )}
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="panel">
          <div className="panel-head"><h3>{no ? 'Brukere (siste 300 hendelser)' : 'Users'}</h3></div>
          <div className="panel-body no-pad">
            {users.map(u => (
              <div key={u.email} className="row between"
                   onClick={() => setUserFilter(userFilter === u.email ? '' : u.email)}
                   style={{ padding: '10px 16px', cursor: 'pointer',
                            borderBottom: '1px solid var(--border)',
                            background: userFilter === u.email ? 'var(--accent-soft)' : 'transparent' }}>
                <div>
                  <div style={{ fontSize: 12.5, fontWeight: 500 }}>{u.email}</div>
                  <div className="muted" style={{ fontSize: 10.5 }}>
                    {no ? 'sist aktiv' : 'last'}: {fmtTime(u.last)}
                  </div>
                </div>
                <span className="pill info">{u.n}</span>
              </div>
            ))}
            {users.length === 0 && <div className="empty">—</div>}
          </div>
        </div>
      </div>
      )}
    </div>
  );
};

/* Innloggingshistorikk: hvem logget inn, med hvilken enhet, hvor fra.
   Posisjon er GPS (presis, brukeren delte) eller IP-basert (grov fallback). */
const LoginsPanel = ({ no, logins, userFilter, setUserFilter }) => {
  const fmtTime = (iso) => (iso || '').replace('T', ' ').slice(5, 16);
  const flag = (cc) => (cc && cc.length === 2)
    ? String.fromCodePoint(...[...cc.toUpperCase()].map(c => 127397 + c.charCodeAt(0)))
    : '';
  const list = Array.isArray(logins) ? logins : [];
  const emails = React.useMemo(
    () => [...new Set(list.map(l => l.user_email).filter(Boolean))], [list]);

  return (
    <div className="panel">
      <div className="panel-head">
        <h3>{no ? 'Innlogginger — enhet og posisjon' : 'Logins — device & location'}</h3>
        <select className="input" style={{ width: 'auto', minWidth: 180 }}
                value={userFilter} onChange={e => setUserFilter(e.target.value)}>
          <option value="">{no ? 'Alle brukere' : 'All users'}</option>
          {emails.map(e => <option key={e} value={e}>{e}</option>)}
        </select>
      </div>
      <div className="panel-body no-pad" style={{ maxHeight: 680, overflow: 'auto' }}>
        {!logins && <div className="empty">⏳</div>}
        {logins && logins.error && (
          <div style={{ padding: 16, color: 'var(--danger)' }}>❌ {logins.error}</div>
        )}
        {Array.isArray(logins) && logins.length === 0 && (
          <div className="empty">{no ? 'Ingen innlogginger ennå.' : 'No logins yet.'}</div>
        )}
        {list.map(l => (
          <div key={l.id} className="row" style={{ gap: 10, padding: '10px 16px',
                borderBottom: '1px solid var(--border)', alignItems: 'flex-start' }}>
            <span className={'pill ' + (l.success ? 'ok' : 'danger')}
                  style={{ fontSize: 9.5, minWidth: 58, textAlign: 'center' }}>
              {l.success ? (no ? 'INNLOGGET' : 'LOGIN')
                         : (no ? 'MISLYKKET' : 'FAILED')}
            </span>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 12.5, fontWeight: 500 }}>
                {l.user_email || (no ? 'ukjent' : 'unknown')}
                {l.is_superadmin && <span className="pill" style={{ fontSize: 8.5, marginLeft: 4 }}>super</span>}
              </div>
              <div className="muted" style={{ fontSize: 11 }}>
                {fmtTime(l.created_at)} · {l.device || (no ? 'ukjent enhet' : 'unknown device')}
                {l.ip_address && <> · {l.ip_address}</>}
              </div>
              <div className="muted" style={{ fontSize: 11, marginTop: 1 }}>
                {l.place
                  ? <>📍 {flag(l.country_code)} {l.place}</>
                  : <span style={{ opacity: 0.6 }}>📍 {no ? 'ukjent posisjon' : 'unknown location'}</span>}
                {l.geo_source && (
                  <span className={'pill ' + (l.geo_source === 'gps' ? 'ok' : 'info')}
                        style={{ fontSize: 8.5, marginLeft: 6 }}>
                    {l.geo_source === 'gps'
                      ? `GPS${l.accuracy_m ? ` ±${Math.round(l.accuracy_m)} m` : ''}`
                      : 'IP'}
                  </span>
                )}
                {l.latitude != null && l.longitude != null && (
                  <a href={`https://www.google.com/maps?q=${l.latitude},${l.longitude}`}
                     target="_blank" rel="noreferrer"
                     style={{ marginLeft: 2, fontSize: 12, display: 'inline-block',
                              padding: '6px 8px', margin: '-6px 0' }}>
                    {no ? 'kart' : 'map'} ↗
                  </a>
                )}
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

Object.assign(window, { ActivityPage });