/* app.jsx — root state machine */

const { useState: useStateA, useEffect: useEffectA, useMemo: useMemoA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "bronze",
  "density": "regular",
  "calendar": "strip",
  "lang": "FR",
  "simulateError": false
}/*EDITMODE-END*/;

function initialPatient() {
  return {
    first: '', last: '', dob: '', phone: '', email: '',
    ssn: '', mutuelle: '', status: '',
    notes: '', antecedents: [], consent: false,
  };
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [view, setView] = useStateA('booking'); // 'booking' | 'cabinet' | 'equipe' | 'honoraires'
  const [step, setStep] = useStateA(0); // 0 = landing, 1-5 = flow, 6 = processing/success/error
  const [bookingStatus, setBookingStatus] = useStateA('idle'); // idle | processing | success | error
  const [procProgress, setProcProgress] = useStateA(0);
  const [errorCause, setErrorCause] = useStateA(0);
  const [lang, setLang] = useStateA(t.lang === 'EN' ? 'en' : 'fr');
  const [state, setState] = useStateA({
    treatment: null,
    practitioner: null,
    date: null,
    time: null,
    patient: initialPatient(),
  });
  const [refNum] = useStateA(() => `RDV-${Math.random().toString(36).slice(2, 7).toUpperCase()}`);

  // Sync tweak palette/density into root
  useEffectA(() => {
    document.body.dataset.palette = t.palette;
    document.body.dataset.density = t.density;
  }, [t.palette, t.density]);

  // Sync language tweak
  useEffectA(() => {
    setLang(t.lang === 'EN' ? 'en' : 'fr');
  }, [t.lang]);

  const langUI = lang === 'fr' ? 'FR' : 'EN';
  const setLangUI = (v) => {
    setTweak('lang', v);
    setLang(v === 'EN' ? 'en' : 'fr');
  };

  const i18n = I18N[lang];

  const goHome = () => { setView('booking'); setStep(0); };
  const startBooking = () => { setView('booking'); setStep(1); };
  const navTo = (v) => {
    setView(v);
    if (v === 'booking') setStep(0);
    window.scrollTo({ top: 0, behavior: 'instant' });
  };
  const next = () => setStep((s) => Math.min(6, s + 1));
  const back = () => setStep((s) => Math.max(0, s - 1));
  const jumpTo = (i) => setStep(i + 1);

  // Final submit: review → processing → success or error
  const submitBooking = () => {
    setStep(6);
    setBookingStatus('processing');
    setProcProgress(0);
    const timers = [];
    timers.push(setTimeout(() => setProcProgress(1), 700));
    timers.push(setTimeout(() => setProcProgress(2), 1500));
    timers.push(setTimeout(() => {
      if (t.simulateError) {
        setErrorCause((c) => (c + 1) % 3);
        setBookingStatus('error');
      } else {
        setProcProgress(3);
        setBookingStatus('success');
      }
    }, 2400));
  };
  const retryBooking = () => submitBooking();

  // Quick-book from hero: skip to date with treatment pre-selected
  const onHeroPickSlot = (date, timeStr) => {
    const d = new Date(); d.setHours(0,0,0,0);
    setState({ ...state, treatment: 'consultation', practitioner: 'auto', date: d, time: timeStr });
    setStep(4);
  };

  const resetAll = () => {
    setState({ treatment: null, practitioner: null, date: null, time: null, patient: initialPatient() });
    setBookingStatus('idle');
    setStep(0);
  };

  return (
    <div className="app">
      <TopBar
        lang={langUI}
        setLang={setLangUI}
        view={view}
        onNav={navTo}
        t={{ nav: i18n.nav, urgence: i18n.urgence }}
      />

      {view === 'cabinet' && (
        <CabinetPage lang={lang} onBook={startBooking} />
      )}
      {view === 'equipe' && (
        <TeamPage lang={lang} onBook={startBooking} />
      )}
      {view === 'honoraires' && (
        <FeesPage lang={lang} onBook={startBooking} />
      )}

      {view === 'booking' && step === 0 && (
        <Hero lang={lang} onBook={startBooking} onPickSlot={onHeroPickSlot} nextAvailable={new Date()} />
      )}

      {view === 'booking' && step >= 1 && step <= 5 && (
        <>
          <Stepper
            steps={i18n.steps}
            current={step - 1}
            onJump={jumpTo}
            t={{ stepper_secure: i18n.stepper_secure }}
          />
          <div className="step">
            {step === 1 && (
              <Step1Treatment lang={lang} state={state} setState={setState} onNext={next} />
            )}
            {step === 2 && (
              <Step2Practitioner lang={lang} state={state} setState={setState} onNext={next} onBack={back} />
            )}
            {step === 3 && (
              <Step3Calendar lang={lang} state={state} setState={setState} onNext={next} onBack={back}
                             calendarStyle={t.calendar} />
            )}
            {step === 4 && (
              <Step4Info lang={lang} state={state} setState={setState} onNext={next} onBack={back} />
            )}
            {step === 5 && (
              <Step5Review lang={lang} state={state} onConfirm={submitBooking} onBack={back} />
            )}
            <SideRail state={state} lang={lang} />
          </div>
        </>
      )}

      {view === 'booking' && step === 6 && bookingStatus === 'processing' && (
        <Processing lang={lang} progress={procProgress} />
      )}
      {view === 'booking' && step === 6 && bookingStatus === 'success' && (
        <Confirmation lang={lang} state={state} onAnother={resetAll} refNum={refNum} />
      )}
      {view === 'booking' && step === 6 && bookingStatus === 'error' && (
        <ErrorScreen lang={lang} state={state} refNum={refNum} errorCause={errorCause}
                     onRetry={retryBooking} onBack={() => { setBookingStatus('idle'); setStep(5); }} />
      )}

      <TweaksPanel title="Tweaks">
        <TweakSection label={lang === 'fr' ? 'Palette' : 'Palette'} />
        <TweakRadio
          label={lang === 'fr' ? 'Ambiance' : 'Mood'}
          value={t.palette}
          options={[
            { value: 'cream', label: 'Cream' },
            { value: 'ink', label: 'Ink' },
            { value: 'bronze', label: 'Bronze' },
            { value: 'noir', label: 'Noir' },
          ]}
          onChange={(v) => setTweak('palette', v)}
        />
        <TweakSection label={lang === 'fr' ? 'Mise en page' : 'Layout'} />
        <TweakRadio
          label={lang === 'fr' ? 'Densité' : 'Density'}
          value={t.density}
          options={['compact', 'regular', 'comfy']}
          onChange={(v) => setTweak('density', v)}
        />
        <TweakRadio
          label={lang === 'fr' ? 'Calendrier' : 'Calendar'}
          value={t.calendar}
          options={[
            { value: 'strip', label: 'Day strip' },
            { value: 'month', label: 'Month' },
          ]}
          onChange={(v) => setTweak('calendar', v)}
        />
        <TweakSection label={lang === 'fr' ? 'Langue' : 'Language'} />
        <TweakRadio
          label={lang === 'fr' ? 'Langue' : 'Language'}
          value={t.lang}
          options={['FR', 'EN']}
          onChange={(v) => setTweak('lang', v)}
        />
        <TweakSection label={lang === 'fr' ? 'Démo' : 'Demo'} />
        <TweakToggle
          label={lang === 'fr' ? 'Simuler une erreur' : 'Simulate error'}
          value={t.simulateError}
          onChange={(v) => setTweak('simulateError', v)}
        />
        <TweakSection label={lang === 'fr' ? 'Navigation' : 'Navigation'} />
        <TweakButton label={lang === 'fr' ? 'Aller à l\'étape suivante' : 'Go to next step'}
                     onClick={() => setStep((s) => Math.min(6, s + 1))} />
        <TweakButton secondary label={lang === 'fr' ? 'Retour à l\'accueil' : 'Back to home'}
                     onClick={resetAll} />
      </TweaksPanel>
    </div>
  );
}

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