// app.jsx — host app: URL-param personalization, Supabase autosave, submit.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "screen": "welcome",
  "questionIndex": 0,
  "showSavedToast": true
}/*EDITMODE-END*/;

const EMPTY_ANSWERS = { pain:'', usecases:'', attempts:'', inspiration:'', success:'', bonus:'' };
const SAVE_DEBOUNCE_MS = 600;
const showTweaks =
  window.location.hostname === 'localhost' ||
  window.location.hostname === '127.0.0.1' ||
  new URLSearchParams(window.location.search).get('tweaks') === '1';

const App = () => {
  const briefingRef = React.useRef(readBriefingFromUrl());
  const briefing = briefingRef.current;

  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [screen, setScreen] = React.useState(t.screen || 'welcome');
  const [qIdx, setQIdx] = React.useState(0);
  const [answers, setAnswers] = React.useState(EMPTY_ANSWERS);
  const [savedAt, setSavedAt] = React.useState(null);
  const [hydrated, setHydrated] = React.useState(false);
  // No DB row gets created until the user has actually committed Q1 (clicked
  // "Weiter"). Prevents empty rows from people who only land on the welcome.
  const [committed, setCommitted] = React.useState(false);

  React.useEffect(() => { if (t.screen && t.screen !== screen) setScreen(t.screen); }, [t.screen]);
  React.useEffect(() => { if (typeof t.questionIndex === 'number' && t.questionIndex !== qIdx) setQIdx(t.questionIndex); }, [t.questionIndex]);

  // Hydrate: load existing briefing, jump to confirmation if already submitted.
  // If a row already exists the user has already committed in a previous session,
  // so the save gate opens immediately.
  React.useEffect(() => {
    let cancelled = false;
    (async () => {
      const row = await BWStore.getBriefing(briefing.id);
      if (cancelled) return;
      if (row) setCommitted(true);
      if (row && row.answers) setAnswers({ ...EMPTY_ANSWERS, ...row.answers });
      if (row && row.submitted_at) setScreen('confirmation');
      setHydrated(true);
    })();
    return () => { cancelled = true; };
  }, []);

  // Auto-save: debounced upsert when answers change. Only runs after the user
  // has committed (clicked Weiter on Q1) — prevents empty rows from drive-bys.
  const saveTimer = React.useRef(null);
  React.useEffect(() => {
    if (!hydrated || !committed) return;
    clearTimeout(saveTimer.current);
    saveTimer.current = setTimeout(async () => {
      const res = await BWStore.upsertBriefing({
        id: briefing.id,
        first_name: briefing.name,
        email: briefing.email,
        call_date: briefing.callDateIso,
        answers,
      });
      if (res.ok && t.showSavedToast) {
        setSavedAt(Date.now());
        setTimeout(() => setSavedAt(s => (Date.now() - s > 1900 ? null : s)), 2200);
      }
    }, SAVE_DEBOUNCE_MS);
    return () => clearTimeout(saveTimer.current);
  }, [answers, hydrated, committed]);

  const setAnswer = (id, val) => setAnswers(a => ({ ...a, [id]: val }));
  const triggerSaved = () => {}; // Auto-save handles its own toast now.

  const goNext = async () => {
    // First click on "Weiter" opens the save gate — Q1 has been answered.
    if (!committed) setCommitted(true);
    if (qIdx < QUESTIONS.length - 1) {
      setQIdx(qIdx + 1);
      window.scrollTo({ top: 0 });
    } else {
      clearTimeout(saveTimer.current);
      await BWStore.upsertBriefing({
        id: briefing.id,
        first_name: briefing.name,
        email: briefing.email,
        call_date: briefing.callDateIso,
        answers,
      });
      await BWStore.submit(briefing.id);
      setScreen('confirmation');
      window.scrollTo({ top: 0 });
    }
  };

  const goBack = () => {
    if (qIdx > 0) { setQIdx(qIdx - 1); window.scrollTo({ top: 0 }); }
    else { setScreen('welcome'); window.scrollTo({ top: 0 }); }
  };

  // No scheduled call yet → block the briefing flow and offer to book one.
  const needsBooking = !briefing.callDateIso;

  if (needsBooking) {
    return (
      <>
        <Topbar minimal />
        <BookingScreen/>
      </>
    );
  }

  return (
    <>
      <Topbar
        step={screen === 'questions' ? qIdx + 1 : 0}
        totalSteps={QUESTIONS.length}
        name={briefing.name}
        callDateLabel={briefing.callDateLabel}
      />

      <div style={{ position:'relative', zIndex: 1 }}>
        {screen === 'welcome' && (
          <WelcomeScreen
            name={briefing.name}
            callDateLabel={briefing.callDateLabel}
            onStart={() => { setScreen('questions'); setQIdx(0); window.scrollTo({top:0}); }}
          />
        )}
        {screen === 'questions' && (
          <QuestionScreen
            answers={answers}
            setAnswer={setAnswer}
            idx={qIdx}
            onBack={goBack}
            onNext={goNext}
            onSaved={triggerSaved}
          />
        )}
        {screen === 'confirmation' && (
          <ConfirmationScreen name={briefing.name} callDateLabel={briefing.callDateLabel}/>
        )}
      </div>

      <div className={`save-pill ${savedAt ? 'show' : ''}`}>
        <span className="check"><I.Check style={{ width: 9, height: 9 }}/></span>
        Gespeichert
      </div>

      {showTweaks && (
        <TweaksPanel title="Tweaks · bakedwith Onboarding">
          <TweakSection label="Briefing (aus URL)"/>
          <div style={{ font:'400 11px/1.5 ui-sans-serif', color:'rgba(41,38,27,.65)', padding:'2px 0' }}>
            Vorname: <strong>{briefing.name}</strong><br/>
            Termin: <strong>{briefing.callDateLabel || '—'}</strong><br/>
            ID: <code style={{ fontSize: 10 }}>{briefing.id.slice(0,8)}…</code><br/>
            Storage: <strong>{BWStore.hasSupabase ? 'Supabase' : 'localStorage'}</strong>
          </div>

          <TweakSection label="Navigation"/>
          <TweakRadio
            label="Screen"
            value={screen}
            options={['welcome','questions','confirmation']}
            onChange={v => { setScreen(v); setTweak('screen', v); window.scrollTo({top:0}); }}
          />
          {screen === 'questions' && (
            <TweakSlider
              label="Frage"
              value={qIdx + 1}
              min={1} max={QUESTIONS.length} step={1}
              onChange={v => { setQIdx(v - 1); setTweak('questionIndex', v - 1); }}
            />
          )}

          <TweakSection label="Demo"/>
          <TweakButton label="Antworten leeren" onClick={() => setAnswers(EMPTY_ANSWERS)}>Reset</TweakButton>
          <TweakButton label="Beispielantworten füllen" onClick={() => setAnswers({
            pain: fakeTranscript('pain'),
            usecases: fakeTranscript('usecases'),
            attempts: fakeTranscript('attempts'),
            inspiration: fakeTranscript('inspiration'),
            success: fakeTranscript('success'),
            bonus: fakeTranscript('bonus'),
          })}>Demo-Daten</TweakButton>

          <TweakSection label="Visuals"/>
          <TweakToggle label="Auto-Save Toast" value={t.showSavedToast} onChange={v => setTweak('showSavedToast', v)}/>
        </TweaksPanel>
      )}
    </>
  );
};

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