const { Navbar, MobileMenu, Footer, Toast, SearchOverlay, TextInput, DatePicker, TravellerSelector, Tag } = window.VE;

const LINKS = [
  { label: 'Destinations', href: '#destinations' },
  { label: 'Packages', href: '#packages' },
  { label: 'Experiences', href: '#experiences' },
  { label: 'About us', href: '#about' }
];

function App() {
  const [screen, setScreen] = React.useState('home');
  const [destination, setDestination] = React.useState(null);
  const [pkg, setPkg] = React.useState(null);
  const [menu, setMenu] = React.useState(false);
  const [overlay, setOverlay] = React.useState(false);
  const [toast, setToast] = React.useState(null);
  const [isMobile, setIsMobile] = React.useState(false);
  const [search, setSearch] = React.useState({ destination: '', dates: '', travellers: '', activeField: null });
  const [party, setParty] = React.useState({ adults: 2, children: 0, rooms: 1 });
  const [dates, setDates] = React.useState({ start: null, end: null });

  React.useEffect(() => {
    const onResize = () => setIsMobile(window.innerWidth < 744);
    onResize();
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);

  React.useEffect(() => { window.scrollTo(0, 0); }, [screen, destination, pkg]);

  const showToast = (message) => {
    setToast(message);
    window.setTimeout(() => setToast(null), 4000);
  };

  const open = (next, payload) => {
    if (next === 'destination') setDestination(payload);
    if (next === 'package') setPkg(payload);
    setScreen(next === 'destination' ? 'destination' : next === 'package' ? 'package' : next);
  };

  const navLinks = LINKS.map((l) => ({
    label: l.label,
    href: l.href,
    active: (screen === 'listing' && l.label === 'Destinations') || (screen === 'package' && l.label === 'Packages')
  }));

  const onNavClick = (e) => {
    const label = e.target.textContent;
    if (label === 'Destinations' || label === 'Packages' || label === 'Experiences') {
      e.preventDefault();
      setScreen('listing');
    }
  };

  return (
    <div onClick={(e) => { if (e.target.classList && e.target.classList.contains('ve-navlink')) onNavClick(e); }}>
      <Navbar links={navLinks} onOpenMenu={() => setMenu(true)} onPlanTrip={() => setScreen('plan')}
        center={screen !== 'home' && !isMobile ? null : undefined} />

      {screen === 'home' ? (
        <HomeScreen onOpen={open} onPlanTrip={() => setScreen('plan')} search={search} onSearchChange={setSearch}
          onSearchSubmit={() => (isMobile ? setOverlay(true) : setScreen('listing'))} isMobile={isMobile} />
      ) : null}
      {screen === 'listing' ? (
        <DestinationListingScreen onOpen={open} search={search} onSearchChange={setSearch}
          onSearchSubmit={() => (isMobile ? setOverlay(true) : showToast('Showing 8 destinations'))} isMobile={isMobile} />
      ) : null}
      {screen === 'destination' ? <DestinationDetailScreen destination={destination} onOpen={open} onPlanTrip={() => setScreen('plan')} /> : null}
      {screen === 'package' ? <PackageDetailScreen pkg={pkg} onPlanTrip={() => setScreen('plan')} onToast={showToast} /> : null}
      {screen === 'plan' ? <PlanMyTripScreen onToast={showToast} /> : null}

      <Footer />

      <MobileMenu open={menu} onClose={() => setMenu(false)}
        links={LINKS.map((l) => ({ label: l.label, href: l.href }))} onPlanTrip={() => { setMenu(false); setScreen('plan'); }} />

      <SearchOverlay open={overlay} onClose={() => setOverlay(false)} title="Plan your trip"
        onSubmit={() => { setOverlay(false); setScreen('listing'); }}
        onClear={() => { setSearch({ destination: '', dates: '', travellers: '', activeField: null }); setDates({ start: null, end: null }); }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-xl)' }}>
          <TextInput label="Where to?" icon="MapPin" placeholder="Bali, Maldives, or somewhere quiet"
            value={search.destination} onChange={(e) => setSearch({ ...search, destination: e.target.value })} />
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--space-sm)' }}>
            {['Beach', 'Mountains', 'Honeymoon', 'Family'].map((s) => <Tag key={s}>{s}</Tag>)}
          </div>
          <DatePicker label="When?" value={dates} onChange={setDates} minDate={new Date()} />
          <TravellerSelector value={party} onChange={setParty} />
        </div>
      </SearchOverlay>

      {toast ? (
        <div style={{ position: 'fixed', left: 24, bottom: 24, zIndex: 120 }}>
          <Toast tone="success" title={toast} onClose={() => setToast(null)} />
        </div>
      ) : null}
    </div>
  );
}
Object.assign(window, { App });