// app.jsx — main app: tweaks + design canvas wiring

const __TWEAK_DEFAULTS__ = /*EDITMODE-BEGIN*/{
  "palette": "navy",
  "typePair": "instrument-geist",
  "density": "regular"
}/*EDITMODE-END*/;

function ThemeWrap({ tweaks, children }) {
  const cls = [
    'mv-screen-wrap',
    tweaks.palette === 'gold' ? 'palette-gold' : '',
    tweaks.palette === 'emerald' ? 'palette-emerald' : '',
    tweaks.palette === 'violet' ? 'palette-violet' : '',
    tweaks.typePair === 'bodoni-manrope' ? 'type-bodoni type-sans-manrope' : '',
    tweaks.typePair === 'sans-only' ? 'type-mono-display type-sans-sora' : '',
  ].filter(Boolean).join(' ');
  // Apply classes to every .mv-screen via a wrapper + descendant selector
  return (
    <div style={{ display: 'contents' }} ref={el => {
      if (!el) return;
      const root = el.closest('body') || document.body;
      // toggle classes globally on document.body so all screens pick them up
      root.classList.remove('palette-gold', 'palette-emerald', 'palette-violet', 'type-bodoni', 'type-sans-manrope', 'type-mono-display', 'type-sans-sora');
      cls.split(' ').filter(Boolean).forEach(c => root.classList.add(c));
    }}>{children}</div>
  );
}

function App() {
  const [t, setTweak] = useTweaks(__TWEAK_DEFAULTS__);

  // Apply tweaks via body classes — propagated by global CSS (.theme-X .mv-screen)
  useEffect(() => {
    const body = document.body;
    body.classList.remove('palette-gold', 'palette-emerald', 'palette-violet',
      'type-bodoni', 'type-sans-manrope', 'type-mono-display', 'type-sans-sora');
    if (t.palette === 'gold') body.classList.add('palette-gold');
    if (t.palette === 'emerald') body.classList.add('palette-emerald');
    if (t.palette === 'violet') body.classList.add('palette-violet');
    if (t.typePair === 'bodoni-manrope') body.classList.add('type-bodoni', 'type-sans-manrope');
    if (t.typePair === 'sans-only') body.classList.add('type-mono-display', 'type-sans-sora');
  }, [t.palette, t.typePair]);

  // Helper to render any screen with the body classes inherited (we propagate
  // them to .mv-screen via a tiny CSS bridge below).
  return (
    <>
      <DesignCanvas>
        <DCSection id="system" title="Système de design" subtitle="Tokens, typographie, composants partagés">
          <DCArtboard id="ds-system" label="Design system" width={1280} height={1100}><ScreenSystem /></DCArtboard>
        </DCSection>

        <DCSection id="desktop-flow" title="Desktop · Parcours principal" subtitle="Accueil → Réservation 5 étapes → Confirmation">
          <DCArtboard id="d-home" label="Page d'accueil" width={1280} height={2400}><ScreenHome /></DCArtboard>
          <DCArtboard id="d-b1" label="Booking · Itinéraire" width={1280} height={800}><ScreenBookingStep1 /></DCArtboard>
          <DCArtboard id="d-b2" label="Booking · Date & heure" width={1280} height={800}><ScreenBookingStep2 /></DCArtboard>
          <DCArtboard id="d-b3" label="Booking · Véhicule" width={1280} height={800}><ScreenBookingStep3 /></DCArtboard>
          <DCArtboard id="d-b4" label="Booking · Coordonnées" width={1280} height={800}><ScreenBookingStep4 /></DCArtboard>
          <DCArtboard id="d-b5" label="Booking · Récapitulatif" width={1280} height={800}><ScreenBookingStep5 /></DCArtboard>
          <DCArtboard id="d-conf" label="Confirmation" width={1280} height={800}><ScreenConfirmation /></DCArtboard>
        </DCSection>

        <DCSection id="desktop-account" title="Desktop · Espace client" subtitle="Connexion, tableau de bord, historique, profil">
          <DCArtboard id="d-login" label="Connexion" width={1280} height={800}><ScreenLogin /></DCArtboard>
          <DCArtboard id="d-signup" label="Inscription" width={1280} height={800}><ScreenSignup /></DCArtboard>
          <DCArtboard id="d-acc" label="Tableau de bord" width={1280} height={900}><ScreenAccountDashboard /></DCArtboard>
          <DCArtboard id="d-hist" label="Historique" width={1280} height={800}><ScreenHistory /></DCArtboard>
          <DCArtboard id="d-prof" label="Profil" width={1280} height={800}><ScreenProfile /></DCArtboard>
        </DCSection>

        <DCSection id="desktop-pages" title="Desktop · Pages secondaires" subtitle="FAQ, contact, et interface admin">
          <DCArtboard id="d-faq" label="FAQ" width={1280} height={1300}><ScreenFAQ /></DCArtboard>
          <DCArtboard id="d-contact" label="Contact" width={1280} height={1100}><ScreenContact /></DCArtboard>
          <DCArtboard id="d-admin" label="Admin · Gestion réservations" width={1280} height={900}><ScreenAdmin /></DCArtboard>
        </DCSection>

        <DCSection id="b2b" title="Entreprise · B2B" subtitle="Landing dédié, console multi-collaborateurs, politique de voyage">
          <DCArtboard id="b2b-landing" label="Landing Entreprise" width={1280} height={2000}><ScreenB2BLanding /></DCArtboard>
          <DCArtboard id="b2b-dash" label="Console · Tableau de bord" width={1280} height={1000}><ScreenB2BDashboard /></DCArtboard>
          <DCArtboard id="b2b-team" label="Console · Collaborateurs" width={1280} height={900}><ScreenB2BTeam /></DCArtboard>
          <DCArtboard id="b2b-policy" label="Console · Politique de voyage" width={1280} height={900}><ScreenB2BPolicy /></DCArtboard>
        </DCSection>

        <DCSection id="mobile" title="Mobile · Parité responsive" subtitle="Les mêmes parcours sur iPhone — mobile-first conservé">
          <DCArtboard id="m-home" label="Accueil" width={360} height={740}><PhoneFrame><MScreenHome /></PhoneFrame></DCArtboard>
          <DCArtboard id="m-book" label="Réservation · étape" width={360} height={740}><PhoneFrame><MScreenBooking /></PhoneFrame></DCArtboard>
          <DCArtboard id="m-conf" label="Confirmation" width={360} height={740}><PhoneFrame><MScreenConfirm /></PhoneFrame></DCArtboard>
          <DCArtboard id="m-acc" label="Espace client" width={360} height={740}><PhoneFrame><MScreenAccount /></PhoneFrame></DCArtboard>
          <DCArtboard id="m-login" label="Connexion" width={360} height={740}><PhoneFrame><MScreenLogin /></PhoneFrame></DCArtboard>
          <DCArtboard id="m-faq" label="FAQ" width={360} height={740}><PhoneFrame><MScreenFAQ /></PhoneFrame></DCArtboard>
        </DCSection>
      </DesignCanvas>

      <TweaksPanel title="Tweaks · monvtc">
        <TweakSection label="Palette" />
        <TweakColor
          label="Accent"
          value={t.palette}
          options={[
            { value: 'navy', color: 'oklch(0.72 0.16 248)', label: 'Navy' },
            { value: 'gold', color: 'oklch(0.78 0.12 80)', label: 'Or' },
            { value: 'emerald', color: 'oklch(0.74 0.13 165)', label: 'Émeraude' },
            { value: 'violet', color: 'oklch(0.68 0.18 295)', label: 'Violet' },
          ].map(o => o.color)}
          onChange={(c) => {
            const map = { 'oklch(0.72 0.16 248)': 'navy', 'oklch(0.78 0.12 80)': 'gold', 'oklch(0.74 0.13 165)': 'emerald', 'oklch(0.68 0.18 295)': 'violet' };
            setTweak('palette', map[c] || 'navy');
          }}
        />
        <TweakSection label="Typographie" />
        <TweakRadio
          label="Pair"
          value={t.typePair}
          options={[
            { value: 'instrument-geist', label: 'Serif' },
            { value: 'bodoni-manrope', label: 'Bodoni' },
            { value: 'sans-only', label: 'Sans' },
          ]}
          onChange={(v) => setTweak('typePair', v)}
        />
      </TweaksPanel>
    </>
  );
}

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