// Agency Audit — app-shell: ?r=<token> opent een rapport; anders intake → voortgang → rapport.
const AUDIT_PAGE_SOURCE = (() => {
  try {
    const p = new URLSearchParams(location.search);
    const utm = ['utm_source', 'utm_medium', 'utm_campaign'].reduce((o, k) => (p.get(k) ? { ...o, [k]: p.get(k) } : o), {});
    const src = Object.keys(utm).length ? utm : (document.referrer ? { referrer: document.referrer } : {});
    if (Object.keys(src).length) sessionStorage.setItem('audit_source', JSON.stringify(src));
    return JSON.parse(sessionStorage.getItem('audit_source') || '{}');
  } catch { return {}; }
})();

function AuditApp() {
  const { useState, useEffect } = React;
  const params = new URLSearchParams(location.search);
  const token = params.get('r');
  const saved = (() => { try { return JSON.parse(localStorage.getItem('audit_state') || 'null'); } catch { return null; } })();
  const [view, setView] = useState(token ? 'loading' : (saved?.view === 'scan' && saved.auditId ? 'scan' : 'intake'));
  const [auditId, setAuditId] = useState(saved?.auditId || null);
  const [report, setReport] = useState(null);
  const [startError, setStartError] = useState('');
  const [starting, setStarting] = useState(false);

  useEffect(() => {
    try { localStorage.setItem('audit_state', JSON.stringify({ view: view === 'result' ? 'intake' : view, auditId })); } catch { /* privémodus */ }
  }, [view, auditId]);

  // Deeplink: rapport via deeltoken
  useEffect(() => {
    if (!token) return;
    fetch(`/api/audit/r/${encodeURIComponent(token)}`).then(async (r) => {
      if (!r.ok) throw new Error('niet gevonden');
      setReport(await r.json()); setView('result');
    }).catch(() => setView('intake'));
  }, [token]);

  async function start(l) {
    if (starting) return;
    setStarting(true); setStartError('');
    try {
      const res = await fetch('/api/audit', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ ...l, source: AUDIT_PAGE_SOURCE }) });
      const d = await res.json().catch(() => ({}));
      if (!res.ok) { setStartError(d.message || d.error || 'Er ging iets mis. Probeer het opnieuw.'); return; }
      setAuditId(d.auditId); setReport(null); setView('scan');
      gsTrack('audit_started', { product: 'audit', audit_id: d.auditId, domain: l.website }, d.auditId);
    } catch { setStartError('Kan de audit niet starten. Controleer je verbinding.'); }
    finally { setStarting(false); }
  }
  function restart() { setView('intake'); setAuditId(null); setReport(null); history.replaceState(null, '', location.pathname); }

  if (view === 'loading') return <div style={{ minHeight: '100vh', background: 'var(--bm-dark)' }}></div>;
  if (view === 'scan' && auditId) return <AuditProgress auditId={auditId} onDone={(rep) => { gsTrack('audit_ready', { product: 'audit', audit_id: auditId, domain: rep.audit?.domain || '', verdict: rep.scores?.verdict || '', total_score: rep.scores?.total ?? null }, auditId); setReport(rep); setView('result'); history.replaceState(null, '', `/?r=${encodeURIComponent(rep.shareToken)}`); }} onRestart={restart} />;
  if (view === 'result' && report) return <AuditReport report={report} onRestart={restart} />;
  return <AuditIntake onStart={start} serverError={startError} busy={starting} />;
}

ReactDOM.createRoot(document.getElementById('root')).render(<AuditApp />);