/* global React, ReactDOM, HomePage, TourPage, BookingFlow, Arrow */
const { useState: aState, useEffect: aEffect } = React;

const BOOKING_URL = 'https://forms.gle/35t2M3EjQAVScFRG8';
function openBooking() { window.open(BOOKING_URL, '_blank', 'noopener'); }

// ── Hash router ──────────────────────────────────────────────────────────────
function parseHash() {
  const h = window.location.hash.replace(/^#\/?/, '') || 'home';
  const parts = h.split('/');
  const page = parts[0] || 'home';
  const tourId = parts[1] || null;
  const roomId = parts[2] || null;
  return { page, tourId, roomId };
}

function pushHash(page, tourId, roomId) {
  if (page === 'home' && !tourId && !roomId) {
    history.pushState(null, '', window.location.pathname);
    return;
  }
  let h = '#/' + page;
  if (tourId) h += '/' + tourId;
  if (roomId) h += '/' + roomId;
  window.location.hash = h;
}

function ThemeToggle({ theme, onToggle }) {
  const isLight = theme === 'light';
  return (
    <button
      onClick={onToggle}
      title={isLight ? 'Темна тема' : 'Світла тема'}
      style={{
        width: 44, height: 26,
        borderRadius: 999,
        background: isLight ? 'rgba(10,10,13,0.10)' : 'rgba(255,255,255,0.10)',
        border: '1px solid var(--line-strong)',
        position: 'relative',
        cursor: 'pointer',
        transition: 'background .35s var(--ease), border-color .35s var(--ease)',
        flexShrink: 0,
        display: 'flex',
        alignItems: 'center',
        padding: '0 3px',
      }}
    >
      {/* track icons */}
      <span style={{
        position: 'absolute', left: 5, top: '50%', transform: 'translateY(-50%)',
        fontSize: 11, opacity: isLight ? 0.35 : 0.9, transition: 'opacity .3s',
        pointerEvents: 'none', lineHeight: 1,
      }}>🌙</span>
      <span style={{
        position: 'absolute', right: 5, top: '50%', transform: 'translateY(-50%)',
        fontSize: 11, opacity: isLight ? 0.9 : 0.35, transition: 'opacity .3s',
        pointerEvents: 'none', lineHeight: 1,
      }}>☀️</span>
      {/* thumb */}
      <span style={{
        width: 18, height: 18,
        borderRadius: 999,
        background: isLight ? '#0a0a0d' : '#ffffff',
        boxShadow: '0 2px 8px rgba(0,0,0,.25)',
        display: 'block',
        transform: isLight ? 'translateX(18px)' : 'translateX(0px)',
        transition: 'transform .35s var(--ease), background .35s var(--ease)',
        flexShrink: 0,
      }} />
    </button>
  );
}

function Nav({ route, onNav, theme, onThemeToggle }) {
  const [menuOpen, setMenuOpen] = aState(false);
  const [scrolled, setScrolled] = aState(false);

  aEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const closeMenu = () => setMenuOpen(false);
  const handleNav = (page, id, rid) => { closeMenu(); onNav(page, id, rid); };
  const scrollTo = (id) => {
    closeMenu();
    onNav('home');
    setTimeout(() => {
      const el = document.getElementById(id);
      if (el) window.scrollTo({ top: el.offsetTop - 80, behavior: 'smooth' });
    }, 50);
  };

  return (
    <>
      <div className={`nav${scrolled ? ' nav-scrolled' : ''}`}>
        <div className="nav-inner">
          <button className="nav-logo" onClick={() => handleNav('home')} style={{ background: 'none', border: 0, padding: '0 14px 0 0' }}>
            <span className="logo-mark">PV</span>
            <span className="nav-logo-text" style={{ marginLeft: 10 }}>POSITIVE VIBES</span>
          </button>
          <div className="nav-links">
            <button className={`nav-link ${route.page === 'home' ? 'active' : ''}`} onClick={() => handleNav('home')}>Головна</button>
            <button className="nav-link" onClick={() => scrollTo('tours')}>Тури</button>
            <button className={`nav-link ${route.page === 'tour' ? 'active' : ''}`} onClick={() => handleNav('tour', 'karpaty-august')}>Карпати'26</button>
            <button className="nav-link" onClick={() => scrollTo('contact')}>Контакт</button>
          </div>
          <div className="nav-right">
            <ThemeToggle theme={theme} onToggle={onThemeToggle} />
            <button className="btn btn-primary nav-cta" style={{ padding: '12px 18px', fontSize: 13 }} onClick={openBooking}>
              Забронювати <span className="arrow"><Arrow size={11} /></span>
            </button>
            <button
              className="nav-hamburger"
              onClick={() => setMenuOpen(o => !o)}
              aria-label="Меню"
            >
              <span style={{ transform: menuOpen ? 'translateY(7px) rotate(45deg)' : 'none' }} />
              <span style={{ opacity: menuOpen ? 0 : 1 }} />
              <span style={{ transform: menuOpen ? 'translateY(-7px) rotate(-45deg)' : 'none' }} />
            </button>
          </div>
        </div>
      </div>

      {/* Mobile full-screen menu */}
      <div className={`mobile-menu${menuOpen ? ' open' : ''}`}>
        <button className="mobile-menu-link" onClick={() => handleNav('home')}>Головна</button>
        <button className="mobile-menu-link" onClick={() => scrollTo('tours')}>Тури</button>
        <button className="mobile-menu-link" onClick={() => handleNav('tour', 'karpaty-august')}>Карпати'26</button>
        <button className="mobile-menu-link" onClick={() => scrollTo('contact')}>Контакт</button>
        <div className="mobile-menu-bottom">
          <button
            className="btn btn-primary"
            style={{ justifyContent: 'center', fontSize: 15, padding: '16px 24px' }}
            onClick={openBooking}
          >
            Забронювати <span className="arrow"><Arrow /></span>
          </button>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 8 }}>
            <ThemeToggle theme={theme} onToggle={onThemeToggle} />
            <span className="mono" style={{ fontSize: 10, color: 'var(--fg-3)', letterSpacing: '0.1em' }}>POSITIVE VIBES ONLY</span>
          </div>
          <div className="mobile-menu-social">
            <a href="#">@positivevibes.tours</a>
            <a href="#">@dj_chyryk</a>
            <a href="#">@djlittlevx</a>
          </div>
        </div>
      </div>
    </>
  );
}

function ScrollToTop() {
  const [visible, setVisible] = aState(false);
  aEffect(() => {
    const onScroll = () => setVisible(window.scrollY > 400);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <button
      className={`scroll-top-btn${visible ? ' visible' : ''}`}
      onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
      aria-label="Нагору"
    >
      <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
        <path d="M9 13.5V4.5M9 4.5L4.5 9M9 4.5L13.5 9" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    </button>
  );
}

function App() {
  const [route, setRoute] = aState(parseHash);
  const [dataVer, setDataVer] = aState(0);

  // Fetch live tour data from API and trigger re-render when it arrives
  aEffect(() => {
    fetch('/api/tours')
      .then(r => r.ok ? r.json() : Promise.reject())
      .then(data => {
        if (data.tours)        window.TOURS        = data.tours;
        if (data.rooms)        window.ROOMS        = data.rooms;
        if (data.days)         window.DAYS         = data.days;
        if (data.gallery)      window._GALLERY     = data.gallery;
        if (data.included)     window.INCLUDED     = data.included;
        if (data.bring)        window.BRING        = data.bring;
        if (data.faq)          window.FAQ          = data.faq;
        if (data.testimonials) window.TESTIMONIALS = data.testimonials;
        setDataVer(v => v + 1);
      })
      .catch(() => {});
  }, []);

  // Listen to browser back/forward (hashchange + popstate for clean home URL)
  aEffect(() => {
    const onNav = () => {
      const r = parseHash();
      setRoute(r);
      window.scrollTo({ top: 0, behavior: 'instant' });
    };
    window.addEventListener('hashchange', onNav);
    window.addEventListener('popstate', onNav);
    return () => {
      window.removeEventListener('hashchange', onNav);
      window.removeEventListener('popstate', onNav);
    };
  }, []);

  const onNav = (page, tourId, roomId) => {
    pushHash(page, tourId, roomId);
    setRoute({ page, tourId, roomId });
    window.scrollTo({ top: 0, behavior: 'instant' });
  };

  // Tweaks panel — always declare state hooks at top level
  const [_theme, _setTheme] = aState(() => localStorage.getItem('pv-theme') || 'light');
  const [_accent, _setAccent] = aState('violet');
  const [tweaks, setTweaks] = window.useTweaks ? window.useTweaks(/*EDITMODE-BEGIN*/{
    "theme": "light",
    "accent": "violet"
  }/*EDITMODE-END*/) : [
    { theme: _theme, accent: _accent },
    (key, val) => { if (key === 'theme') _setTheme(val); if (key === 'accent') _setAccent(val); }
  ];

  const currentTheme = tweaks.theme || 'light';

  const onThemeToggle = () => {
    const next = currentTheme === 'dark' ? 'light' : 'dark';
    setTweaks('theme', next);
  };

  aEffect(() => {
    document.documentElement.setAttribute('data-theme', currentTheme);
    localStorage.setItem('pv-theme', currentTheme);
  }, [currentTheme]);

  aEffect(() => {
    const accentMap = {
      violet: { v: 'oklch(62% 0.22 285)', s: 'oklch(72% 0.18 285)', d: 'oklch(48% 0.22 285)', g: 'oklch(62% 0.22 285 / .45)' },
      cyan:   { v: 'oklch(72% 0.16 200)', s: 'oklch(80% 0.13 200)', d: 'oklch(58% 0.18 200)', g: 'oklch(72% 0.16 200 / .45)' },
      amber:  { v: 'oklch(75% 0.18 60)',  s: 'oklch(82% 0.15 60)',  d: 'oklch(60% 0.18 60)',  g: 'oklch(75% 0.18 60 / .45)' },
    };
    const a = accentMap[tweaks.accent] || accentMap.violet;
    document.documentElement.style.setProperty('--violet', a.v);
    document.documentElement.style.setProperty('--violet-soft', a.s);
    document.documentElement.style.setProperty('--violet-deep', a.d);
    document.documentElement.style.setProperty('--violet-glow', a.g);
  }, [tweaks.accent]);

  return (
    <>
      <Nav route={route} onNav={onNav} theme={currentTheme} onThemeToggle={onThemeToggle} />
      {route.page === 'home' && <HomePage key={dataVer} onNav={onNav} />}
      {route.page === 'tour' && <TourPage key={dataVer} tourId={route.tourId} onNav={onNav} />}
      {route.page === 'booking' && <BookingFlow key={dataVer} tourId={route.tourId} roomId={route.roomId} onNav={onNav} />}
      <ScrollToTop />

      {window.TweaksPanel && (
        <window.TweaksPanel title="Tweaks" subtitle="Тема та акцент">
          {window.TweakRadio && <window.TweakRadio
            label="Тема"
            value={tweaks.theme}
            onChange={(v) => setTweaks('theme', v)}
            options={[{ value: 'dark', label: 'Темна' }, { value: 'light', label: 'Світла' }]}
          />}
          {window.TweakRadio && <window.TweakRadio
            label="Акцент"
            value={tweaks.accent}
            onChange={(v) => setTweaks('accent', v)}
            options={[
              { value: 'violet', label: 'Фіолет' },
              { value: 'cyan', label: 'Циан' },
              { value: 'amber', label: 'Амбер' },
            ]}
          />}
        </window.TweaksPanel>
      )}
    </>
  );
}

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