/* ═══════════════════════════════════════════════════════════════════
   ANALYTICS — customer/agency-facing dashboard for THEIR OWN account.

   The customer mirror of the SA "Platform Activity" surface, scoped to the
   signed-in account. Reads two account-scoped endpoints (both requireJWT
   'wpsb-app', account-filtered server-side — never platform-wide):
     • GET /account/analytics  → queryAnalytics(true, account_id):
         kpis (scans 30d/7d/total, migrations, conversion), platforms[],
         builders[], scans_by_day[], + activity{} (sites, docs, images,
         files renamed, redirects) — the per-account activity counters.
     • GET /account/time-saved → { total_hours, by_op, disclaimer }.

   100% live, account-scoped data. No demo data. SA-only? NO — this is the
   CUSTOMER's own dashboard (NAV_CUSTOMER + allowed.customer; also visible to
   admin + sa for impersonation / "View as"). All colors are CSS variables;
   WCAG 2.1 AA. Reuses window.Pages1.PageHead + window.Icon + window.Sparkline.
   ═══════════════════════════════════════════════════════════════════ */

(function () {
  const { useState, useEffect, useCallback } = React;

  const tx = (k, v, f) => (window.WPSB && window.WPSB.t) ? window.WPSB.t(k, v, f) : (f != null ? f : k);

  const RAILWAY =
    (window.WPSB && window.WPSB.RAILWAY) ||
    (window.WPSBD && window.WPSBD.railwayUrl) ||
    'https://wpsitebeam-railway-api-production.up.railway.app';

  function getToken() {
    return (window.WPSB && window.WPSB.getToken && window.WPSB.getToken())
      || window.currentToken
      || localStorage.getItem('wpsb-auth-token');
  }

  async function getJSON(path) {
    const token = getToken();
    if (!token) throw new Error(tx('common.not_authenticated', null, 'Not authenticated'));
    const r = await fetch(RAILWAY + path, { headers: { Authorization: 'Bearer ' + token } });
    if (!r.ok) { const b = await r.text().catch(() => ''); throw new Error('HTTP ' + r.status + (b ? ' \u2014 ' + b.slice(0, 140) : '')); }
    return r.json();
  }

  const fmt = (v) => (typeof v === 'number' ? v.toLocaleString() : '\u2014');

  /* Small KPI card — matches the platform card style, token-only colors. */
  function Stat({ label, value, sub, color }) {
    return (
      <div className="card" style={{ padding: '14px 16px' }}>
        <div style={{ fontSize: '.72rem', color: 'var(--muted)', marginBottom: 6 }}>{label}</div>
        <div style={{ fontSize: '1.5rem', fontWeight: 700, color: color || 'var(--text)', lineHeight: 1 }}>{value}</div>
        {sub != null && <div style={{ fontSize: '.68rem', color: 'var(--muted)', marginTop: 6 }}>{sub}</div>}
      </div>
    );
  }

  /* Horizontal bar list for platform/builder breakdowns. */
  function BarList({ rows, color }) {
    const max = Math.max(1, ...rows.map(r => r.value || 0));
    if (!rows.length) return <div style={{ color: 'var(--muted)', fontSize: '.8rem', padding: '8px 2px' }}>{tx('page.analytics.bar_list_empty', null, 'No data yet.')}</div>;
    return (
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {rows.map((r) => (
          <div key={r.label} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{ width: 130, fontSize: '.78rem', color: 'var(--text)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }} title={r.label}>{r.label}</div>
            <div style={{ flex: 1, height: 10, background: 'var(--surface-2, rgba(127,127,127,.12))', borderRadius: 5, overflow: 'hidden' }}>
              <div style={{ width: ((r.value || 0) / max * 100) + '%', height: '100%', background: color || 'var(--beam)', borderRadius: 5 }} />
            </div>
            <div style={{ width: 48, textAlign: 'right', fontSize: '.78rem', fontWeight: 600, color: 'var(--muted)' }}>{fmt(r.value)}</div>
          </div>
        ))}
      </div>
    );
  }

  function Analytics() {
    const Icon = window.Icon;
    const PageHead = window.Pages1 && window.Pages1.PageHead;
    const Sparkline = window.Sparkline;

    const [data, setData]   = useState(null);
    const [ts, setTs]       = useState(null);
    const [loading, setLoad] = useState(true);
    const [error, setError] = useState(null);
    const [fetchedAt, setFetched] = useState(null);

    const load = useCallback(async () => {
      setLoad(true); setError(null);
      try {
        // Fetch in parallel; time-saved is best-effort (don't fail the page if it errors).
        const [a, t] = await Promise.allSettled([getJSON('/account/analytics'), getJSON('/account/time-saved')]);
        if (a.status !== 'fulfilled') throw a.reason || new Error(tx('page.analytics.err_analytics_failed', null, 'analytics failed'));
        setData(a.value);
        setTs(t.status === 'fulfilled' ? t.value : null);
        setFetched(new Date());
      } catch (e) { setError(e.message || String(e)); setData(null); }
      finally { setLoad(false); }
    }, []);
    useEffect(() => { load(); }, [load]);

    const k  = (data && data.kpis) || {};
    const ac = (data && data.activity) || {};
    const platforms = (data && data.platforms) || [];
    const byDay = (data && data.scans_by_day) || [];
    const sparkData = byDay.length ? byDay.map(d => d.count || 0) : null;
    const hours = ts && typeof ts.total_hours === 'number' ? ts.total_hours : null;

    const head = PageHead ? (
      <PageHead crumb={tx('page.analytics.crumb', null, 'Account')}
        title={<span style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
          {tx('page.analytics.title', null, 'Analytics')}
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: '.58rem', padding: '3px 8px', borderRadius: 4, background: 'rgba(120,220,140,.12)', border: '1px solid rgba(120,220,140,.35)', color: 'var(--mint, #78dc8c)', letterSpacing: '.08em' }}>{tx('page.analytics.live_badge', null, '● LIVE')}</span>
        </span>}
        sub={tx('page.analytics.sub', null, "Your account's activity across WPSiteBeam — scans, conversions, optimizations, and estimated time saved.")}
        actions={<button className="btn btn-ghost btn-sm" onClick={load} disabled={loading}>
          <Icon name="refresh" size={13} />{loading ? tx('page.analytics.refreshing', null, 'Refreshing…') : tx('page.analytics.refresh', null, 'Refresh')}
        </button>}
      />
    ) : (
      <div style={{ marginBottom: 16 }}>
        <h1 style={{ fontSize: '1.4rem', fontWeight: 700, color: 'var(--text)' }}>{tx('page.analytics.title', null, 'Analytics')}</h1>
        <div style={{ color: 'var(--muted)', fontSize: '.85rem' }}>{tx('page.analytics.sub_short', null, "Your account's activity across WPSiteBeam.")}</div>
      </div>
    );

    if (loading && !data) {
      return <div>{head}<div className="card" style={{ padding: 32, textAlign: 'center', color: 'var(--muted)' }}>
        <Icon name="refresh" size={18} /><div style={{ marginTop: 8 }}>{tx('page.analytics.loading', null, 'Loading your analytics…')}</div>
      </div></div>;
    }
    if (error) {
      return <div>{head}<div className="card" style={{ padding: 24, borderLeft: '3px solid var(--red)' }}>
        <div style={{ fontWeight: 600, color: 'var(--red)', marginBottom: 6 }}>{tx('page.analytics.error_title', null, 'Couldn’t load your analytics')}</div>
        <div style={{ fontSize: '.8rem', color: 'var(--muted)', fontFamily: 'var(--font-mono)' }}>{error}</div>
        <button className="btn btn-ghost btn-sm" style={{ marginTop: 12 }} onClick={load}><Icon name="refresh" size={13} />{tx('page.analytics.retry', null, 'Retry')}</button>
      </div></div>;
    }

    return (
      <div>
        {head}

        {/* KPI strip */}
        <div className="grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))', gap: 12, marginBottom: 18 }}>
          <Stat label={tx('page.analytics.kpi.sites_connected', null, 'Sites connected')}     value={fmt(ac.sites_connected)}     color="var(--beam)" />
          <Stat label={tx('page.analytics.kpi.scans_run', null, 'Scans run')}           value={fmt(k.total_scans)}          sub={tx('page.analytics.kpi.scans_sub', { count: fmt(k.scans_30d) }, '{count} in 30 days')} color="var(--mint, #78dc8c)" />
          <Stat label={tx('page.analytics.kpi.documents_converted', null, 'Documents converted')} value={fmt(ac.documents_converted)} color="var(--orange)" />
          <Stat label={tx('page.analytics.kpi.images_generated', null, 'Images generated')}    value={fmt(ac.images_generated)}    color="var(--beam)" />
          <Stat label={tx('page.analytics.kpi.files_renamed', null, 'Files renamed')}       value={fmt(ac.files_renamed)}       color="var(--orange)" />
          <Stat label={tx('page.analytics.kpi.redirects_managed', null, 'Redirects managed')}   value={fmt(ac.redirects_managed)}   color="var(--mint, #78dc8c)" />
          {hours != null && <Stat label={tx('page.analytics.kpi.time_saved', null, 'Estimated time saved')} value={tx('page.analytics.kpi.hours', { hours: hours.toLocaleString() }, '{hours} hrs')} color="var(--beam)" />}
          {k.conversion_rate != null && <Stat label={tx('page.analytics.kpi.conversion', null, 'Scan → migration')} value={k.conversion_rate + '%'} color="var(--dim)" />}
        </div>

        {/* Scans trend */}
        {sparkData && sparkData.some(v => v > 0) && (
          <div className="card" style={{ padding: '16px 18px', marginBottom: 18 }}>
            <div style={{ fontSize: '.74rem', textTransform: 'uppercase', letterSpacing: '.08em', color: 'var(--muted)', marginBottom: 8 }}>{tx('page.analytics.trend_title', null, 'Scans — last 90 days')}</div>
            {Sparkline ? <Sparkline data={sparkData} color="var(--beam)" height={56} /> : <div style={{ color: 'var(--muted)', fontSize: '.8rem' }}>{tx('page.analytics.spark_scans', { count: sparkData.reduce((a, b) => a + b, 0) }, '{count} scans')}</div>}
          </div>
        )}

        {/* Breakdowns */}
        <div className="grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 14, marginBottom: 18 }}>
          <div className="card" style={{ padding: '16px 18px' }}>
            <div style={{ fontSize: '.74rem', textTransform: 'uppercase', letterSpacing: '.08em', color: 'var(--muted)', marginBottom: 12 }}>{tx('page.analytics.platforms_title', null, 'Platforms scanned')}</div>
            <BarList rows={platforms.slice(0, 6)} color="var(--beam)" />
          </div>
          <div className="card" style={{ padding: '16px 18px' }}>
            <div style={{ fontSize: '.74rem', textTransform: 'uppercase', letterSpacing: '.08em', color: 'var(--muted)', marginBottom: 12 }}>{tx('page.analytics.builders_title', null, 'Site builders detected')}</div>
            <BarList rows={((data && data.builders) || []).slice(0, 6)} color="var(--orange)" />
          </div>
        </div>

        <div style={{ fontSize: '.68rem', color: 'var(--muted)', lineHeight: 1.5 }}>
          {fetchedAt ? tx('page.analytics.fetched', { time: fetchedAt.toLocaleTimeString() }, 'Fetched {time}.  ') : ''}
          {tx('page.analytics.counters_note', null, 'Counters reflect this account only. Per-site detail is on the ')}<strong style={{ color: 'var(--text)' }}>{tx('page.analytics.sites_link', null, 'Sites')}</strong>{tx('page.analytics.tab_suffix', null, ' tab.')}
          {ts && ts.disclaimer ? '  ' + ts.disclaimer : ''}
        </div>
      </div>
    );
  }

  window.Analytics = Analytics;
})();