// Gafla — main app
const { useState: useStateApp, useEffect: useEffectApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "noir",
  "display": "serif",
  "arabicAccent": true
}/*EDITMODE-END*/;

function App() {
  const [route, setRoute] = useStateApp({ name: 'home' });
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply theme attributes to html
  useEffectApp(() => {
    document.documentElement.setAttribute('data-palette', tweaks.palette);
    document.documentElement.setAttribute('data-display', tweaks.display);
  }, [tweaks.palette, tweaks.display]);

  const navigate = (name, params = {}) => {
    setRoute({ name, ...params });
    window.scrollTo({ top: 0, behavior: 'instant' });
  };

  const renderPage = () => {
    switch (route.name) {
      case 'home': return <HomePage arabicAccent={tweaks.arabicAccent} />;
      case 'collections': return <CollectionsPage arabicAccent={tweaks.arabicAccent} />;
      case 'collection': return <CollectionPage id={route.id} arabicAccent={tweaks.arabicAccent} />;
      case 'product': return <ProductPage id={route.id} />;
      case 'bespoke': return <BespokePage />;
      case 'concierge': return <ConciergePage />;
      case 'story': return <StoryPage arabicAccent={tweaks.arabicAccent} />;
      case 'boutiques': return <BoutiquesPage />;
      case 'contact': return <ContactPage initialTab={route.tab} productId={route.product} />;
      default: return <HomePage arabicAccent={tweaks.arabicAccent} />;
    }
  };

  return (
    <RouterContext.Provider value={{ route, navigate }}>
      <TopNav arabicAccent={tweaks.arabicAccent} />
      <main key={route.name + (route.id || '')}>
        {renderPage()}
      </main>
      <Footer />
      <TweaksPanel title="Tweaks">
        <TweakSection label="Palette" />
        <TweakRadio
          label="Theme"
          value={tweaks.palette}
          onChange={(v) => setTweak('palette', v)}
          options={[
            { value: 'noir', label: 'Noir' },
            { value: 'sand', label: 'Sand' },
            { value: 'pearl', label: 'Pearl' },
            { value: 'oxblood', label: 'Oxblood' },
          ]}
        />
        <TweakSection label="Type" />
        <TweakRadio
          label="Display"
          value={tweaks.display}
          onChange={(v) => setTweak('display', v)}
          options={[
            { value: 'serif', label: 'Serif' },
            { value: 'condensed', label: 'Sans' },
          ]}
        />
        <TweakSection label="Detail" />
        <TweakToggle
          label="Arabic accent"
          value={tweaks.arabicAccent}
          onChange={(v) => setTweak('arabicAccent', v)}
        />
      </TweaksPanel>
    </RouterContext.Provider>
  );
}

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