// 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; }
})();

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

  // Persistente flow-state zodat refresh je plek bewaart
  const saved = (() => {
    try { return JSON.parse(localStorage.getItem('groeiscan_state')) || {}; } catch (e) { return {}; }
  })();
  const [view, setView] = useState(saved.view || 'landing');
  const [lead, setLead] = useState(saved.lead || { website: '', email: '' });
  const [answers, setAnswers] = useState(saved.answers || {});
  const [scanId, setScanId] = useState(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]);

  // Deeplink vanuit het leadbeheer: /?scan=<id> opent direct het rapport
  useEffect(() => {
    const deepId = new URLSearchParams(location.search).get('scan');
    if (!deepId) return;
    fetch(`/api/scan/${deepId}`)
      .then((r) => r.json())
      .then((d) => {
        if (d.status === 'done' && d.result) {
          setLead({ website: d.domain || '', email: '' });
          setScanId(deepId);
          setReport(d.result);
          setView('result');
        }
      })
      .catch(() => {});
  }, []);

  // Na refresh op de resultaatpagina: rapport opnieuw ophalen op scanId
  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);
          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' },
        body: JSON.stringify({ website: l.website, email: l.email }),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok) {
        setStartError(data.error || 'Er ging iets mis. Probeer het opnieuw.');
        return;
      }
      setLead(l);
      setAnswers({});
      setReport(null);
      setScanId(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) => { setReport(result); setView('result'); }}
          onRestart={restart} />
      )}
      {view === 'result' && report && (
        <ResultPage lead={lead} answers={answers} data={report} scanId={scanId}
          benchView={t.benchView} onRestart={restart}
          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 />);