/* ============================================================
   APP — estado global, carta, scrollspy, backend de tienda, montaje
   ============================================================ */
const { CATS: APP_CATS, FEATURE: APP_FEATURE, RICE: APP_RICE, DRINKS: APP_DRINKS, HOURS: APP_HOURS } = window;

function scrollToId(id, offset = 110) {
  const el = document.getElementById(id);
  if (!el) return;
  const y = el.getBoundingClientRect().top + window.scrollY - offset;
  window.scrollTo({ top: Math.max(0, y), behavior: "smooth" });
}

function TopBar({ onOrder, scrolled, isOpen, onPdf }) {
  return (
    <div className={"topbar " + (scrolled ? "solid" : "")}>
      <a className="tb-brand" href="#top" onClick={(e) => { e.preventDefault(); scrollToId("top", 0); }}>
        <span className="tb-mark"><Icon d={I.anchor} size={17} /></span> Dos Océanos
      </a>
      <div className="tb-right">
        <span className={"tb-state " + (isOpen ? "open" : "closed")}><i></i>{isOpen ? "Abierto" : "Cerrado"}</span>
        <button className="tb-pdf" onClick={onPdf}><Icon d={I.cal} size={15} /> Menú Digital</button>
        <button className="tb-cta" onClick={onOrder}>Haz tu pedido</button>
      </div>
    </div>
  );
}

/* ---- Plato estrella destacado ---- */
function FeatureBlock({ onOpen, store }) {
  const f = APP_FEATURE;
  const cat = APP_CATS.find(c => c.id === f.catId);
  const av = itemAvailable(store, f.n);
  return (
    <div className={"feature " + (av ? "" : "is-off")}>
      <div className="feature-media">
        <image-slot id="do-feature" class="feature-slot photo-dark" shape="rect" fit="cover"
          placeholder={"Foto · " + f.n}></image-slot>
        {!av && <span className="soldout">Agotado</span>}
      </div>
      <div className="feature-text">
        <span className="flag">{f.tag}</span>
        <h3>{f.n}</h3>
        <p>{f.d}</p>
        <div className="feature-foot">
          <button className="btn-primary big pulse-cta" disabled={!av} onClick={() => onOpen(f, cat)}>
            {av ? <>Personalizar <Icon d={I.plus} size={18} /></> : "Agotado"}</button>
        </div>
      </div>
    </div>
  );
}

function App() {
  const [cart, setCart] = useState(() => {
    try {
      const raw = JSON.parse(localStorage.getItem("do_cart") || "[]");
      // migra líneas guardadas antes de agregar tamaños/precio por rango,
      // reconstruyendo from/to/weights desde la carta actual por nombre de plato.
      return raw.map(l => {
        const match = (l.name === APP_FEATURE.n)
          ? APP_FEATURE
          : APP_CATS.reduce((found, c) => found || c.items.find(it => it.n === l.name), null);
        return {
          ...l,
          from: l.from != null ? l.from : (match ? match.from : (l.ranged ? l.unitPrice - (l.drinkExtra || 0) : undefined)),
          to: l.to != null ? l.to : (match ? match.to : undefined),
          weights: l.weights != null ? l.weights : (match ? (match.weights || null) : null),
          drinkExtra: l.drinkExtra != null ? l.drinkExtra : 0,
          size: l.size != null ? l.size : null,
        };
      });
    } catch (e) { return []; }
  });
  const [store, setStore] = useState(loadStore);
  const [modal, setModal] = useState(null);          // {item, cat}
  const [drawer, setDrawer] = useState(false);
  const [admin, setAdmin] = useState(false);
  const [pdf, setPdf] = useState(false);
  const [active, setActive] = useState(APP_CATS[0].id);
  const [scrolled, setScrolled] = useState(false);
  const special = useMemo(() => getActiveSpecial("auto"), []);
  const promo = useMemo(() => getWeeklyPromo(), []);
  const isOpen = isStoreOpen(store);

  useEffect(() => { localStorage.setItem("do_cart", JSON.stringify(cart)); }, [cart]);
  useEffect(() => { localStorage.setItem("do_store", JSON.stringify(store)); }, [store]);

  // abre el panel admin con #admin en la URL
  useEffect(() => {
    if (location.hash === "#admin") setAdmin(true);
  }, []);

  // scrolled state for topbar
  useEffect(() => {
    const onS = () => setScrolled(window.scrollY > 80);
    window.addEventListener("scroll", onS, { passive: true });
    return () => window.removeEventListener("scroll", onS);
  }, []);

  // scrollspy
  useEffect(() => {
    const obs = new IntersectionObserver((es) => {
      es.forEach(e => { if (e.isIntersecting) setActive(e.target.id); });
    }, { rootMargin: "-45% 0px -50% 0px" });
    APP_CATS.forEach(c => { const el = document.getElementById(c.id); if (el) obs.observe(el); });
    return () => obs.disconnect();
  }, []);

  const openModal = (item, cat) => setModal({ item, cat });
  const addToCart = (line) => setCart(c => [...c, line]);
  const order = () => { if (cart.length) setDrawer(true); else scrollToId("menu"); };
  const openItem = (name) => { const f = findItem(name); if (f) openModal(f.item, f.cat); };

  // agregado rápido (cross-sell) con opciones por defecto
  const quickAdd = (item, cat) => {
    const inc = item.includes || cat.includes || {};
    addToCart({
      uid: "L" + Date.now() + Math.random().toString(36).slice(2, 6),
      name: item.n, catName: cat.name,
      unitPrice: item.from, ranged: !!(item.to && item.to !== item.from), from: item.from, to: item.to, drinkExtra: 0,
      weights: item.weights || null, size: null,
      qty: 1, rice: inc.rice ? APP_RICE[0].label : null,
      drink: inc.drink ? APP_DRINKS[0].label : null, notes: "",
    });
  };

  const onPromoCta = (p) => { if (p.itemName) openItem(p.itemName); else scrollToId(p.catId || "menu"); };

  // "Quiero probarlo": agrega automáticamente los platos de la experiencia
  // (el plato estrella + las sugerencias del chef) y abre el carrito.
  const tryExperience = () => {
    const picks = [];
    const fcat = APP_CATS.find(c => c.id === APP_FEATURE.catId);
    if (itemAvailable(store, APP_FEATURE.n)) picks.push({ item: APP_FEATURE, cat: fcat });
    APP_CATS.forEach(c => c.items.forEach(it => {
      if (it.suggested && itemAvailable(store, it.n)) picks.push({ item: it, cat: c });
    }));
    const inCart = new Set(cart.map(l => l.name));
    const toAdd = picks.filter(p => !inCart.has(p.item.n));
    toAdd.forEach(({ item, cat }) => quickAdd(item, cat));
    setDrawer(true);
  };

  return (
    <>
      <TopBar onOrder={order} scrolled={scrolled} isOpen={isOpen} onPdf={() => setPdf(true)} />
      <Hero onOrder={() => scrollToId("menu")} onScrollTo={scrollToId} onOpenItem={openItem} onPdf={() => setPdf(true)} isOpen={isOpen} />

      {promo && <WeeklyPromo promo={promo} onCta={onPromoCta} />}
      <SpecialBanner special={special} onCta={() => scrollToId((special && special.target) || "menu")} />
      <SuggestedBanner onOpen={openModal} store={store} />

      <div className="catnav-wrap">
        <CategoryNav cats={APP_CATS} active={active} onJump={(id) => scrollToId(id, 112)} />
      </div>

      <main className="menu" id="menu">
        {APP_CATS.map((c, i) => (
          <section className="cat" id={c.id} key={c.id} data-screen-label={c.name}>
            <div className="cat-head">
              <div>
                <span className={"cat-kicker c-" + (c.c || "coral")}>{c.kicker}</span>
                <h2 className="cat-title">{c.name}</h2>
              </div>
              <image-slot id={"do-cat-" + c.id} class="cat-photo do-slot" shape="rounded" radius="14"
                fit="cover" placeholder={"Foto · " + c.name}></image-slot>
            </div>
            {c.note && <p className="cat-note">{c.note}</p>}
            <div className="grid">
              {c.items.map((it, k) => <MenuCard key={k} it={it} cat={c} onOpen={openModal} store={store} />)}
            </div>
            {c.id === "marineros" && <FeatureBlock onOpen={openModal} store={store} />}
          </section>
        ))}
      </main>

      <Experience onOrder={tryExperience} />
      <Reservas />
      <InfoSection store={store} />
      <QRSection />
      <Footer onAdmin={() => setAdmin(true)} />

      <FloatingCart cart={cart} onOpen={() => setDrawer(true)} />
      <CartDrawer open={drawer} cart={cart} setCart={setCart} onClose={() => setDrawer(false)}
        onScrollTo={scrollToId} isOpen={isOpen} store={store} />

      {modal && <ProductModal item={modal.item} cat={modal.cat} store={store}
        onAdd={addToCart} onQuickAdd={quickAdd} onClose={() => setModal(null)} />}
      {pdf && <PdfModal onClose={() => setPdf(false)} />}
      {admin && <AdminPanel store={store} setStore={setStore} onClose={() => setAdmin(false)} />}
    </>
  );
}

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