// Events — conversion log + 7d summary. Per-app or global.

const { useState: useStateE, useEffect: useEffectE } = React;

const EventsPage = ({ appId }) => {
  const [events, setEvents] = useStateE(null);
  const [summary, setSummary] = useStateE(null);

  useEffectE(() => {
    (async () => {
      try {
        const q = appId ? `?appId=${encodeURIComponent(appId)}&limit=200` : '?limit=200';
        const e = await window.api('/api/events' + q);
        setEvents(e.events || []);
        const s = await window.api('/api/events/summary' + (appId ? `?appId=${encodeURIComponent(appId)}` : ''));
        setSummary(s);
      } catch (e) {
        window.toast?.('Load failed: ' + e.message, 'error');
      }
    })();
  }, [appId]);

  if (events === null) return <div className="page"><div className="empty"><h3>Loading…</h3></div></div>;

  return (
    <div className="page step-anim">
      <div className="page-head">
        <div>
          <h1>{appId ? 'Events' : 'Events (all apps)'}</h1>
          <div className="desc">Conversion postbacks + click logs from D1. Last 200.</div>
        </div>
      </div>

      {summary && (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: 12, marginBottom: 22 }}>
          <Stat label="Clicks · 7d"   v={summary.clicks} />
          <Stat label="Installs · 7d" v={summary.installs} />
          <Stat label="Leads · 7d"    v={summary.leads}   color="var(--accent)" />
          <Stat label="FTDs · 7d"     v={summary.ftds}    color="var(--purple)" />
          <Stat label="Revenue · 7d"  v={`€${summary.revenue?.toFixed(0) || 0}`} color="var(--accent)" />
        </div>
      )}

      <div className="panel">
        <div className="panel-head">
          <h2>Recent events</h2>
          <span style={{ fontSize: 11, color: 'var(--muted)', fontFamily: 'JetBrains Mono, monospace', background: 'var(--bg-3)', padding: '2px 8px', borderRadius: 10 }}>{events.length}</span>
        </div>
        {events.length === 0 ? (
          <div className="empty">
            <h3>No events yet</h3>
            <p>Set your affiliate network's postback URL to:<br/>
              <code style={{ marginTop: 8, display: 'inline-block' }}>
                {window.SESSION.workerUrl.replace(/\/$/, '')}/api/postback?event=ftd&app={appId || '<APP_ID>'}&player=&#123;player_id&#125;&amount=&#123;amount&#125;
              </code>
            </p>
          </div>
        ) : (
          <table className="data">
            <thead><tr><th>Time</th><th>App</th><th>Type</th><th>GEO</th><th>Source</th><th>Player</th><th>€</th></tr></thead>
            <tbody>
              {events.map(e => (
                <tr key={e.id}>
                  <td className="mono" style={{ fontSize: 11 }}>{new Date(e.ts).toLocaleString()}</td>
                  <td className="mono" style={{ fontSize: 11 }}>{e.app_id}</td>
                  <td><span className={`pill ${typePillClass(e.event_type)}`}><span className="dot"></span>{e.event_type}</span></td>
                  <td>{window.COUNTRY_FLAGS[e.country] || ''} {e.country}</td>
                  <td className="mono" style={{ fontSize: 11 }}>{e.source || '—'}</td>
                  <td className="mono" style={{ fontSize: 11 }}>{e.player_id || '—'}</td>
                  <td className="mono">{e.amount ? `€${e.amount}` : '—'}</td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>
    </div>
  );
};

const Stat = ({ label, v, color }) => (
  <div className="stat">
    <div className="label">{label}</div>
    <div className="v" style={{ color: color || 'inherit' }}>{v}</div>
  </div>
);

function typePillClass(t) {
  if (t === 'ftd' || t === 'deposit') return 'live';
  if (t === 'lead' || t === 'install') return 'deployed';
  if (t === 'click') return 'draft';
  return '';
}

window.EventsPage = EventsPage;