/* global React, Heading, WAButton, WAIcon, waLink, CATEGORIES, SPECIMENS */
const { useState: useStateC } = React;

function StatusBadge({ status }) {
  const map = { "Disponible": "ok", "Reservado": "hold", "Vendido": "sold" };
  return <span className={"status-badge " + (map[status] || "ok")}>{status}</span>;
}

function SpecimenCard({ s, onSelect }) {
  const sold = s.status === "Vendido";
  return (
    <article className={"spec-card gold-frame corners" + (sold ? " is-sold" : "")}>
      <i className="tl" /><i className="tr" /><i className="bl" /><i className="br" />
      <button className="spec-media" onClick={() => onSelect(s)} aria-label={"Ver " + s.code}>
        <image-slot id={"spec-" + s.id} class="spec-slot" shape="rect" placeholder="Foto pendiente — consultar por WhatsApp"></image-slot>
        <StatusBadge status={s.status} />
      </button>
      <div className="spec-body">
        <div className="spec-row">
          <h3 className="spec-code gold-text">{s.code}</h3>
          <span className="spec-price">{s.price}<em> MXN</em></span>
        </div>
        <p className="spec-line">{s.line}</p>
        <div className="spec-meta">
          <span>{s.cat}</span><span className="dot-sep" /><span>{s.age}</span>
        </div>
        <div className="spec-actions">
          <button className="btn-ghost spec-detail" onClick={() => onSelect(s)}>Ver detalles</button>
          <a className="btn-gold spec-wa" href={waLink("Hola, me interesa el ejemplar " + s.code + " (" + s.line + "). ¿Sigue disponible?")} target="_blank" rel="noopener noreferrer" aria-label="Preguntar por WhatsApp">
            <WAIcon size={15} />
          </a>
        </div>
      </div>
    </article>
  );
}

function Specimens({ onSelect }) {
  const [filter, setFilter] = useStateC("Todos");
  const list = filter === "Todos" ? SPECIMENS : SPECIMENS.filter((s) => s.cat === filter);
  return (
    <section className="section-pad wood" id="ejemplares">
      <div className="wrap">
        <Heading kicker="Catálogo" title="Ejemplares disponibles" />
        <p className="sec-intro reveal">
          Cada ejemplar disponible en Rancho La Vega pasa por observación, cuidado y selección.
          Nuestro objetivo es ofrecer gallos con presencia, salud, carácter y respaldo de crianza.
        </p>

        <div className="filter-bar reveal">
          {CATEGORIES.map((c) => (
            <button key={c} className={"filter-chip" + (filter === c ? " on" : "")} onClick={() => setFilter(c)}>{c}</button>
          ))}
        </div>

        <div className="spec-grid reveal">
          {list.map((s) => <SpecimenCard key={s.id} s={s} onSelect={onSelect} />)}
        </div>

        <div className="reveal center-cta">
          <WAButton msg="Hola, quiero consultar los ejemplares disponibles en Rancho La Vega.">Consultar disponibilidad por WhatsApp</WAButton>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Specimens, StatusBadge });