/* Adeyy app — L5 Analytics. Live API version. */

function Analytics({ app, linkId, campaignId }) {
  const D = window.AdeyyData;
  const API = window.AdeyyAPI;
  const { links, campaigns } = app.state;
  const [scope, setScope] = React.useState(linkId ? 'link:' + linkId : campaignId ? 'camp:' + campaignId : 'all');
  const [days, setDays] = React.useState(30);
  const [analyticsData, setAnalyticsData] = React.useState(null);
  const [loading, setLoading] = React.useState(true);

  /* Fetch analytics from server when scope/days changes */
  React.useEffect(() => {
    setLoading(true);
    const params = { days };
    if (scope.startsWith('link:')) params.linkId = scope.slice(5);
    else if (scope.startsWith('camp:')) params.campaignId = scope.slice(5);

    API.getAnalytics(params).then((data) => {
      setAnalyticsData(data);
      setLoading(false);
    }).catch((err) => {
      console.error('[Analytics] load error:', err);
      setLoading(false);
    });
  }, [scope, days]);

  /* Fallback to local data if server not ready */
  const scoped = links.filter((l) => {
    if (scope === 'all') return true;
    if (scope.startsWith('link:')) return l.id === scope.slice(5);
    if (scope.startsWith('camp:')) return l.campaignId === scope.slice(5);
    return true;
  });

  const totScans = analyticsData ? analyticsData.totScans : scoped.reduce((a, l) => a + l.scans, 0);
  const totClicks = analyticsData ? analyticsData.totClicks : scoped.reduce((a, l) => a + l.clicks, 0);
  const totUniques = analyticsData ? analyticsData.totUniques : Math.round((totScans + totClicks) * 0.74);

  const seriesData = analyticsData ? analyticsData.series : Array.from({ length: days }, () => ({ scans: 0, clicks: 0 }));
  const cities = analyticsData ? analyticsData.cities : [];
  const devs = analyticsData ? analyticsData.devices : [];
  const refs = analyticsData ? analyticsData.referrers : [];

  function exportCsv() {
    const rows = [['day', 'scans', 'clicks']];
    seriesData.forEach((d, i) => {
      const date = new Date(Date.now() - (days - 1 - i) * 86400000);
      rows.push([date.toISOString().slice(0, 10), d.scans, d.clicks]);
    });
    const csv = rows.map((r) => r.join(',')).join('\n');
    const a = document.createElement('a');
    a.href = URL.createObjectURL(new Blob([csv], { type: 'text/csv' }));
    a.download = 'adeyy-analytics.csv';
    a.click();
    app.toast('CSV exported. ' + days + ' days, scans and clicks split');
  }

  const cityMax = Math.max(...cities.map((c) => c.n), 1);
  const devMax = Math.max(...devs.map((d) => d.n), 1);
  const refMax = Math.max(...refs.map((r) => r.n), 1);

  return (
    <div data-screen-label="L5 Analytics">
      <div className="apage-head">
        <h1>Analytics</h1>
        <span className="spacer"></span>
        <select className="ainput" style={{ width: 'auto' }} value={scope} onChange={(e) => setScope(e.target.value)}>
          <option value="all">All links</option>
          <optgroup label="Campaigns">
            {campaigns.map((c) => <option key={c.id} value={'camp:' + c.id}>{c.name}</option>)}
          </optgroup>
          <optgroup label="Links">
            {links.map((l) => <option key={l.id} value={'link:' + l.id}>adeyy.com/{l.slug}</option>)}
          </optgroup>
        </select>
        <div className="seg">
          {[14, 30, 90].map((d) => (
            <button key={d} className={days === d ? 'sel' : ''} onClick={() => setDays(d)}>{d}d</button>
          ))}
        </div>
        <button className="abtn abtn-ghost" onClick={exportCsv}><Icon name="download" size={15} />CSV</button>
      </div>

      {loading ? <SkeletonTable rows={4} /> : scoped.length === 0 && totScans === 0 ? (
        <EmptyState title="No numbers yet." body="Create a link and switch it on. The first scan shows up here within seconds." />
      ) : (
        <React.Fragment>
          <div className="kpis">
            <Kpi label="Scans" value={D.num(totScans)} sub="From printed codes" accent />
            <Kpi label="Clicks" value={D.num(totClicks)} sub="Direct link opens" />
            <Kpi label="Scan share" value={Math.round((totScans / Math.max(totScans + totClicks, 1)) * 100)} unit="%" sub="Of all traffic" />
            <Kpi label="Uniques" value={D.num(totUniques)} sub="Approximate, privacy-safe" />
          </div>

          <div className="chartbox" style={{ marginBottom: 20 }}>
            <div className="ch">
              <span className="t">Scans and clicks · last {days} days</span>
              <span className="legend">
                <span><i style={{ background: 'var(--ink)' }}></i>Scans</span>
                <span><i style={{ background: 'var(--adeyy)' }}></i>Clicks</span>
              </span>
            </div>
            <SeriesChart data={seriesData} height={170} />
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
            <div className="chartbox">
              <div className="ch"><span className="t">Cities</span><span className="legend">Scans · city level only</span></div>
              {cities.length === 0 ? <span className="mutetext" style={{ fontSize: 12.5 }}>No location data yet.</span> :
                cities.map((c) => <HBar key={c.k} label={c.k} value={c.n} max={cityMax} fmt={D.num} />)}
              <p className="mutetext" style={{ fontSize: 11.5, marginTop: 12, marginBottom: 0 }}>
                Locations are stored at city level and IP addresses are hashed. Aligned to the Australian Privacy Principles.
              </p>
            </div>
            <div className="chartbox">
              <div className="ch"><span className="t">Device and browser</span></div>
              {devs.length === 0 ? <span className="mutetext" style={{ fontSize: 12.5 }}>No device data yet.</span> :
                devs.map((d) => <HBar key={d.k} label={d.k} value={d.n} max={devMax} alt fmt={D.num} />)}
            </div>
            <div className="chartbox">
              <div className="ch"><span className="t">Referrers</span><span className="legend">Clicks only</span></div>
              {refs.length === 0 ? <span className="mutetext" style={{ fontSize: 12.5 }}>No referrer data yet.</span> :
                refs.map((r) => <HBar key={r.k} label={r.k} value={r.n} max={refMax} fmt={D.num} />)}
              <p className="mutetext" style={{ fontSize: 11.5, marginTop: 12, marginBottom: 0 }}>
                Scans arrive without a referrer. That is how we tell them apart.
              </p>
            </div>
          </div>
        </React.Fragment>
      )}
    </div>
  );
}

Object.assign(window, { Analytics });