/* mk-home.jsx — Home del marketplace: banner + categorías + "más pedidos" +
   grid de restaurantes con datos reales de Supabase. */
const { useState: mkhState, useMemo: mkhMemo, useEffect: mkhEffect } = React;

/* portada de la card: foto real o placeholder con iniciales (Avatar) */
function MkCover({ rest, style }) {
  if (rest.foto_portada_url) {
    return <img loading="lazy" src={rest.foto_portada_url} alt={rest.nombre} style={style} />;
  }
  return <Avatar name={rest.nombre} shape="tile" watermark />;
}

function MkLogo({ rest }) {
  if (rest.logo_url) return <img loading="lazy" src={rest.logo_url} alt={rest.nombre} />;
  return <Avatar name={rest.nombre} />;
}

function MkHome({ q, onOpenRestaurant }) {
  const [datos, setDatos] = mkhState(null); /* null = cargando */
  const [cat, setCat] = mkhState("Todos");

  mkhEffect(() => {
    let on = true;
    mkCargarRestaurantes().then((d) => { if (on) setDatos(d); });
    return () => { on = false; };
  }, []);

  const lista = datos ? datos.lista : [];

  /* categorías reales: las categorias_cocina de los restaurantes activos */
  const cats = mkhMemo(() => {
    const set = new Set();
    lista.forEach((r) => (r.categorias_cocina || []).forEach((c) => set.add(c)));
    return ["Todos", ...[...set].sort((a, b) => a.localeCompare(b, "es"))];
  }, [lista]);

  const filtrados = mkhMemo(() => {
    const term = (q || "").trim().toLowerCase();
    return lista.filter((r) => {
      const matchCat = cat === "Todos" || (r.categorias_cocina || []).includes(cat);
      const matchQ = !term || (r.nombre || "").toLowerCase().includes(term);
      return matchCat && matchQ;
    });
  }, [lista, cat, q]);

  return (
    <div className="mk-main">
      <div className="mk-wrap">

        <div className="mk-banner mk-banner-editorial">
          <div className="mk-banner-inner">
            <div className="mk-h-eyebrow">Treego marketplace</div>
            <h2>Pide directo a tus restaurantes favoritos de Cajicá</h2>
            <p>Explora menús, fotos y promos de negocios inscritos — con la misma puntualidad Treego en cada entrega.</p>
            <button className="mk-btn mk-btn-primary"
              onClick={() => { const el = document.getElementById("mk-grid-top"); if (el) el.scrollIntoView({ behavior: "smooth" }); }}>
              Ver restaurantes <Icon name="arrow" />
            </button>
          </div>
          <div className="mk-banner-art">
            {lista[0] ? <MkCover rest={lista[0]} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
              : <Placeholder label="foto — plato destacado" style={{ height: "100%" }} />}
          </div>
        </div>

        {cats.length > 1 && (
          <div className="mk-cats">
            {cats.map((c) => (
              <button key={c} className={"mk-chip" + (cat === c ? " on" : "")} onClick={() => setCat(c)}>{c}</button>
            ))}
          </div>
        )}

        {datos && datos.masPedidos.length > 0 && (
          <React.Fragment>
            <div className="mk-toprow-title">Los más pedidos</div>
            <div className="mk-logostrip">
              {datos.masPedidos.map((r) => (
                <div className="mk-logoitem" key={r.slug} onClick={() => onOpenRestaurant(r.slug)} style={{ cursor: "pointer" }}>
                  <div className="circ"><MkLogo rest={r} /></div>
                  <span>{r.nombre}</span>
                </div>
              ))}
            </div>
          </React.Fragment>
        )}

        <div className="mk-section-title" id="mk-grid-top">
          <h3>{datos ? `Restaurantes en Cajicá (${filtrados.length})` : "Cargando restaurantes…"}</h3>
        </div>

        {!datos && (
          <div className="mk-grid">
            {[1, 2, 3].map((i) => <div key={i} className="mk-skel" style={{ height: 240 }} />)}
          </div>
        )}

        {datos && (
          <div className="mk-grid">
            {filtrados.map((r) => (
              <div className="mk-card" key={r.slug} onClick={() => onOpenRestaurant(r.slug)}>
                <div className="mk-card-img">
                  <MkCover rest={r} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
                  {!r.estado.abierto && <span className="mk-card-closed">Cerrado ahora</span>}
                </div>
                <div className="mk-card-body">
                  <div className="mk-card-name">{r.nombre}</div>
                  <div className="mk-card-cat">{(r.categorias_cocina || []).join(" · ") || "Restaurante"}</div>
                  <div className="mk-card-meta">
                    {r.tiempo_entrega_estimado != null && (
                      <span><Icon name="clock" /> {r.tiempo_entrega_estimado} min</span>
                    )}
                    <span><MkIcon name="bike" /> desde {mkCOP(TreegoTarifa.MICRO)}</span>
                    {r.pedido_minimo > 0 && <span>Mín. {mkCOP(r.pedido_minimo)}</span>}
                  </div>
                </div>
              </div>
            ))}
            {filtrados.length === 0 && (
              <div className="mk-muted" style={{ gridColumn: "1 / -1", padding: "30px 0" }}>
                {lista.length === 0
                  ? "Aún no hay restaurantes inscritos en el marketplace. ¡Vuelve pronto!"
                  : "No hay restaurantes para esta búsqueda o categoría."}
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { MkHome, MkCover, MkLogo });