// app.jsx — Root, router, tweaks, mobile preview

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#0d4a30", "#e8b86a", "#c2391f"],
  "displayFont": "Anton",
  "cols": 4,
  "headline": "Garanta agora o álbum, envelopes e cards exclusivos da edição 2026 — direto na sua casa, lacrados, com nota fiscal.",
  "viewMode": "desktop"
}/*EDITMODE-END*/;

function TweaksUI({ t, setTweak, navigate, cartStore }) {
  return (
    <TweaksPanel title="Tweaks · Central da Copa">
      <TweakSection label="Identidade" />
      <TweakColor
        label="Paleta"
        value={t.palette}
        options={[
          ['#0d4a30', '#e8b86a', '#c2391f'],
          ['#072a1c', '#e8b86a', '#c4933e'],
          ['#0a3a72', '#e8b86a', '#c2391f'],
          ['#1a1a1a', '#e8b86a', '#0d4a30'],
          ['#5b1409', '#e8b86a', '#0d4a30'],
        ]}
        onChange={(v) => setTweak('palette', v)}
      />
      <TweakRadio
        label="Fonte display"
        value={t.displayFont}
        options={['Anton', 'Bebas Neue', 'Oswald']}
        onChange={(v) => setTweak('displayFont', v)}
      />
      <TweakSection label="Layout" />
      <TweakRadio
        label="Visualização"
        value={t.viewMode}
        options={['desktop', 'mobile']}
        onChange={(v) => setTweak('viewMode', v)}
      />
      <TweakSelect
        label="Colunas (vitrine)"
        value={String(t.cols)}
        options={['3', '4', '5']}
        onChange={(v) => setTweak('cols', +v)}
      />
      <TweakSection label="Conteúdo" />
      <TweakText
        label="Headline do hero"
        value={t.headline}
        onChange={(v) => setTweak('headline', v)}
      />
      <TweakSection label="Atalhos" />
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
        {[
          ['Home', 'home'],
          ['Categoria', 'category'],
          ['Produto', 'product', { id: 'box-40' }],
          ['Carrinho', 'cart'],
          ['Checkout', 'checkout'],
          ['Conta', 'account'],
          ['Contato', 'contact'],
        ].map(([label, name, params]) => (
          <button key={label} className="twk-mini" onClick={() => navigate(name, params || {})}>{label}</button>
        ))}
      </div>
    </TweaksPanel>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const cartStore = useCartStore();

  const [route, setRoute] = React.useState({ name: 'home', params: {} });
  const [query, setQuery] = React.useState('');

  React.useEffect(() => {
    const parse = () => {
      const h = window.location.hash.slice(1);
      if (!h) return setRoute({ name: 'home', params: {} });
      const [name, qs] = h.split('?');
      const params = {};
      if (qs) qs.split('&').forEach((kv) => {
        const [k, v] = kv.split('=');
        params[k] = decodeURIComponent(v || '');
      });
      setRoute({ name, params });
    };
    parse();
    window.addEventListener('hashchange', parse);
    return () => window.removeEventListener('hashchange', parse);
  }, []);

  const navigate = (name, params = {}) => {
    const qs = Object.entries(params)
      .filter(([, v]) => v !== undefined && v !== null)
      .map(([k, v]) => `${k}=${encodeURIComponent(v)}`).join('&');
    window.location.hash = name + (qs ? '?' + qs : '');
    window.scrollTo({ top: 0, behavior: 'instant' });
  };

  React.useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty('--brand', t.palette[0]);
    r.style.setProperty('--accent', t.palette[1]);
    r.style.setProperty('--alert', t.palette[2]);
    r.style.setProperty('--display-font', `"${t.displayFont}", "Anton", sans-serif`);
  }, [t.palette, t.displayFont]);

  const showHeaderFooter = route.name !== 'checkout';

  let page = null;
  switch (route.name) {
    case 'home': page = <HomePage navigate={navigate} tweaks={t} />; break;
    case 'category': page = <CategoryPage navigate={navigate} params={route.params} query={query} setQuery={setQuery} />; break;
    case 'product': page = <ProductPage navigate={navigate} params={route.params} />; break;
    case 'cart': page = <CartPage navigate={navigate} />; break;
    case 'checkout': page = <CheckoutPage navigate={navigate} />; break;
    case 'confirmation': page = <ConfirmationPage navigate={navigate} params={route.params} />; break;
    case 'account': page = <AccountPage navigate={navigate} params={route.params} />; break;
    case 'contact': page = <StaticPage kind="contact" navigate={navigate} />; break;
    case 'terms': page = <StaticPage kind="terms" navigate={navigate} />; break;
    case 'policy': page = <StaticPage kind="policy" navigate={navigate} />; break;
    case 'faq': page = <StaticPage kind="faq" navigate={navigate} />; break;
    default: page = <HomePage navigate={navigate} tweaks={t} />;
  }

  const content = (
    <div className="app" data-route={route.name} data-mobile={t.viewMode === 'mobile'}>
      {showHeaderFooter && <Header route={route} navigate={navigate} query={query} setQuery={setQuery} />}
      {page}
      {showHeaderFooter && <Footer navigate={navigate} />}
      {route.name !== 'checkout' && <WhatsappFab />}
      <CartRecovery navigate={navigate} route={route} />
    </div>
  );

  return (
    <CartContext.Provider value={cartStore}>
      {t.viewMode === 'mobile' ? (
        <div className="mobwrap">
          <div className="mobwrap__bg" />
          <div className="mobwrap__inner">
            <IOSDevice width={420} height={900} title="Central da Copa">
              <div className="mobile-app">{content}</div>
            </IOSDevice>
          </div>
        </div>
      ) : content}
      <TweaksUI t={t} setTweak={setTweak} navigate={navigate} cartStore={cartStore} />
    </CartContext.Provider>
  );
}

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