const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "lobby",
  "palette": ["#0E3B3A", "#B8894A", "#F4ECDC"],
  "density": "balanced",
  "accentMode": "brass"
}/*EDITMODE-END*/;

const PALETTE_OPTIONS = [
  ["#0E3B3A", "#B8894A", "#F4ECDC"],   // Deira (default)
  ["#1F2D3D", "#C9A267", "#F2EDE3"],   // Slate + champagne
  ["#3C2A1E", "#D9A65C", "#F7EDD9"],   // Souk
  ["#0B2A2E", "#9CBCAD", "#EFE9DA"],   // Creek mist
];

function App() {
  const [page, setPage] = useState(window.__BYTESGLUE_SHOWCASE_ROUTE || 'home');
  const [bookOpen, setBookOpen] = useState(false);
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply palette tweaks live
  useEffect(() => {
    const [teal, brass, cream] = t.palette;
    const r = document.documentElement;
    r.style.setProperty('--teal', teal);
    r.style.setProperty('--brass', brass);
    r.style.setProperty('--cream', cream);
    // derive deep teal
    r.style.setProperty('--teal-deep', darken(teal, 0.35));
    r.style.setProperty('--cream-2', lighten(cream, 0.04));
    r.style.setProperty('--mist', darken(cream, 0.06));
  }, [t.palette]);

  const goto = (p) => { setPage(p); window.scrollTo({ top: 0, behavior: 'instant' }); };
  const openBook = () => setBookOpen(true);

  const pageEl = (() => {
    switch (page) {
      case 'rooms': return <RoomsPage onBook={openBook} />;
      case 'dining': return <DiningPage />;
      case 'facilities': return <FacilitiesPage />;
      case 'offers': return <OffersPage onBook={openBook} />;
      case 'location': return <LocationPage />;
      default: return <HomePage goto={goto} onBook={openBook} hero={t.hero} tone={t.accentMode} dense={t.density} />;
    }
  })();

  return (
    <div style={{ background: 'var(--cream-2)', minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
      <Nav page={page} setPage={goto} onBook={openBook} />
      <div style={{ flex: 1 }}>{pageEl}</div>
      <Footer setPage={goto} />
      <MobileBar onBook={openBook} />
      <BookingModal open={bookOpen} onClose={() => setBookOpen(false)} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Hero image">
          <TweakRadio
            value={t.hero}
            onChange={(v) => setTweak('hero', v)}
            options={[
              { value: 'lobby', label: 'Lobby' },
              { value: 'pool', label: 'Pool' },
              { value: 'room', label: 'Suite' },
            ]}
          />
        </TweakSection>

        <TweakSection title="Palette" subtitle="Teal · brass · cream">
          <TweakColor
            value={t.palette}
            onChange={(v) => setTweak('palette', v)}
            options={PALETTE_OPTIONS}
          />
        </TweakSection>

        <TweakSection title="Jump to page">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6 }}>
            {[
              ['home', 'Home'], ['rooms', 'Rooms'], ['dining', 'Dining'],
              ['facilities', 'Facilities'], ['offers', 'Offers'], ['location', 'Location'],
            ].map(([id, label]) => (
              <button key={id} onClick={() => goto(id)} style={{
                padding: '8px 10px', fontSize: 12, cursor: 'pointer',
                background: page === id ? 'var(--brass)' : 'transparent',
                color: page === id ? 'var(--teal-deep)' : 'var(--cream)',
                border: page === id ? '1px solid var(--brass)' : '1px solid var(--line-cream)',
                fontWeight: 500, borderRadius: 3, fontFamily: 'inherit',
              }}>{label}</button>
            ))}
          </div>
        </TweakSection>

        <TweakSection title="Booking modal">
          <TweakButton onClick={openBook}>Open booking engine</TweakButton>
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

/* tiny color helpers */
function clamp(v) { return Math.max(0, Math.min(255, v)); }
function hexToRgb(h) {
  const s = h.replace('#', '');
  const n = parseInt(s.length === 3 ? s.split('').map(c => c + c).join('') : s, 16);
  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
}
function rgbToHex([r, g, b]) {
  return '#' + [r, g, b].map(x => clamp(Math.round(x)).toString(16).padStart(2, '0')).join('');
}
function darken(hex, amt) {
  const [r, g, b] = hexToRgb(hex);
  return rgbToHex([r * (1 - amt), g * (1 - amt), b * (1 - amt)]);
}
function lighten(hex, amt) {
  const [r, g, b] = hexToRgb(hex);
  return rgbToHex([r + (255 - r) * amt, g + (255 - g) * amt, b + (255 - b) * amt]);
}

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