/* global React, ReactDOM, Nav, Footer, HomePage, ConceptPage, CollectionPage,
   ProductPage, ProjectPage, AppointmentsPage, ContactPage,
   useHashRoute, TweaksPanel, TweakSection, TweakRadio, TweakToggle, TweakColor, useTweaks */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "primary": "#F06030",
  "heroLayout": "split",
  "showFlags": true,
  "density": "editorial"
}/*EDITMODE-END*/;

function App() {
  const path = useHashRoute();
  const [lang, setLang] = React.useState('EN');
  const products = window.TCP_PRODUCTS;
  const copy = window.TCP_COPY;
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply tweaks live via CSS vars
  React.useEffect(() => {
    document.documentElement.style.setProperty('--primary', tweaks.primary);
    document.documentElement.style.setProperty('--focus', tweaks.primary);
    document.documentElement.dataset.density = tweaks.density;
    document.documentElement.dataset.showFlags = tweaks.showFlags ? '1' : '0';
  }, [tweaks]);

  let page;
  if (path === '/' || path === '') {
    page = <HomePage products={products} copy={copy} heroLayout={tweaks.heroLayout} />;
  } else if (path === '/concept') {
    page = <ConceptPage copy={copy} />;
  } else if (path === '/collection') {
    page = <CollectionPage products={products} />;
  } else if (path.startsWith('/product/')) {
    const handle = path.replace('/product/', '');
    const product = products.find(p => p.handle === handle);
    page = <ProductPage product={product} />;
  } else if (path === '/the-project') {
    page = <ProjectPage products={products} />;
  } else if (path === '/appointments') {
    page = <AppointmentsPage />;
  } else if (path === '/contact') {
    page = <ContactPage />;
  } else {
    page = (
      <div className="container" style={{ padding: 96 }}>
        <h1 style={{ fontFamily: 'Archivo' }}>Not found.</h1>
        <p style={{ color: 'var(--muted)' }}><a href="#/">Return home →</a></p>
      </div>
    );
  }

  return (
    <div className="shell">
      <Nav path={path} lang={lang} setLang={setLang} />
      <main>{page}</main>
      <Footer />
      <TweaksPanel title="Tweaks · TCP">
        <TweakSection label="Brand accent">
          <TweakColor
            label="Primary"
            value={tweaks.primary}
            options={['#F06030', '#C8492A', '#E4B546', '#6FA86A', '#A06FA8']}
            onChange={v => setTweak('primary', v)}
          />
        </TweakSection>
        <TweakSection label="Home hero">
          <TweakRadio
            label="Layout"
            value={tweaks.heroLayout}
            options={[
              { value: 'split', label: 'Split' },
              { value: 'typo', label: 'Typographic' },
              { value: 'image', label: 'Full image' },
            ]}
            onChange={v => setTweak('heroLayout', v)}
          />
        </TweakSection>
        <TweakSection label="Build notes">
          <TweakToggle
            label="Show client-confirm flags"
            value={tweaks.showFlags}
            onChange={v => setTweak('showFlags', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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