// Main app — route state, Tweaks context, page wiring

const TweaksCtx = createContext({});
window.TweaksCtx = TweaksCtx;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "editorial",
  "theme": "light",
  "lang": "EN",
  "showFab": true,
  "accentMode": "bronze",
  "displayFont": "Cormorant Garamond",
  "bodyFont": "Inter"
}/*EDITMODE-END*/;

function App() {
  const [route, setRoute] = useState({ page: 'home' });
  const [tweaks, setTweaks] = useState(TWEAK_DEFAULTS);

  const setTweak = (patch) => {
    const next = typeof patch === 'function' ? patch(tweaks) : { ...tweaks, ...patch };
    setTweaks(next);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: next }, '*');
  };

  const go = useCallback((next) => {
    setRoute(next);
    window.scrollTo({ top: 0, behavior: 'auto' });
  }, []);

  // Apply theme + dir
  useEffect(() => {
    document.documentElement.className = tweaks.theme === 'dark' ? 'theme-dark' : '';
    document.documentElement.dir = tweaks.lang === 'AR' ? 'rtl' : 'ltr';
    document.documentElement.lang = tweaks.lang.toLowerCase();
  }, [tweaks.theme, tweaks.lang]);

  // Apply accent palette
  useEffect(() => {
    const root = document.documentElement;
    if (tweaks.accentMode === 'navy') {
      root.style.setProperty('--bronze', '#3D6B8E');
      root.style.setProperty('--bronze-deep', '#1E3A5F');
      root.style.setProperty('--bronze-tint', '#EDF2F7');
    } else if (tweaks.accentMode === 'sage') {
      root.style.setProperty('--bronze', '#7A8B6F');
      root.style.setProperty('--bronze-deep', '#4F5E47');
      root.style.setProperty('--bronze-tint', '#EFF1EC');
    } else {
      root.style.setProperty('--bronze', '#B79360');
      root.style.setProperty('--bronze-deep', '#8D6E40');
      root.style.setProperty('--bronze-tint', '#F5EFE3');
    }
  }, [tweaks.accentMode]);

  // Apply font choices
  useEffect(() => {
    document.documentElement.style.setProperty('--font-display', `"${tweaks.displayFont}", "Times New Roman", serif`);
    document.documentElement.style.setProperty('--font-body', `"${tweaks.bodyFont}", -apple-system, BlinkMacSystemFont, sans-serif`);
  }, [tweaks.displayFont, tweaks.bodyFont]);

  const ctxValue = { ...tweaks, set: setTweak, hero: tweaks.hero, lang: tweaks.lang };

  let page = null;
  switch (route.page) {
    case 'home': page = <Home go={go} />; break;
    case 'procedures': page = <ProceduresHub go={go} areaId={route.area} />; break;
    case 'procedure': page = <ProcedureDetail go={go} slug={route.slug} />; break;
    case 'surgeons': page = <Surgeons go={go} />; break;
    case 'surgeon': page = <SurgeonProfile go={go} slug={route.slug} />; break;
    case 'before-after': page = <BeforeAfter go={go} />; break;
    case 'about': page = <About go={go} />; break;
    case 'contact': page = <Contact go={go} />; break;
    case 'book': page = <BookingFlow go={go} prefill={route.prefill} />; break;
    default: page = <Home go={go} />;
  }

  return (
    <TweaksCtx.Provider value={ctxValue}>
      <Nav route={route} go={go} />
      <main key={route.page}>{page}</main>
      <Footer go={go} />

      {/* Tweaks panel */}
      <AestheticsTweaks tweaks={tweaks} set={setTweak} />
    </TweaksCtx.Provider>
  );
}

// Tweaks panel
function AestheticsTweaks({ tweaks, set }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Hero treatment">
        <TweakRadio
          value={tweaks.hero}
          onChange={(v) => set({ hero: v })}
          options={[
            { value: 'editorial', label: 'Editorial' },
            { value: 'cinematic', label: 'Cinematic' }
          ]}
        />
      </TweakSection>

      <TweakSection label="Theme">
        <TweakRadio
          value={tweaks.theme}
          onChange={(v) => set({ theme: v })}
          options={[
            { value: 'light', label: 'Porcelain' },
            { value: 'dark', label: 'Ink' }
          ]}
        />
      </TweakSection>

      <TweakSection label="Accent">
        <TweakColor
          value={tweaks.accentMode}
          onChange={(v) => set({ accentMode: v })}
          options={[
            { value: 'bronze', color: '#B79360', label: 'Bronze' },
            { value: 'navy', color: '#1E3A5F', label: 'Clinical Navy' },
            { value: 'sage', color: '#4F5E47', label: 'Sage' }
          ]}
        />
      </TweakSection>

      <TweakSection label="Display font">
        <TweakSelect
          value={tweaks.displayFont}
          onChange={(v) => set({ displayFont: v })}
          options={[
            { value: 'Cormorant Garamond', label: 'Cormorant Garamond' },
            { value: 'Fraunces', label: 'Fraunces' },
            { value: 'Libre Caslon Text', label: 'Libre Caslon' },
            { value: 'Manrope', label: 'Manrope (sans)' }
          ]}
        />
      </TweakSection>

      <TweakSection label="Body font">
        <TweakSelect
          value={tweaks.bodyFont}
          onChange={(v) => set({ bodyFont: v })}
          options={[
            { value: 'Inter', label: 'Inter' },
            { value: 'Manrope', label: 'Manrope' },
            { value: 'IBM Plex Sans', label: 'IBM Plex Sans' }
          ]}
        />
      </TweakSection>

      <TweakSection label="Language">
        <TweakRadio
          value={tweaks.lang}
          onChange={(v) => set({ lang: v })}
          options={[
            { value: 'EN', label: 'EN' },
            { value: 'AR', label: 'AR' }
          ]}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

// Color tweak (custom — for accent swatches)
function TweakColor({ value, onChange, options }) {
  return (
    <div style={{ display: 'flex', gap: 8 }}>
      {options.map(o => (
        <button
          key={o.value}
          onClick={() => onChange(o.value)}
          title={o.label}
          style={{
            width: 36,
            height: 36,
            borderRadius: '50%',
            background: o.color,
            border: '2px solid',
            borderColor: value === o.value ? 'var(--ink)' : 'transparent',
            boxShadow: value === o.value ? '0 0 0 2px var(--porcelain) inset' : 'none',
            cursor: 'pointer',
            transition: '0.15s'
          }}
        />
      ))}
    </div>
  );
}
window.TweakColor = TweakColor;

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