/* global React, ReactDOM */
const { useState } = React;

function CategoryPage({ config }) {
  const chrome = window.useSiteChrome();
  const { openCard, setOpenCard, menuOpen, setMenuOpen, searchOpen, setSearchOpen, legalPage, setLegalPage, t, loading, loadError, loadGames } = chrome;
  const [age, setAge] = useState("all");
  const [tema, setTema] = useState("all");
  const [q, setQ] = useState("");

  if (loading) {
    return <div className="app-loading">Cargando actividades…</div>;
  }
  if (loadError) {
    return (
      <div className="app-error">
        <p>No se pudo cargar el contenido. Inténtalo de nuevo.</p>
        <button onClick={loadGames}>Reintentar</button>
      </div>
    );
  }

  const TEMAS = config.temas || [
    { key: "all", label: "Todas" },
    { key: "creativas", label: "Creativas" },
    { key: "navidad", label: "Navidad" },
    { key: "halloween", label: "Halloween" },
    { key: "cumple", label: "Cumpleaños" },
  ];
  const defaultTema = config.defaultTema || "creativas";
  const norm = (s) => s.toLowerCase().normalize("NFD").replace(/[̀-ͯ]/g, "");
  const inPage = (c) => config.cats.includes(c.cat);
  const matches = (c) =>
    inPage(c) &&
    (age === "all" || c.ages.includes(age)) &&
    (tema === "all" || !config.hasTemas || (config.temaByCat ? c.cat === tema : (c.tema && c.tema.length ? c.tema.includes(tema) : defaultTema === tema))) &&
    (q.trim() === "" || norm(c.title).includes(norm(q)));
  const visible = window.CARDS.filter(matches);
  const AGES = window.AGES, CATS = window.CATS, I = window.I, Card = window.Card, AdSlot = window.AdSlot;
  const CatIcon = I[config.iconName];
  const navItem = (window.NAV_ITEMS || []).find(n => n.key === config.key) || {};
  const bgMap = { manualidades:"manualidades-clean", juegos:"juegos-clean", mesa:"mesa-clean", baraja:"baraja-clean", recetas:"recetas-clean", cuentos:"cuentos-clean" };
  const heroBg = bgMap[config.key];
  const totalInPage = window.CARDS.filter(inPage).length;

  return (
    <div>
      <window.SiteHeader active={config.key} q={q} setQ={setQ} searchOpen={searchOpen} setSearchOpen={setSearchOpen} menuOpen={menuOpen} setMenuOpen={setMenuOpen} />

      <section className="section" style={{ paddingTop: 36 }}>
        <div className="wrap">
          <div className={"cathero " + (navItem.soft || "")} style={heroBg ? { backgroundImage: `url(images/catcard-bg-${heroBg}.png)` } : null}>
            <div className="cathero__text">
              <h1>{config.title}</h1>
              <p>{config.subtitle}</p>
              <span className="cathero__count">{navItem.img && <img src={navItem.img} alt="" />}{totalInPage} ideas</span>
            </div>
            {navItem.img && <img className="cathero__icon" src={navItem.img} alt="" />}
          </div>
          <a className="desk-only" href="index.html" style={{ display:"inline-flex", alignItems:"center", gap:6, fontWeight:800, fontSize:14, color:"var(--ink)", opacity:.65, textDecoration:"none", marginBottom:16 }}>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" width="16" height="16"><path d="M19 12H5M11 6l-6 6 6 6"/></svg>
            Volver al inicio
          </a>
          <div className="section-header desk-only" style={{ marginBottom: 8 }}>
            <span className="section-header__tag" style={{ background: config.color }}>
              <CatIcon style={{ width:14, height:14 }} /> {config.title}
            </span>
            <span className="section-header__line"></span>
          </div>
          <div role="heading" aria-level={1} className="desk-only" style={{ margin: "6px 0 4px", fontSize: "clamp(28px,4vw,42px)", fontFamily: "var(--font-display)", fontWeight: 700, lineHeight: 1.05 }}>{config.title}</div>
          <p className="desk-only" style={{ margin: "0 0 24px", opacity: .75, maxWidth: 640, fontSize: 16 }}>{config.subtitle}</p>

          {config.hasTemas && (
            <div className="agechips" style={{ marginBottom: 20 }}>
              {TEMAS.map((tm) => (
                <button key={tm.key} className="agechip" data-c={tm.key} data-active={tema === tm.key} onClick={() => setTema(tm.key)}>
                  {tm.label}
                </button>
              ))}
            </div>
          )}

          <div className="agebox agebox--cat" style={{ marginBottom: 28 }}>
            <div className="agebox__q"><I.face /> ¿Qué edad tienen tus peques?</div>
            <div className="agebox__mlabel">Filtrar por edad</div>
            <div className="agechips">
              {AGES.map((a) => (
                <button key={a.key} className="agechip" data-c={a.key} data-active={age === a.key} onClick={() => setAge(a.key)}>
                  {a.label}<small>{a.sub}</small>
                </button>
              ))}
            </div>
          </div>

          <div className="sechead desk-only">
            <div>
              <h2>{visible.length} {visible.length === 1 ? "idea" : "ideas"}{q ? ` para "${q}"` : ""}</h2>
            </div>
          </div>

          <div className="cardgrid">
            {(() => {
              if (config.cats.length <= 1) {
                return visible.map(c => <Card key={c.id} c={c} hidden={false} afiliado={t.afiliado} onOpen={setOpenCard} onOpenRules={chrome.setOpenRules} />);
              }
              let lastCat = null;
              const items = [];
              window.CARDS.forEach((c) => {
                if (!matches(c)) return;
                if (c.cat !== lastCat) {
                  const info = CATS[c.cat];
                  items.push(
                    <div key={"sec-" + c.cat} className="section-header" style={{ gridColumn: "1/-1" }}>
                      <span className="section-header__tag" style={{ background: info.color }}><info.Icon style={{ width:14, height:14 }} /> {info.label}</span>
                      <span className="section-header__line"></span>
                    </div>
                  );
                  lastCat = c.cat;
                }
                items.push(<Card key={c.id} c={c} hidden={false} afiliado={t.afiliado} onOpen={setOpenCard} onOpenRules={chrome.setOpenRules} />);
              });
              return items;
            })()}
            {visible.length === 0 && <div className="emptyrow">No hay ideas para ese filtro… ¡prueba otra edad! 🎈</div>}
          </div>
          {visible.some((c) => c.isProduct) && (
            <p className="affnote"><b>Aviso:</b> como Afiliado de Amazon, esta web obtiene ingresos por las compras adscritas que cumplen los requisitos. Comprar desde estos enlaces no te cuesta nada extra.</p>
          )}
        </div>
      </section>

      <div className="wrap adband"><AdSlot kind="leaderboard" show={t.mostrarAnuncios} /></div>

      <window.SiteFooter onLegal={setLegalPage} />
      <window.MobileDrawer open={menuOpen} onClose={() => setMenuOpen(false)} />
      <window.SiteTweaksAndModals chrome={chrome} />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<CategoryPage config={window.PAGE_CONFIG} />);