/* ============================================================
   lomi — chrome: Nav, Footer, Mascota flotante
   (data-driven desde window.LOMI_DATA.settings)
   ============================================================ */

// Helpers para leer settings con fallback
function _S(key, fallback) {
  const s = (window.LOMI_DATA && window.LOMI_DATA.settings) || {};
  return s[key] != null && s[key] !== '' ? s[key] : fallback;
}
function _J(key, fallback) {
  try {
    const v = _S(key, null);
    if (v === null) return fallback;
    if (typeof v === 'object') return v;
    return JSON.parse(v);
  } catch { return fallback; }
}
function _V(key) {
  const v = _S(key, '1');
  return v === '1' || v === 1 || v === true;
}

/* ---------- barra de anuncio ---------- */
function TopBar({ _v }) {
  const active = _V('announcement_active');
  if (!active) return null;

  const items = _J('topbar_items', [
    { icon: "truck",   text: "Despacho gratis sobre $30.000" },
{ icon: "shield",  text: "Pago seguro · Devolución fácil" },
  ]);
  const bg = _S('topbar_bg', '');

  return (
    <div className="topbar" style={bg ? { background: bg } : {}}>
      <div className="topbar-track">
        {[...items, ...items].map((it, i) => (
          <span className="topbar-item" key={i}><Icon name={it.icon} size={15} /> {it.text}</span>
        ))}
      </div>
    </div>
  );
}

/* ---------- navegación ---------- */
function Nav({ route, go, cartCount, onSearch, query, _v, favorites, clientUser }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  const cats = window.LOMI_DATA.CATEGORIES;
  const navSticky = _V('nav_sticky');
  useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 24);
    fn(); window.addEventListener("scroll", fn);
    return () => window.removeEventListener("scroll", fn);
  }, []);
  useEffect(() => { setOpen(false); }, [route]);

  return (
    <>
      <TopBar _v={_v} />
      <header
        className={"nav " + (scrolled ? "is-scrolled" : "")}
        style={navSticky === false || navSticky === '0' ? { position:'relative' } : undefined}
      >
        <div className="wrap nav-inner">
          <Logo onClick={() => go({ name: "home" })} />

          <nav className="nav-links">
            {cats.map((c) => (
              <button key={c.id} className="nav-link" onClick={() => go({ name: "catalog", category: c.id })}>{c.name}</button>
            ))}
          </nav>

          <div className="nav-search">
            <Icon name="search" size={18} />
            <input
              placeholder="Busca croquetas, juguetes, marcas…"
              value={query || ""}
              onChange={(e) => onSearch(e.target.value)}
              onKeyDown={(e) => { if (e.key === "Enter") go({ name: "catalog", q: e.target.value }); }}
            />
          </div>

          <div className="nav-actions">
            <button className="nav-icon hide-md" aria-label="Favoritos" onClick={() => go({ name: "favorites" })} style={{ position:'relative' }}>
              <Icon name="heart" />
              {favorites && favorites.length > 0 && <span className="cart-count">{favorites.length}</span>}
            </button>
            <button className="nav-icon hide-md" aria-label="Cuenta" onClick={() => go({ name: "account" })}>
              {clientUser
                ? <span className="nav-user-av">{clientUser.name[0].toUpperCase()}</span>
                : <Icon name="user" />
              }
            </button>
            <button className="nav-icon nav-cart" aria-label="Carro" onClick={() => go({ name: "cart" })}>
              <Icon name="cart" />
              {cartCount > 0 && <span className="cart-count">{cartCount}</span>}
            </button>
            <button className="nav-icon show-md" aria-label="Menú" onClick={() => setOpen(true)}><Icon name="menu" /></button>
          </div>
        </div>
      </header>

      {/* drawer móvil */}
      <div className={"drawer " + (open ? "is-open" : "")}>
        <div className="drawer-head">
          <Logo onClick={() => go({ name: "home" })} />
          <button className="nav-icon" onClick={() => setOpen(false)}><Icon name="close" /></button>
        </div>
        <div className="drawer-search">
          <Icon name="search" size={18} />
          <input placeholder="Buscar productos…" value={query || ""} onChange={(e) => onSearch(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") go({ name: "catalog", q: e.target.value }); }} />
        </div>
        <nav className="drawer-links">
          {cats.map((c) => (
            <button key={c.id} className="drawer-link" onClick={() => go({ name: "catalog", category: c.id })}>
              <span className="drawer-link-ic" style={{ background: c.tint, color: c.accent }}><Icon name={c.icon} size={20} /></span>
              {c.name}<span className="drawer-arrow"><Icon name="arrow" size={18} /></span>
            </button>
          ))}
        </nav>
        <div className="drawer-actions">
          <button className="drawer-action-btn" onClick={() => go({ name: "favorites" })}>
            <Icon name="heart" size={20} />
            <span>Favoritos</span>
            {favorites && favorites.length > 0 && <span className="drawer-badge">{favorites.length}</span>}
          </button>
          <button className="drawer-action-btn" onClick={() => go({ name: "account" })}>
            {clientUser
              ? <span className="nav-user-av">{clientUser.name[0].toUpperCase()}</span>
              : <Icon name="user" size={20} />
            }
            <span>{clientUser ? clientUser.name.split(' ')[0] : 'Mi cuenta'}</span>
          </button>
          <button className="drawer-action-btn" onClick={() => go({ name: "cart" })}>
            <Icon name="cart" size={20} />
            <span>Carro</span>
            {cartCount > 0 && <span className="drawer-badge">{cartCount}</span>}
          </button>
        </div>
      </div>
      <div className={"drawer-scrim " + (open ? "is-open" : "")} onClick={() => setOpen(false)} />
    </>
  );
}

/* ---------- footer ---------- */
function Footer({ go, _v }) {
  const [newsEmail, setNewsEmail] = useState('');
  const [newsDone, setNewsDone]   = useState(false);

  const tagline   = _S('footer_tagline', 'Todo para tu regalón, en la puerta de tu casa. Comida, juguetes y cariño con despacho rápido en todo Chile.');
  const copyright = _S('footer_copyright', '© 2026 lomi · Hecho con cariño en Chile 🐾');

  const col1Title = _S('footer_col1_title', 'Tienda');
  const col1Links = _J('footer_col1_links', ['Alimento', 'Juguetes', 'Accesorios', 'Higiene', 'Snacks']);
  const col2Title = _S('footer_col2_title', 'lomi');
  const col2Links = _J('footer_col2_links', ['Sobre nosotros', 'Sucursales', 'Suscripción', 'Blog & cuidados']);
  const col3Title = _S('footer_col3_title', 'Ayuda');
  const col3Links = _J('footer_col3_links', ['Despachos', 'Devoluciones', 'Vet en línea', 'Contacto']);
  const newsTitle = _S('footer_newsletter_title', 'Únete a la manada');
  const newsText  = _S('footer_newsletter_text', '15% off en tu primera compra y tips para tu mascota.');
  const instagram = _S('social_instagram', '');
  const facebook  = _S('social_facebook', '');
  const whatsapp  = _S('social_whatsapp', '');

  const CATEGORIES = (window.LOMI_DATA && window.LOMI_DATA.CATEGORIES) || [];

  function renderLinks(links) {
    return links.map((link, i) => {
      if (typeof link === 'string') {
        if (link.startsWith('http')) return <a key={i} href={link} target="_blank" rel="noopener noreferrer">{link}</a>;
        const cat = CATEGORIES.find(c => c.name.toLowerCase() === link.toLowerCase());
        if (cat) return <button key={i} onClick={() => go({ name: 'catalog', category: cat.id })}>{link}</button>;
        return <button key={i}>{link}</button>;
      }
      // Objeto con { text, url }
      const url = link.url || '#';
      const txt = link.text || '';
      if (url.startsWith('http')) return <a key={i} href={url} target="_blank" rel="noopener noreferrer">{txt}</a>;
      return <button key={i} onClick={() => url !== '#' && (window.location.href = url)}>{txt}</button>;
    });
  }

  function handleNews(e) {
    e.preventDefault();
    if (/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(newsEmail.trim())) setNewsDone(true);
  }

  return (
    <footer className="footer">
      <div className="footer-main">
        <div className="wrap">
          <div className="footer-top">
            <div className="footer-brand">
              <Logo light onClick={() => go({ name: "home" })} />
              <p>{tagline}</p>
              <div className="footer-social">
                {instagram && <a href={instagram} target="_blank" rel="noopener noreferrer" className="footer-soc"><Icon name="spark" size={18} /></a>}
                {facebook  && <a href={facebook}  target="_blank" rel="noopener noreferrer" className="footer-soc"><Icon name="paw"   size={18} /></a>}
                {whatsapp  && <a href={'https://wa.me/' + whatsapp} target="_blank" rel="noopener noreferrer" className="footer-soc"><Icon name="heart" size={18} /></a>}
                {!instagram && !facebook && !whatsapp && (
                  ["spark","paw","heart","bolt"].map((n, i) => <span key={i} className="footer-soc"><Icon name={n} size={18} /></span>)
                )}
              </div>
            </div>
            <div className="footer-cols">
              <div><h4>{col1Title}</h4>{renderLinks(col1Links)}</div>
              <div><h4>{col2Title}</h4>{renderLinks(col2Links)}</div>
              <div><h4>{col3Title}</h4>{renderLinks(col3Links)}</div>
            </div>
          </div>
          <div className="footer-bottom">
            <span>{copyright}</span>
            <div className="footer-pay"><span>Webpay</span><span>Mastercard</span><span>Visa</span><span>Mercado Pago</span></div>
          </div>
        </div>
      </div>
    </footer>
  );
}

/* ---------- mascota flotante ---------- */
const DEFAULT_MASCOT_LINES = {
  home:     "¡Hola! Soy Loni 🐶 ¿Buscas algo para tu regalón?",
  catalog:  "Usa los filtros para encontrar justo lo que necesitas.",
  product:  "¿Te gusta? ¡Agrégalo al carro y llega mañana! 🛒",
  cart:     "¿Listo para el despacho? Yo cuido tu carro.",
  checkout: "¡Casi listo! Tu pedido llega volando.",
};
function MascotWidget({ route }) {
  const visible = _V('mascot_visible');
  if (!visible) return null;

  const messages = _J('mascot_messages', DEFAULT_MASCOT_LINES);
  const [open, setOpen] = useState(true);
  const [has3D, setHas3D] = useState(false);
  const ctrlRef = useRef(null);
  const line = messages[route.name] || messages.home || DEFAULT_MASCOT_LINES.home;

  useEffect(() => {
    // Espera a que Three.js/LOMI3D estén listos (puede cargar async)
    let tries = 0;
    const interval = setInterval(() => {
      if (window.LOMI3D) { setHas3D(true); clearInterval(interval); }
      if (++tries > 20) clearInterval(interval);
    }, 200);
    return () => clearInterval(interval);
  }, []);

  useEffect(() => { if (ctrlRef.current && ctrlRef.current.excite) ctrlRef.current.excite(); }, [route.name]);

  return (
    <div className="mascot">
      {open && (
        <div className="mascot-bubble pop-in">
          <button className="mascot-close" onClick={() => setOpen(false)}><Icon name="close" size={14} /></button>
          <p>{line}</p>
        </div>
      )}
      <button className="mascot-orb" onClick={() => { setOpen((o) => !o); if (ctrlRef.current) ctrlRef.current.excite(); }} aria-label="Ayuda">
        {has3D
          ? <ThreeCanvas factory={(c) => window.LOMI3D.mascot(c)} onReady={(c) => (ctrlRef.current = c)} className="mascot-canvas" />
          : <span className="mascot-fallback">🐶</span>
        }
      </button>
    </div>
  );
}

Object.assign(window, { TopBar, Nav, Footer, MascotWidget });