// Pantalla Listado — Auto Paniagua
function ListingScreen({ go, initial }) {
  const D = window.AP_DATA;
  const all = D.VEHICLES;
  const [q, setQ] = useState("");
  const [marcas, setMarcas] = useState(initial?.marca ? [initial.marca] : []);
  const [tipos, setTipos] = useState(initial?.tipo ? [initial.tipo] : []);
  const [combs, setCombs] = useState([]);
  const [cond, setCond] = useState("");
  const [maxPrecio, setMaxPrecio] = useState(initial?.maxPrecio || 60000);
  const [sort, setSort] = useState("relevancia");
  const [openFilters, setOpenFilters] = useState(false);
  const [soloFavs, setSoloFavs] = useState(initial?.favs || false);
  const [favsVer, setFavsVer] = useState(0);
  useEffect(() => { setSoloFavs(!!initial?.favs); }, [initial]);
  useEffect(() => {
    const onChanged = () => {
      setFavsVer((v) => v + 1);
      if (getFavs().length === 0) setSoloFavs(false);
    };
    window.addEventListener("ap-favs-changed", onChanged);
    return () => window.removeEventListener("ap-favs-changed", onChanged);
  }, []);

  const allMarcas = [...new Set(all.map((v) => v.marca))].sort();
  const allTipos = [...new Set(all.map((v) => v.tipo))];
  const allCombs = [...new Set(all.map((v) => v.combustible))];

  const toggle = (arr, set, val) =>
    set(arr.includes(val) ? arr.filter((x) => x !== val) : [...arr, val]);

  let results = all.filter((v) => {
    if (soloFavs && !getFavs().includes(v.id)) return false;
    if (q && !`${v.marca} ${v.modelo} ${v.anio}`.toLowerCase().includes(q.toLowerCase())) return false;
    if (marcas.length && !marcas.includes(v.marca)) return false;
    if (tipos.length && !tipos.includes(v.tipo)) return false;
    if (combs.length && !combs.includes(v.combustible)) return false;
    if (cond && v.condicion !== cond) return false;
    if (v.precio > maxPrecio) return false;
    return true;
  });
  if (sort === "precio-asc") results = [...results].sort((a, b) => a.precio - b.precio);
  if (sort === "precio-desc") results = [...results].sort((a, b) => b.precio - a.precio);
  if (sort === "anio-desc") results = [...results].sort((a, b) => b.anio - a.anio);
  if (sort === "km-asc") results = [...results].sort((a, b) => a.km - b.km);

  const activeCount = marcas.length + tipos.length + combs.length + (cond ? 1 : 0) + (maxPrecio < 60000 ? 1 : 0) + (soloFavs ? 1 : 0);
  const clearAll = () => { setMarcas([]); setTipos([]); setCombs([]); setCond(""); setMaxPrecio(60000); setQ(""); setSoloFavs(false); };

  const FilterPanel = () => (
    <div className="ap-filters">
      <div className="ap-filters-head">
        <h3>Filtros {activeCount ? <span className="ap-filters-badge">{activeCount}</span> : null}</h3>
        {activeCount ? <button className="ap-filters-clear" onClick={clearAll}>Limpiar</button> : null}
      </div>

      {getFavs().length > 0 && (
        <div className="ap-filter-group">
          <label className="ap-filter-label">Mis favoritos</label>
          <button className={`ap-favs-toggle ${soloFavs ? "is-on" : ""}`} onClick={() => setSoloFavs((v) => !v)}>
            {Icons.heart({ size: 15 })}
            {soloFavs ? `Mostrando ${getFavs().length} favorito${getFavs().length !== 1 ? "s" : ""}` : `Ver mis ${getFavs().length} favorito${getFavs().length !== 1 ? "s" : ""}`}
          </button>
        </div>
      )}

      <div className="ap-filter-group">
        <label className="ap-filter-label">Condición</label>
        <div className="ap-segment">
          {["", "nuevo", "usado"].map((c) => (
            <button key={c || "all"} className={`ap-seg ${cond === c ? "is-on" : ""}`} onClick={() => setCond(c)}>
              {c ? c.charAt(0).toUpperCase() + c.slice(1) : "Todos"}
            </button>
          ))}
        </div>
      </div>

      <div className="ap-filter-group">
        <label className="ap-filter-label">Precio máximo · {fmtUSD(maxPrecio)}</label>
        <input className="ap-range" type="range" min="13000" max="60000" step="1000"
          value={maxPrecio} onChange={(e) => setMaxPrecio(+e.target.value)} />
        <div className="ap-range-scale"><span>US$ 13k</span><span>US$ 60k</span></div>
      </div>

      <div className="ap-filter-group">
        <label className="ap-filter-label">Marca</label>
        <div className="ap-checks">
          {allMarcas.map((m) => (
            <label key={m} className={`ap-check ${marcas.includes(m) ? "is-on" : ""}`}>
              <input type="checkbox" checked={marcas.includes(m)} onChange={() => toggle(marcas, setMarcas, m)} />
              <span className="ap-check-box">{marcas.includes(m) ? Icons.check({ size: 13 }) : null}</span>
              <span className="ap-check-text">{m}</span>
              <span className="ap-check-count">{all.filter((v) => v.marca === m).length}</span>
            </label>
          ))}
        </div>
      </div>

      <div className="ap-filter-group">
        <label className="ap-filter-label">Tipo</label>
        <div className="ap-chips">
          {allTipos.map((t) => (
            <button key={t} className={`ap-chip ${tipos.includes(t) ? "is-on" : ""}`} onClick={() => toggle(tipos, setTipos, t)}>
              {t}
            </button>
          ))}
        </div>
      </div>

      <div className="ap-filter-group">
        <label className="ap-filter-label">Combustible</label>
        <div className="ap-chips">
          {allCombs.map((c) => (
            <button key={c} className={`ap-chip ${combs.includes(c) ? "is-on" : ""}`} onClick={() => toggle(combs, setCombs, c)}>
              {c}
            </button>
          ))}
        </div>
      </div>
    </div>
  );

  return (
    <div className="ap-page">
      <div className="ap-listing-hero">
        <div className="ap-wrap">
          <button className="ap-back" onClick={() => go("home")}>{Icons.arrowLeft({ size: 16 })} Inicio</button>
          <h1 className="ap-listing-title">Nuestro inventario</h1>
          <p className="ap-listing-sub">{all.length} vehículos disponibles · nuevos y semi-nuevos certificados</p>
        </div>
      </div>

      <div className="ap-wrap ap-listing-layout">
        <aside className="ap-listing-aside ap-hide-md">
          <FilterPanel />
        </aside>

        <div className="ap-listing-main">
          <div className="ap-listing-bar">
            <div className="ap-search-input">
              {Icons.search({ size: 18 })}
              <input placeholder="Buscar marca o modelo…" value={q} onChange={(e) => setQ(e.target.value)} />
            </div>
            <button className="ap-filter-toggle ap-show-md" onClick={() => setOpenFilters(true)}>
              {Icons.sliders({ size: 17 })} Filtros {activeCount ? `(${activeCount})` : ""}
            </button>
            <SearchSelect className="ap-sort" value={sort} onChange={setSort}
              options={[
                { value: "relevancia", label: "Relevancia" },
                { value: "precio-asc", label: "Precio: menor a mayor" },
                { value: "precio-desc", label: "Precio: mayor a menor" },
                { value: "anio-desc", label: "Año: más reciente" },
                { value: "km-asc", label: "Menor kilometraje" },
              ]} />
          </div>

          <div className="ap-listing-count">
            <strong>{results.length}</strong> {results.length === 1 ? "resultado" : "resultados"}
            {activeCount ? <button className="ap-clear-inline" onClick={clearAll}>Limpiar filtros</button> : null}
          </div>

          {results.length ? (
            <div className="ap-grid-cards ap-grid-listing">
              {results.map((v) => <CarCard key={v.id} v={v} onOpen={(x) => go("detail", x)} />)}
            </div>
          ) : (
            <div className="ap-empty">
              <span className="ap-empty-ico">{Icons.search({ size: 32 })}</span>
              <h3>Sin resultados</h3>
              <p>No encontramos vehículos con esos filtros. Prueba ampliando tu búsqueda.</p>
              <Btn variant="outline" size="md" onClick={clearAll}>Limpiar filtros</Btn>
            </div>
          )}
        </div>
      </div>

      {openFilters ? (
        <div className="ap-drawer" onClick={() => setOpenFilters(false)}>
          <div className="ap-drawer-panel" onClick={(e) => e.stopPropagation()}>
            <div className="ap-drawer-top">
              <h3>Filtros</h3>
              <button className="ap-icon-btn" onClick={() => setOpenFilters(false)}>{Icons.close({ size: 22 })}</button>
            </div>
            <div className="ap-drawer-body"><FilterPanel /></div>
            <div className="ap-drawer-foot">
              <Btn variant="primary" size="lg" onClick={() => setOpenFilters(false)}>
                Ver {results.length} resultados
              </Btn>
            </div>
          </div>
        </div>
      ) : null}
    </div>
  );
}

window.ListingScreen = ListingScreen;