// Hoofd-app: state machine landing → scan → resultaat, + Tweaks
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "ctaColor": "orange",
  "scanDuration": 18,
  "benchView": "verdeling"
}/*EDITMODE-END*/;

const CTA_PALETTES = {
  orange: ['#F58220', '#EF6C1A'],
  teal: ['#1FA69E', '#177E78'],
  navy: ['#1E4E79', '#153A5B'],
};

// Het Tweaks-paneel is een intern design-hulpmiddel (opent alleen binnen de
// DesignSync-editor). We monten het alleen lokaal, zodat het op de live scan
// gegarandeerd niet in de DOM zit. De app gebruikt sowieso TWEAK_DEFAULTS.
const SHOW_TWEAKS = (() => {
  try {
    const h = location.hostname;
    return h === 'localhost' || h === '127.0.0.1';
  } catch (e) { return false; }
})();

// Herkomst van het bezoek (UTM's of verwijzende site), eenmalig vastgelegd in
// sessionStorage zodat het ook na een refresh nog bij de scanstart meegaat.
const PAGE_SOURCE = (() => {
  try {
    const stored = sessionStorage.getItem('gs_source');
    if (stored) return JSON.parse(stored);
    const p = new URLSearchParams(location.search);
    const src = {
      utm_source: p.get('utm_source') || '',
      utm_medium: p.get('utm_medium') || '',
      utm_campaign: p.get('utm_campaign') || '',
      referrer: document.referrer || '',
    };
    sessionStorage.setItem('gs_source', JSON.stringify(src));
    return src;
  } catch (e) { return null; }
})();

function App() {
  const { useState, useEffect } = React;
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Persistente flow-state zodat refresh je plek bewaart. Een deeplink
  // (/?scan=<id>) wint altijd van de opgeslagen state, anders kan een oud
  // rapport uit localStorage het opgevraagde rapport overschrijven.
  const saved = (() => {
    try { return JSON.parse(localStorage.getItem('groeiscan_state')) || {}; } catch (e) { return {}; }
  })();
  const deepId = (() => {
    try { return new URLSearchParams(location.search).get('scan'); } catch (e) { return null; }
  })();
  const [view, setView] = useState(deepId ? 'result' : (saved.view || 'landing'));
  const [lead, setLead] = useState(deepId ? { website: '', email: '' } : (saved.lead || { website: '', email: '' }));
  const [answers, setAnswers] = useState(deepId ? {} : (saved.answers || {}));
  const [scanId, setScanId] = useState(deepId || saved.scanId || null);
  const [report, setReport] = useState(null);
  const [startError, setStartError] = useState('');
  const [starting, setStarting] = useState(false);

  useEffect(() => {
    localStorage.setItem('groeiscan_state', JSON.stringify({ view, lead, answers, scanId }));
  }, [view, lead, answers, scanId]);

  useEffect(() => {
    const [c1, c2] = CTA_PALETTES[t.ctaColor] || CTA_PALETTES.orange;
    const root = document.documentElement;
    root.style.setProperty('--bm-cta-1', c1);
    root.style.setProperty('--bm-cta-2', c2);
  }, [t.ctaColor]);

  useEffect(() => { window.scrollTo(0, 0); }, [view]);

  // Eén laadpad voor deeplinks én refresh op de resultaatpagina: rapport
  // ophalen op het actuele scanId (deeplink-id heeft al voorrang gekregen).
  useEffect(() => {
    if (view === 'result' && !report && scanId) {
      fetch(`/api/scan/${scanId}`)
        .then((r) => r.json())
        .then((d) => {
          if (d.status === 'done' && d.result) {
            setReport(d.result);
            if (d.domain) setLead((l) => (l.website ? l : { ...l, website: d.domain }));
          } else {
            setView('landing');
          }
        })
        .catch(() => setView('landing'));
    }
  }, [view, report, scanId]);

  async function start(l) {
    if (starting) return;
    setStarting(true);
    setStartError('');
    try {
      const res = await fetch('/api/scan', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        // e-mail komt pas tijdens de scan (stap 2) via /api/scan/:id/email
        body: JSON.stringify({ website: l.website, source: PAGE_SOURCE }),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok) {
        setStartError(data.error || 'Er ging iets mis. Probeer het opnieuw.');
        return;
      }
      setLead({ website: l.website, email: '' });
      setAnswers({});
      setReport(null);
      setScanId(data.scanId);
      gsTrack('scan_started', { product: 'groeiscan', scan_id: data.scanId, domain: l.website }, data.scanId);
      setView('scan');
    } catch (e) {
      setStartError('Kan de scan niet starten. Controleer je verbinding en probeer opnieuw.');
    } finally {
      setStarting(false);
    }
  }

  function restart() { setView('landing'); setAnswers({}); setReport(null); setScanId(null); }

  return (
    <div>
      {view === 'landing' && <Landing onStart={start} t={t} serverError={startError} busy={starting} />}
      {view === 'scan' && (
        <ScanLoader lead={lead} scanId={scanId} minDuration={t.scanDuration}
          answers={answers} setAnswers={setAnswers}
          onDone={(result) => { gsTrack('scan_ready', { product: 'groeiscan', scan_id: scanId, domain: lead.website || '' }, scanId); setReport(result); setView('result'); }}
          onRestart={restart} />
      )}
      {view === 'result' && report && (
        <ResultPage lead={lead} answers={answers} data={report} scanId={scanId}
          benchView={t.benchView} onRestart={restart}
          onEmail={(em) => setLead((cur) => ({ ...cur, email: em }))}
          onResearchDone={(patch) => setReport((r) => ({ ...r, ...patch }))} />
      )}

      {SHOW_TWEAKS && (
        <TweaksPanel>
          <TweakSection label="Stijl" />
          <TweakColor label="CTA-kleur" value={CTA_PALETTES[t.ctaColor][0]}
            options={[CTA_PALETTES.orange[0], CTA_PALETTES.teal[0], CTA_PALETTES.navy[0]]}
            onChange={(v) => setTweak('ctaColor', Object.keys(CTA_PALETTES).find(k => CTA_PALETTES[k][0] === v) || 'orange')} />
          <TweakSection label="Scan" />
          <TweakSlider label="Min. scanduur" value={t.scanDuration} min={5} max={45} step={1} unit="s"
            onChange={(v) => setTweak('scanDuration', v)} />
          <TweakSection label="Resultaat" />
          <TweakRadio label="Benchmark" value={t.benchView} options={['verdeling', 'range']}
            onChange={(v) => setTweak('benchView', v)} />
          <TweakButton label="Flow" onClick={() => { restart(); }}>Terug naar start</TweakButton>
        </TweaksPanel>
      )}
    </div>
  );
}

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