// Main app + router for KindleStartup Hub
const { useState: useStateApp, useEffect: useEffectApp } = React;

function useHashRoute() {
  const [route, setRoute] = useStateApp(() => window.location.hash.slice(1) || '/dashboard');
  useEffectApp(() => {
    const onHash = () => setRoute(window.location.hash.slice(1) || '/dashboard');
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);
  const nav = (to) => {
    if (to.startsWith('#')) to = to.slice(1);
    window.location.hash = to;
  };
  // expose for nav highlighting
  window.__route = route;
  return [route, nav];
}

// Tweaks: color + font pair
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "primary": "#8B6F47",
  "accent": "#D97757",
  "fontPair": "clean"
}/*EDITMODE-END*/;

function App() {
  const [route, nav] = useHashRoute();
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply tweaks to :root
  useEffectApp(() => {
    const root = document.documentElement;
    root.style.setProperty('--primary', tweaks.primary);
    root.style.setProperty('--accent', tweaks.accent);
    // soft accent derived
    root.style.setProperty('--accent-soft', tweaks.accent + '22');
    document.body.className = `font-pair-${tweaks.fontPair || 'clean'}`;
  }, [tweaks.primary, tweaks.accent, tweaks.fontPair]);

  // Route to component
  let view;
  const r = route;
  if (r === '/' || r === '') view = <Landing nav={nav} />;
  else if (r.startsWith('/login') || r.startsWith('/signup')) view = <Login nav={nav} route={r} />;
  else if (r.startsWith('/shop/')) view = <ProductDetail nav={nav} route={r} />;
  else if (r.startsWith('/shop')) view = <Shop nav={nav} route={r} />;
  else if (r.startsWith('/checkout/success')) view = <CheckoutSuccess nav={nav} />;
  else if (r.startsWith('/checkout')) view = <Checkout nav={nav} route={r} />;
  else if (r.startsWith('/admin/users')) view = <AdminUsers nav={nav} />;
  else if (r.startsWith('/admin/orders')) view = <AdminOrders nav={nav} />;
  else if (r.startsWith('/admin')) view = <AdminDashboard nav={nav} />;
  else if (r.startsWith('/my-products')) view = (<><UserTopBar nav={nav} /><MyProducts nav={nav} /></>);
  else if (r.startsWith('/my-orders')) view = (<><UserTopBar nav={nav} /><MyOrders nav={nav} /></>);
  else if (r.startsWith('/account')) view = (<><UserTopBar nav={nav} /><Account nav={nav} /></>);
  else if (r.startsWith('/dashboard')) view = (<><UserTopBar nav={nav} /><Dashboard nav={nav} /></>);
  else if (r.startsWith('/pricing') || r.startsWith('/about')) view = (
    <div><PublicTopBar nav={nav} /><div style={{ maxWidth: 800, margin: '0 auto', padding: '120px 28px', textAlign: 'center' }}>
      <h1 className="display" style={{ fontSize: 36, fontWeight: 600 }}>{r.includes('pricing') ? 'แพ็กเกจราคา' : 'เกี่ยวกับเรา'}</h1>
      <p style={{ color: 'var(--ink-2)' }}>หน้านี้กำลังจัดทำ — กลับสู่ <button onClick={() => nav('/')} style={{ background: 'transparent', border: 'none', textDecoration: 'underline', color: 'var(--ink)', cursor: 'pointer' }}>หน้าหลัก</button></p>
    </div></div>
  );
  else view = <Landing nav={nav} />;

  return (
    <ToastProvider>
      <div key={route} className="fade-up">{view}</div>
      <TweaksPanel title="Tweaks">
        <TweakSection title="สี">
          <TweakColor label="Primary" value={tweaks.primary} onChange={v => setTweak('primary', v)}
            presets={['#8B6F47', '#3E4A33', '#7A4A2D', '#4A3A5E', '#1F1F1F']} />
          <TweakColor label="Accent" value={tweaks.accent} onChange={v => setTweak('accent', v)}
            presets={['#D97757', '#E68B6B', '#C49447', '#6F8E5C', '#B5564A']} />
        </TweakSection>
        <TweakSection title="Typography">
          <TweakRadio label="Font pairing" value={tweaks.fontPair} onChange={v => setTweak('fontPair', v)}
            options={[
              { value: 'clean', label: 'Plex Thai' },
              { value: 'editorial', label: 'Serif' },
              { value: 'modern', label: 'Anuphan' },
            ]} />
        </TweakSection>
        <TweakSection title="Navigation">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
            {[
              ['/', 'Landing'], ['/login', 'Login'], ['/shop', 'Shop'],
              ['/shop/p1', 'Product'], ['/checkout', 'Checkout'], ['/checkout/success', 'Success'],
              ['/dashboard', 'Dashboard ⭐'], ['/my-products', 'My Products'],
              ['/my-orders', 'My Orders'], ['/account', 'Account'],
              ['/admin', 'Admin Home'], ['/admin/users', 'Admin Users'],
              ['/admin/orders', 'Admin Orders'],
            ].map(([p, l]) => (
              <button key={p} onClick={() => nav(p)} style={{
                padding: '6px 10px', borderRadius: 6, fontSize: 11.5,
                background: route === p ? 'var(--ink)' : 'var(--bg-2)',
                color: route === p ? 'var(--bg)' : 'var(--ink-2)',
                border: '1px solid var(--line)', cursor: 'pointer', textAlign: 'left',
              }}>{l}</button>
            ))}
          </div>
        </TweakSection>
      </TweaksPanel>
    </ToastProvider>
  );
}

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