/**
 * SaDashboardWidgets.jsx — SA Dashboard compact live-data widgets
 * Repo: wpsitebeam-app / design/SaDashboardWidgets.jsx
 * Version: v1.0.0 — 2026-05-26
 *
 * Phase C of _SA-DASHBOARD-METRICS-SPEC.md (~6h spec, delivered as component)
 *
 * Exports:
 *   window.StripeLiveWidget     — live subscription counts + MRR + churn
 *   window.PluginHealthWidget   — install counts + version distribution
 *   window.OutcomeMetricsWidget — hours saved, scans, migrations, etc.
 *
 * Data sources:
 *   StripeLiveWidget    → GET /sa/stripe-billing-analytics (existing endpoint)
 *   PluginHealthWidget  → GET /sa/metrics/plugin-health (Phase A endpoint)
 *   OutcomeMetricsWidget → GET /sa/metrics/outcomes (Phase A endpoint)
 *
 * Graceful degradation: if Phase A endpoints not yet deployed, shows
 * "Data available after Phase A ships" placeholder — never crashes.
 *
 * WCAG 2.1 AA: semantic, keyboard accessible, aria-live for refresh
 */

(function () {
  'use strict';
  const VERSION = '1.0.0';
  console.log('[SaDashboardWidgets] v' + VERSION + ' loaded');

  function apiBase() { return (window.WPSBD && window.WPSBD.apiBase) || 'https://api.wpsitebeam.io'; }
  function getToken() { return window.WPSBD && window.WPSBD.getToken ? window.WPSBD.getToken() : ''; }
  async function apiFetch(path) {
    const r = await fetch(apiBase() + path, { headers: { Authorization: 'Bearer ' + getToken() } });
    if (!r.ok) throw new Error('HTTP ' + r.status);
    return r.json();
  }

  const fmtK = n => !n ? '—' : n >= 1e6 ? '$' + (n/1e6).toFixed(2) + 'M' : n >= 1e3 ? '$' + Math.round(n/1e3) + 'K' : '$' + n;
  const fmtN = n => !n && n !== 0 ? '—' : Number(n).toLocaleString('en-US');
  const timeAgo = iso => {
    if (!iso) return '';
    const d = Math.round((Date.now() - new Date(iso).getTime()) / 1000);
    if (d < 60) return d + 's ago';
    if (d < 3600) return Math.round(d/60) + ' min ago';
    return Math.round(d/3600) + 'h ago';
  };

  /* ─── Shared CSS ─────────────────────────────────────────── */
  const CSS = `
.sdw-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  font-size: 13px;
}
.sdw-card-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
}
.sdw-card-title { font-size: 14px; font-weight: 600; }
.sdw-refresh-btn {
  background: none; border: none; cursor: pointer; color: var(--dim);
  font-size: 11px; padding: 3px 7px; border-radius: 5px; min-height: 24px;
}
.sdw-refresh-btn:hover { background: rgba(0,0,0,.08); }
.sdw-rows { display: flex; flex-direction: column; gap: 6px; }
.sdw-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 0; border-bottom: 1px solid rgba(0,0,0,.04);
}
.sdw-row:last-child { border-bottom: none; }
.sdw-label { color: var(--dim); }
.sdw-value { font-weight: 600; font-variant-numeric: tabular-nums; }
.sdw-value.green { color: var(--green,#10b981); }
.sdw-value.red { color: var(--red,#ef4444); }
.sdw-value.warn { color: var(--warn,#f59e0b); }
.sdw-divider { height: 1px; background: var(--border); margin: 8px 0; }
.sdw-updated { font-size: 11px; color: var(--dim); margin-top: 8px; }
.sdw-loading { color: var(--dim); font-size: 12px; padding: 8px 0; }
.sdw-error { color: var(--warn,#f59e0b); font-size: 12px; padding: 4px 0; }
.sdw-phase-note {
  font-size: 11px; color: var(--dim);
  background: rgba(0,0,0,.05); border-radius: 6px; padding: 8px 10px; margin-top: 8px;
}
.sdw-badge {
  font-size: 10px; padding: 1px 6px; border-radius: 8px; font-weight: 600; margin-left: 5px;
}
.sdw-badge.live { background: rgba(16,185,129,.12); color: var(--green,#10b981); }
.sdw-badge.cached { background: rgba(148,163,184,.12); color: var(--dim); }
`;

  /* ─── WIDGET 1: StripeLiveWidget ─────────────────────────── */
  function StripeLiveWidget() {
    const [data, setData] = React.useState(null);
    const [loading, setLoading] = React.useState(true);
    const [error, setError] = React.useState('');
    const [updatedAt, setUpdatedAt] = React.useState(null);

    function load() {
      setLoading(true);
      apiFetch('/sa/stripe-billing-analytics')
        .then(d => { setData(d); setUpdatedAt(new Date().toISOString()); setError(''); })
        .catch(e => setError(e.message))
        .finally(() => setLoading(false));
    }
    React.useEffect(load, []);

    const subs = data?.subscriptions || {};
    const rev = data?.revenue || {};
    const recent = data?.recent_activity || {};

    return React.createElement('div', { className: 'sdw-card', 'aria-live': 'polite' },
      React.createElement('style', null, CSS),
      React.createElement('div', { className: 'sdw-card-header' },
        React.createElement('span', { className: 'sdw-card-title' },
          '\uD83D\uDCB3 Live Stripe',
          data && React.createElement('span', { className: 'sdw-badge live' }, 'Live')
        ),
        React.createElement('button', { className: 'sdw-refresh-btn', onClick: load, 'aria-label': 'Refresh Stripe data' }, '\u21BB Refresh')
      ),
      loading && React.createElement('div', { className: 'sdw-loading' }, 'Loading\u2026'),
      error && React.createElement('div', { className: 'sdw-error' }, 'Error: ' + error),
      data && React.createElement('div', { className: 'sdw-rows' },
        React.createElement('div', { className: 'sdw-row' },
          React.createElement('span', { className: 'sdw-label' }, 'Active subscriptions'),
          React.createElement('span', { className: 'sdw-value' }, fmtN(subs.active))
        ),
        React.createElement('div', { className: 'sdw-row' },
          React.createElement('span', { className: 'sdw-label' }, 'MRR'),
          React.createElement('span', { className: 'sdw-value green' }, fmtK(rev.mrr))
        ),
        React.createElement('div', { className: 'sdw-row' },
          React.createElement('span', { className: 'sdw-label' }, 'ARR (run rate)'),
          React.createElement('span', { className: 'sdw-value' }, fmtK(rev.arr))
        ),
        React.createElement('div', { className: 'sdw-divider' }),
        React.createElement('div', { className: 'sdw-row' },
          React.createElement('span', { className: 'sdw-label' }, 'New last 30d'),
          React.createElement('span', { className: 'sdw-value green' }, recent.new_30d ? '+' + fmtN(recent.new_30d) : '\u2014')
        ),
        React.createElement('div', { className: 'sdw-row' },
          React.createElement('span', { className: 'sdw-label' }, 'Churned last 30d'),
          React.createElement('span', { className: 'sdw-value red' }, recent.churned_30d ? '\u2212' + fmtN(recent.churned_30d) : '\u2014')
        ),
        recent.failed_payments > 0 && React.createElement('div', { className: 'sdw-row' },
          React.createElement('span', { className: 'sdw-label' }, 'Failed payments'),
          React.createElement('span', { className: 'sdw-value warn' }, '\u26A0\uFE0F ' + recent.failed_payments)
        ),
        recent.trials_expiring_7d > 0 && React.createElement('div', { className: 'sdw-row' },
          React.createElement('span', { className: 'sdw-label' }, 'Trials expiring 7d'),
          React.createElement('span', { className: 'sdw-value warn' }, '\uD83D\uDD0A ' + recent.trials_expiring_7d)
        )
      ),
      updatedAt && React.createElement('div', { className: 'sdw-updated' }, 'Updated: ' + timeAgo(updatedAt))
    );
  }

  /* ─── WIDGET 2: PluginHealthWidget ───────────────────────── */
  function PluginHealthWidget() {
    const [data, setData] = React.useState(null);
    const [loading, setLoading] = React.useState(true);
    const [error, setError] = React.useState('');

    React.useEffect(() => {
      apiFetch('/sa/metrics/plugin-health')
        .then(d => { setData(d); setError(''); })
        .catch(e => setError(e.message))
        .finally(() => setLoading(false));
    }, []);

    return React.createElement('div', { className: 'sdw-card' },
      React.createElement('div', { className: 'sdw-card-header' },
        React.createElement('span', { className: 'sdw-card-title' }, '\uD83D\uDD0C Plugin Health')
      ),
      loading && React.createElement('div', { className: 'sdw-loading' }, 'Loading\u2026'),
      error && React.createElement('div', null,
        React.createElement('div', { className: 'sdw-error' }, 'Phase A not yet deployed'),
        React.createElement('div', { className: 'sdw-phase-note' },
          'Plugin telemetry requires Phase A Railway endpoints. Ships in next implementation session.'
        )
      ),
      data && React.createElement('div', { className: 'sdw-rows' },
        React.createElement('div', { className: 'sdw-row' },
          React.createElement('span', { className: 'sdw-label' }, 'Total downloads'),
          React.createElement('span', { className: 'sdw-value' }, fmtN(data.total_downloads))
        ),
        React.createElement('div', { className: 'sdw-row' },
          React.createElement('span', { className: 'sdw-label' }, 'Active installs'),
          React.createElement('span', { className: 'sdw-value green' }, fmtN(data.active_installs))
        ),
        React.createElement('div', { className: 'sdw-row' },
          React.createElement('span', { className: 'sdw-label' }, 'Inactive'),
          React.createElement('span', { className: 'sdw-value' }, fmtN(data.inactive_installs))
        ),
        React.createElement('div', { className: 'sdw-divider' }),
        React.createElement('div', { className: 'sdw-row' },
          React.createElement('span', { className: 'sdw-label' }, 'New installs 30d'),
          React.createElement('span', { className: 'sdw-value green' }, data.new_30d ? '+' + fmtN(data.new_30d) : '\u2014')
        ),
        React.createElement('div', { className: 'sdw-row' },
          React.createElement('span', { className: 'sdw-label' }, 'Deactivations 30d'),
          React.createElement('span', { className: 'sdw-value red' }, data.deactivations_30d ? '\u2212' + fmtN(data.deactivations_30d) : '\u2014')
        ),
        React.createElement('div', { className: 'sdw-divider' }),
        (data.versions || []).map(v =>
          React.createElement('div', { key: v.version, className: 'sdw-row' },
            React.createElement('span', { className: 'sdw-label' }, 'v' + v.version),
            React.createElement('span', { className: 'sdw-value' }, fmtN(v.count) + ' (' + v.pct + '%)')
          )
        )
      )
    );
  }

  /* ─── WIDGET 3: OutcomeMetricsWidget ─────────────────────── */
  const METRIC_LABELS = {
    hours_saved:           'Hours saved',
    sites_scanned:         'Sites scanned',
    pages_scanned:         'Pages scanned',
    ada_issues_found:      'ADA issues found',
    ada_issues_fixed:      'ADA issues fixed',
    migrations_completed:  'Migrations completed',
    security_blocked:      'Security incidents blocked',
    images_optimized:      'Images optimized',
    keywords_tracked:      'Keywords tracked',
  };

  function OutcomeMetricsWidget() {
    const [data, setData] = React.useState(null);
    const [loading, setLoading] = React.useState(true);
    const [error, setError] = React.useState('');

    React.useEffect(() => {
      apiFetch('/sa/metrics/outcomes')
        .then(d => { setData(d); setError(''); })
        .catch(e => setError(e.message))
        .finally(() => setLoading(false));
    }, []);

    return React.createElement('div', { className: 'sdw-card' },
      React.createElement('div', { className: 'sdw-card-header' },
        React.createElement('span', { className: 'sdw-card-title' }, '\u23F1\uFE0F Customer Outcomes')
      ),
      loading && React.createElement('div', { className: 'sdw-loading' }, 'Loading\u2026'),
      error && React.createElement('div', null,
        React.createElement('div', { className: 'sdw-error' }, 'Phase A not yet deployed'),
        React.createElement('div', { className: 'sdw-phase-note' },
          'Outcome metrics require Phase A Railway aggregation cron + Supabase tables. Ships in next implementation session.'
        )
      ),
      data && React.createElement('div', { className: 'sdw-rows' },
        Object.entries(METRIC_LABELS).map(([key, label]) =>
          data[key] !== undefined && React.createElement('div', { key, className: 'sdw-row' },
            React.createElement('span', { className: 'sdw-label' }, label),
            React.createElement('span', {
              className: 'sdw-value' + (key === 'hours_saved' ? ' green' : ''),
            }, fmtN(data[key]))
          )
        ),
        data.avg_hours_per_agency && React.createElement(React.Fragment, null,
          React.createElement('div', { className: 'sdw-divider' }),
          React.createElement('div', { className: 'sdw-row' },
            React.createElement('span', { className: 'sdw-label' }, 'Avg hours saved / agency'),
            React.createElement('span', { className: 'sdw-value green' }, fmtN(data.avg_hours_per_agency) + 'h')
          )
        )
      )
    );
  }

  /* ─── Exports ─────────────────────────────────────────────── */
  window.StripeLiveWidget     = StripeLiveWidget;
  window.PluginHealthWidget   = PluginHealthWidget;
  window.OutcomeMetricsWidget = OutcomeMetricsWidget;

})();