/* App root — view router, tweaks, language, enquiry modal state */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "marina",
  "type": "serif-inter",
  "lang": "en",
  "density": "default",
  "fab": "panel",
  "heroLayout": "marquee"
}/*EDITMODE-END*/;

const App = () => {
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  const [view, setView] = React.useState({ name: 'home' });
  const [enquiry, setEnquiry] = React.useState({ open: false, category: null, message: '' });

  // Sync html attributes for palette/type/density/lang/dir
  React.useEffect(() => {
    const html = document.documentElement;
    if (tweaks.palette && tweaks.palette !== 'marina') html.setAttribute('data-palette', tweaks.palette);
    else html.removeAttribute('data-palette');
    if (tweaks.type && tweaks.type !== 'serif-inter') html.setAttribute('data-type', tweaks.type);
    else html.removeAttribute('data-type');
    if (tweaks.density && tweaks.density !== 'default') html.setAttribute('data-density', tweaks.density);
    else html.removeAttribute('data-density');
    html.lang = tweaks.lang || 'en';
    html.dir = tweaks.lang === 'ar' ? 'rtl' : 'ltr';
  }, [tweaks.palette, tweaks.type, tweaks.density, tweaks.lang]);

  // Scroll to top on view change
  React.useEffect(() => { window.scrollTo({ top: 0, behavior: 'instant' }); }, [view.name, view.id]);

  const openEnquiry = (cat, msg) => {
    // cat can be a category object, a string id, or null
    let category = null;
    if (cat && typeof cat === 'object' && cat.id) category = cat;
    else if (typeof cat === 'string') category = window.BENO.categories.find(c => c.id === cat) || null;
    setEnquiry({ open: true, category, message: typeof cat === 'string' && !category ? cat : (msg || '') });
  };

  const navHandlers = {
    onNav: v => setView(v),
    onCategory: id => setView({ name: 'category', id }),
    onExperience: id => setView({ name: 'experience', id }),
    onEnquire: (cat, msg) => openEnquiry(cat, msg),
  };

  const dark = view.name === 'home' || view.name === 'rentals' || view.name === 'experiences' || view.name === 'category' || view.name === 'experience' || view.name === 'about';
  // Nav is dark when first thing after it is dark — home/category/about have dark heroes
  const navDark = ['home', 'rentals', 'category', 'experiences', 'experience', 'about'].includes(view.name);

  return (
    <div className="app" data-screen-label={view.name}>
      <Nav
        view={view}
        onNav={navHandlers.onNav}
        lang={tweaks.lang || 'en'}
        setLang={l => setTweak('lang', l)}
        onEnquire={() => openEnquiry()}
        dark={navDark}
      />

      {view.name === 'home' && (
        <>
          <HeroMarquee lang={tweaks.lang} layout={tweaks.heroLayout} onCategory={navHandlers.onCategory} onEnquire={() => openEnquiry()}/>
          <CategoryGrid lang={tweaks.lang} onCategory={navHandlers.onCategory}/>
          <ExperienceList lang={tweaks.lang} onExperience={navHandlers.onExperience}/>
          <ConciergeBand lang={tweaks.lang} onEnquire={openEnquiry}/>
          <TrustStrip lang={tweaks.lang}/>
          <AppBanner lang={tweaks.lang}/>
        </>
      )}
      {view.name === 'rentals' && (
        <RentalsHub lang={tweaks.lang} onCategory={navHandlers.onCategory} onEnquire={openEnquiry}/>
      )}
      {view.name === 'category' && (
        <CategoryView catId={view.id} lang={tweaks.lang} onCategory={navHandlers.onCategory} onEnquire={openEnquiry} onNav={navHandlers.onNav}/>
      )}
      {view.name === 'experiences' && (
        <ExperienceHub lang={tweaks.lang} onNav={navHandlers.onNav} onEnquire={openEnquiry}/>
      )}
      {view.name === 'experience' && (
        <ExperienceView expId={view.id} lang={tweaks.lang} onEnquire={openEnquiry} onNav={navHandlers.onNav}/>
      )}
      {view.name === 'about' && (
        <AboutView lang={tweaks.lang} onEnquire={openEnquiry} onNav={navHandlers.onNav}/>
      )}
      {view.name === 'contact' && (
        <ContactView lang={tweaks.lang} onEnquire={openEnquiry}/>
      )}

      <Footer lang={tweaks.lang} onCategory={navHandlers.onCategory} onNav={navHandlers.onNav}/>

      <FAB style={tweaks.fab} lang={tweaks.lang} onEnquire={openEnquiry}/>

      <EnquiryModal
        open={enquiry.open}
        onClose={() => setEnquiry({ open: false, category: null, message: '' })}
        lang={tweaks.lang}
        seedCategory={enquiry.category}
        seedMessage={enquiry.message}
      />

      {/* Tweaks panel — host shows it when toggle is on */}
      <window.TweaksPanel title="Tweaks">
        <window.TweakSection label="Palette"/>
        <window.TweakRadio
          label="Theme"
          value={tweaks.palette}
          onChange={v => setTweak('palette', v)}
          options={[
            { value: 'marina', label: 'Marina' },
            { value: 'noir-gold', label: 'Noir+Gold' },
            { value: 'paper-teal', label: 'Paper' },
          ]}
        />

        <window.TweakSection label="Typography"/>
        <window.TweakSelect
          label="Pairing"
          value={tweaks.type}
          onChange={v => setTweak('type', v)}
          options={[
            { value: 'serif-inter',   label: 'Cormorant + Inter' },
            { value: 'serif-grotesk', label: 'Fraunces + Inter' },
            { value: 'didone',        label: 'Playfair + Inter' },
          ]}
        />

        <window.TweakSection label="Locale"/>
        <window.TweakRadio
          label="Language"
          value={tweaks.lang}
          onChange={v => setTweak('lang', v)}
          options={[
            { value: 'en', label: 'EN' },
            { value: 'ar', label: 'AR (RTL)' },
          ]}
        />

        <window.TweakSection label="Layout"/>
        <window.TweakRadio
          label="Density"
          value={tweaks.density}
          onChange={v => setTweak('density', v)}
          options={[
            { value: 'compact', label: 'Compact' },
            { value: 'default', label: 'Cinema' },
            { value: 'airy',    label: 'Editorial' },
          ]}
        />

        <window.TweakSection label="Concierge"/>
        <window.TweakSelect
          label="FAB style"
          value={tweaks.fab}
          onChange={v => setTweak('fab', v)}
          options={[
            { value: 'button', label: 'WhatsApp button' },
            { value: 'dock',   label: 'Bottom dock' },
            { value: 'panel',  label: 'Chat panel' },
          ]}
        />

        <window.TweakSection label="Jump to"/>
        <div style={{ display: 'grid', gap: 6, padding: '0 4px' }}>
          {[
            { v: { name: 'home' },                              label: 'Home' },
            { v: { name: 'rentals' },                           label: 'Rentals hub' },
            { v: { name: 'category', id: 'yachts' },            label: 'Category · Yachts' },
            { v: { name: 'category', id: 'cars' },              label: 'Category · Cars' },
            { v: { name: 'experiences' },                       label: 'Experiences hub' },
            { v: { name: 'experience', id: 'sunset-proposal' }, label: 'Experience · Proposal' },
            { v: { name: 'about' },                             label: 'About' },
            { v: { name: 'contact' },                           label: 'Contact' },
          ].map(item => (
            <button key={item.label} onClick={() => setView(item.v)} style={{
              background: 'rgba(0,0,0,.06)', border: 0, padding: '7px 10px', borderRadius: 6,
              textAlign: 'start', fontSize: 12, cursor: 'pointer', fontFamily: 'inherit',
            }}>{item.label}</button>
          ))}
          <button onClick={() => openEnquiry()} style={{
            background: '#00586F', color: '#fff', border: 0, padding: '7px 10px', borderRadius: 6,
            textAlign: 'start', fontSize: 12, cursor: 'pointer', marginTop: 4, fontFamily: 'inherit',
          }}>Open enquiry flow →</button>
        </div>
      </window.TweaksPanel>
    </div>
  );
};

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