// 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 isPreview = !!params.get('lp_preview');
  const [view, setView] = useState(token ? 'loading' : (!isPreview && 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);
  const [landing, setLanding] = useState(null);
  const [concernOptions, setConcernOptions] = useState(saved?.concernOptions || null);
  // Lay-out "keuring" (testvariant): landing, wachtpagina, bon en second opinion in het lichte ontwerp
  const [full, setFull] = useState(false);
  const layout = landing?.config?.layout || 'basis';

  // Landing-variant voor deze bezoeker (A/B-test); zonder antwoord de ingebouwde basis
  useEffect(() => {
    const q = new URLSearchParams(location.search); const keep = ['utm_source', 'utm_campaign', 'lp_preview'].filter((k) => q.get(k)).map((k) => `${k}=${encodeURIComponent(q.get(k))}`).join('&');
    if (q.get('lp_preview')) window.LP_PREVIEW = true; // voorvertoning: geen signalen meten
    fetch(`/api/audit/landing${keep ? `?${keep}` : ''}`).then((r) => (r.ok ? r.json() : null)).then((d) => { if (d?.config) setLanding(d); }).catch(() => {});
  }, []);

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

  // 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, askConcerns = null) {
    if (starting) return;
    setStarting(true); setStartError('');
    setConcernOptions(askConcerns);
    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' || (isPreview && !landing && view === 'result')) return <div style={{ minHeight: '100vh', background: isPreview ? '#F6F9F8' : 'var(--bm-dark)' }}></div>;
  if (layout === 'keuring') {
    const cfg = { ...LANDING_DEFAULT, ...(landing?.config || {}) };
    const ready = (rep) => { gsTrack('audit_ready', { product: 'audit', audit_id: auditId, domain: rep.audit?.domain || '', verdict: rep.scores?.verdict || '', total_score: rep.scores?.total ?? null }, auditId); try { window.lpSignals?.push('report_viewed', auditId); window.lpSignals?.flush(false); } catch { /* bijzaak */ } setReport(rep); setView('result'); history.replaceState(null, '', `/?r=${encodeURIComponent(rep.shareToken)}`); };
    if (view === 'scan' && auditId) return <KeuringScan auditId={auditId} onDone={ready} onRestart={restart} />;
    if (view === 'opinion' && report) return <KeuringOpinion report={report} onBack={() => setView('result')} />;
    if (view === 'result' && report) return full ? <AuditReport report={report} onRestart={restart} /> : <KeuringBon report={report} onOpinion={() => { setView('opinion'); window.scrollTo(0, 0); }} onFull={() => { setFull(true); window.scrollTo(0, 0); }} onRestart={restart} />;
    return <KeuringLanding onStart={start} serverError={startError} busy={starting} cfg={cfg} />;
  }
  if (view === 'scan' && auditId) return <AuditProgress auditId={auditId} concernOptions={concernOptions} 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); try { window.lpSignals?.push('report_viewed', auditId); window.lpSignals?.flush(false); } catch { /* bijzaak */ } 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} landing={landing} />;
}

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