/* global React, CATALOGO, CAT_LABELS, detectarPatron, Placeholder, Eyebrow, Arr, HeartIcon, Reveal, useWishlist, useUI, waLink, CatProd */
const { useState, useMemo, useEffect } = React;

function Ficha({ productId, setPage, openFicha, openModelo, goCatalog }) {
  const wl = useWishlist();
  const pid = (productId || "").toString().toUpperCase();
  const p = CATALOGO.find((x) => (x.id || "").toUpperCase() === pid);
  const [img, setImg] = useState(0);
  const tones = ["bone", "dark", "verde", "terra"];

  useEffect(() => { window.scrollTo({ top: 0, behavior: "instant" }); setImg(0); }, [productId]);

  if (!p) {
    return (
      <section className="ficha">
        <div className="crumb">Producto no encontrado</div>
        <h1>—</h1>
        <button className="btn line" onClick={goCatalog}>← Volver al catálogo</button>
      </section>
    );
  }

  const patron = detectarPatron(p.variante);
  const isOn = wl.has(p.id);
  const others = CATALOGO.filter((x) => x.nombre === p.nombre && x.id !== p.id).slice(0, 4);
  const sameFamily = CATALOGO.filter((x) => x.categoria === p.categoria && x.id !== p.id).slice(0, 4);
  const msg = `Hola DAVA'S, me interesa "${p.nombre}${p.variante ? " — " + p.variante : ""}" (${p.id}) por $${p.precio.toLocaleString("es-CO")}. ¿Confirman disponibilidad?`;
  const shareUrl = `artedavas.com/producto/${p.id.toLowerCase()}`;

  return (
    <>
      <section className="ficha">
        <div className="crumb">
          <a onClick={goCatalog} style={{ cursor: "pointer" }}>Catálogo</a>
          {"  ·  "}
          <a onClick={goCatalog} style={{ cursor: "pointer" }}>{CAT_LABELS[p.categoria]}</a>
          {"  ·  "}
          {others.length ? <a onClick={() => openModelo(p.nombre)} style={{ cursor: "pointer", textDecoration: "underline" }}>{p.nombre}</a> : <span>{p.nombre}</span>}
        </div>

        <div className="layout">
          <div className="gallery">
            <div className="main">
              <Placeholder ratio="auto" tone={tones[img]} label={`/${p.foto || "assets/productos/PLACEHOLDER.jpg"}`} corner={`${p.id} · vista ${img + 1}`} ring="◯ FOTO" fill />
            </div>
            <div className="thumbs">
              {tones.map((t, i) => (
                <button key={i} className={`t ${i === img ? "is-on" : ""}`} onClick={() => setImg(i)} aria-label={`Vista ${i + 1}`}>
                  <Placeholder ratio="auto" tone={t} label="" corner={`v${i + 1}`} fill />
                </button>
              ))}
            </div>
          </div>

          <div className="info">
            <div className="meta">
              <span>{p.id}</span>
              <span>· {CAT_LABELS[p.categoria]}</span>
              {patron ? <span>· {patron}</span> : null}
            </div>
            <h1>{p.nombre}</h1>
            {p.variante ? <div className="variante">{p.variante}</div> : null}

            <div className="price-row">
              <div className="price">$ {p.precio.toLocaleString("es-CO")}</div>
              <div className="lead-t">Producción a pedido · ~15 días</div>
            </div>

            <div className="specs">
              <div><div className="k">Material tejido</div><div className="v">{p.material || "—"}</div></div>
              <div><div className="k">Patrón</div><div className="v">{patron || "—"}</div></div>
              <div><div className="k">Familia</div><div className="v">{CAT_LABELS[p.categoria]}</div></div>
              <div><div className="k">Código</div><div className="v">{p.id}</div></div>
            </div>

            <p className="desc">
              Tu pieza se empieza a tejer cuando tú la pides. Pieza tejida a mano sobre estructura
              de madera curada — cada combinación de modelo y patrón es un SKU único, no se configura
              en la web: se elige y se confirma por WhatsApp.
            </p>

            <div className="actions">
              <a className="btn wa lg" href={waLink(msg)} target="_blank" rel="noopener">
                Pedir por WhatsApp <Arr />
              </a>
              <button className="btn line" onClick={() => wl.toggle({ id: p.id, name: p.nombre, family: CAT_LABELS[p.categoria], pattern: patron, price: p.precio.toLocaleString("es-CO") })}>
                <HeartIcon filled={isOn} size={13} stroke={isOn ? "var(--accent)" : "currentColor"} />
                {isOn ? "Guardada en mis piezas" : "Guardar en mis piezas"}
              </button>
            </div>

            <div className="url">
              URL compartible: <a>{shareUrl}</a>
            </div>
          </div>
        </div>
      </section>

      {others.length > 0 ? (
        <Reveal as="section" className="ficha-versions">
          <div className="head">
            <div>
              <Eyebrow>Otras versiones del modelo</Eyebrow>
              <h2 style={{ marginTop: 10 }}>
                Más <em>{p.nombre}</em>.
              </h2>
            </div>
            <p>Mismo nombre, distinto dibujo. Toca cualquiera para ver su ficha, o entra al modelo completo.</p>
          </div>
          <div className="cat-grid">
            {others.map((o) => (
              <CatProd key={o.id} p={o} onOpen={openFicha} />
            ))}
          </div>
          <div style={{ marginTop: 28, display: "flex", justifyContent: "center" }}>
            <button className="btn line" onClick={() => openModelo(p.nombre)}>
              Ver las {CATALOGO.filter((x) => x.nombre === p.nombre).length} versiones del modelo {p.nombre} <Arr />
            </button>
          </div>
        </Reveal>
      ) : (
        <Reveal as="section" className="ficha-versions">
          <div className="head">
            <div>
              <Eyebrow>También en {CAT_LABELS[p.categoria]}</Eyebrow>
              <h2 style={{ marginTop: 10 }}>Otras piezas <em>de la familia</em>.</h2>
            </div>
            <p>Piezas distintas dentro de la misma categoría.</p>
          </div>
          <div className="cat-grid">
            {sameFamily.map((o) => (
              <CatProd key={o.id} p={o} onOpen={openFicha} />
            ))}
          </div>
        </Reveal>
      )}
    </>
  );
}

window.Ficha = Ficha;