// Pantalla Detalle — Auto Paniagua
function DetailScreen({ go, vehicle }) {
  const D = window.AP_DATA;
  const v = vehicle || D.VEHICLES[0];
  const [thumb, setThumb] = useState(0);
  const galleryRef = useRef(null);
  const [faved, setFaved] = useState(() => getFavs().includes(v.id));

  const goThumb = (i) => {
    setThumb(i);
    if (galleryRef.current) {
      galleryRef.current.scrollIntoView({ behavior: "smooth", block: "start" });
    }
  };
  const toggleFav = () => {
    const favs = getFavs();
    const next = faved ? favs.filter((id) => id !== v.id) : [...favs, v.id];
    try { localStorage.setItem("ap-favs-v3", JSON.stringify(next)); } catch {}
    setFaved(!faved);
    window.dispatchEvent(new CustomEvent("ap-favs-changed"));
  };
  // una sola foto real -> simulamos galería con encuadres distintos
  const imgs = (v.imagenes && v.imagenes.length) ? v.imagenes : [v.img].filter(Boolean);
  const [inicial, setInicial] = useState(20);
  const meses = 60,tasa = 13.5;
  const fin = v.precio * (1 - inicial / 100);
  const r = tasa / 100 / 12;
  const cuota = fin * r / (1 - Math.pow(1 + r, -meses));

  const similares = D.VEHICLES.filter((x) => x.id !== v.id && (x.tipo === v.tipo || x.marca === v.marca)).slice(0, 4);

  const specs = [
  { icon: Icons.calendar({ size: 18 }), label: "Año", val: v.anio },
  { icon: Icons.gauge({ size: 18 }), label: "Kilometraje", val: fmtKm(v.km) },
  { icon: Icons.engine({ size: 18 }), label: "Motor", val: v.motor },
  { icon: Icons.fuel({ size: 18 }), label: "Combustible", val: v.combustible },
  { icon: Icons.gear({ size: 18 }), label: "Transmisión", val: v.transmision },
  { icon: Icons.bolt({ size: 18 }), label: "Tracción", val: v.traccion },
  { icon: Icons.tag({ size: 18 }), label: "Tipo", val: v.tipo },
  { icon: Icons.shield({ size: 18 }), label: "Condición", val: v.condicion }];


  const EQUIP_DEFAULT = [
  "Aire acondicionado climatizado", "Cámara de retroceso", "Sensores de parqueo",
  "Pantalla táctil Apple CarPlay / Android Auto", "Asientos de cuero", "Llaves inteligentes",
  "Control crucero", "Bluetooth y USB", "Rines de aleación"];
  // Equipamiento del vehículo; si no se ha definido en el admin, usa el listado por defecto.
  const equipamiento = (v.equipamiento && v.equipamiento.length) ? v.equipamiento : EQUIP_DEFAULT;


  return (
    <div className="ap-page ap-detail">
      <div className="ap-listing-hero ap-detail-hero">
        <div className="ap-wrap">
          <div className="ap-breadcrumb">
            <button onClick={() => go("home")}>Inicio</button>
            {Icons.chevronRight({ size: 14 })}
            <button onClick={() => go("listing")}>Vehículos</button>
            {Icons.chevronRight({ size: 14 })}
            <span>{v.marca} {v.modelo}</span>
          </div>
          <p className="ap-overline ap-overline-light">{v.marca} · {v.anio} · {v.condicion}</p>
          <h1 className="ap-listing-title">{v.modelo}</h1>
          <div className="ap-detail-hero-specs">
            <span>{Icons.gauge({ size: 16 })} {fmtKm(v.km)}</span>
            <span>{Icons.engine({ size: 16 })} {v.motor}</span>
            <span>{Icons.gear({ size: 16 })} {v.transmision}</span>
            <span>{Icons.bolt({ size: 16 })} {v.traccion}</span>
          </div>
        </div>
      </div>

      <div className="ap-wrap ap-detail-layout" style={{ padding: "44px 28px 0px" }}>
        <div className="ap-detail-left">
          <div className="ap-gallery" ref={galleryRef}>
            <div className="ap-gallery-main">
              <img src={imgs[thumb]} alt={`${v.marca} ${v.modelo}`} style={{ objectPosition: "center" }} />
              <span className={`ap-card-cond ${v.condicion === "nuevo" || v.condicion === "Nuevo" ? "ap-tag-new" : "ap-tag-used"}`}>{v.condicion}</span>
              <span className="ap-gallery-count">{Icons.grid({ size: 14 })} {imgs.length} fotos</span>
              <button className={`ap-gallery-fav ${faved ? "is-faved" : ""}`} onClick={toggleFav} aria-label="Guardar en favoritos">
                {Icons.heart({ size: 18 })}
              </button>
              {imgs.length > 1 && <>
                <button className="ap-gallery-nav ap-gallery-nav--prev" onClick={() => goThumb((thumb - 1 + imgs.length) % imgs.length)} aria-label="Anterior">
                  {Icons.arrowLeft({ size: 20 })}
                </button>
                <button className="ap-gallery-nav ap-gallery-nav--next" onClick={() => goThumb((thumb + 1) % imgs.length)} aria-label="Siguiente">
                  {Icons.arrowRight({ size: 20 })}
                </button>
              </>}
            </div>
            <div className="ap-gallery-thumbs">
              {imgs.map((src, i) =>
              <button key={i} className={`ap-gthumb ${i === thumb ? "is-on" : ""}`} onClick={() => goThumb(i)}>
                  <img src={src} alt="" style={{ objectPosition: "center" }} />
                </button>
              )}
            </div>
          </div>

          <div className="ap-detail-block">
            <h2 className="ap-block-title">Ficha técnica</h2>
            <div className="ap-specsheet">
              {specs.map((s) =>
              <div className="ap-specsheet-item" key={s.label}>
                  <span className="ap-specsheet-ico">{s.icon}</span>
                  <div>
                    <p className="ap-specsheet-label">{s.label}</p>
                    <p className="ap-specsheet-val">{s.val}</p>
                  </div>
                </div>
              )}
            </div>
          </div>

          <div className="ap-detail-card">
            <div className="ap-detail-block ap-detail-block-flush">
              <h2 className="ap-block-title">Equipamiento destacado</h2>
              <div className="ap-equip">
                {equipamiento.map((e) =>
                <span className="ap-equip-item" key={e}>
                    <span className="ap-equip-check">{Icons.check({ size: 13 })}</span>
                    <span className="ap-equip-text">{e}</span>
                  </span>
                )}
              </div>
            </div>

            <div className="ap-detail-divider"></div>

            <div className="ap-detail-block ap-detail-block-flush">
              <h2 className="ap-block-title">Descripción</h2>
              <p className="ap-detail-desc" style={{ whiteSpace: "pre-wrap" }}>
                {v.descripcion && v.descripcion.trim()
                  ? v.descripcion
                  : `${v.marca} ${v.modelo} ${v.anio} en excelente estado, ${(v.condicion || "").toLowerCase()} y con todos sus documentos al día. Motor ${v.motor}, transmisión ${(v.transmision || "").toLowerCase()} y tracción ${v.traccion}. Vehículo verificado por nuestro equipo técnico mediante inspección de 150 puntos. Recíbelo con garantía, transferencia incluida y opciones de financiamiento con las principales entidades del país. Agenda tu prueba de manejo hoy mismo.`}
              </p>
            </div>
          </div>
        </div>

        <aside className="ap-detail-aside">
          <div className="ap-buybox">
            <p className="ap-buybox-eyebrow">{v.marca} · {v.anio}</p>
            <div className="ap-buybox-tags">
              <span className="ap-minitag">{v.tipo}</span>
              <span className="ap-minitag">{v.traccion}</span>
              <span className="ap-minitag">{v.combustible}</span>
            </div>
            <div className="ap-buybox-price">
              <p className="ap-card-price-label">Precio de venta</p>
              <p className="ap-buybox-amount">{fmtUSD(v.precio)}</p>
            </div>

            <div className="ap-buybox-fin">
              <div className="ap-buybox-fin-head">
                <span>Desde</span>
                <strong>{fmtUSD(Math.round(cuota))}<small>/mes</small></strong>
              </div>
              <label className="ap-buybox-fin-label">Inicial · {inicial}% ({fmtUSD(Math.round(v.precio * inicial / 100))})</label>
              <input className="ap-range" type="range" min="20" max="60" step="5" value={inicial}
              onChange={(e) => setInicial(+e.target.value)} />
              <button className="ap-buybox-fin-link" onClick={() => go("calculator", v)}>
                {Icons.bolt({ size: 14 })} Calcular financiamiento completo
              </button>
            </div>

            <Btn variant="wa" size="lg" className="ap-buybox-btn" icon={Icons.whatsapp({ size: 20 })}
            href={waLink(`Hola Auto Paniagua, me interesa el ${v.marca} ${v.modelo} ${v.anio} (${fmtUSD(v.precio)}). ¿Está disponible?`)}>
              Cotizar por WhatsApp
            </Btn>
            <Btn variant="outline" size="lg" className="ap-buybox-btn" icon={Icons.phone({ size: 18 })} href="tel:+18094827301">
              Llamar 809-482-7301
            </Btn>

            <div className="ap-buybox-trust">
              <span>{Icons.shield({ size: 15 })} Inspección 150 puntos</span>
              <span>{Icons.check({ size: 15 })} Transferencia incluida</span>
              <span>{Icons.check({ size: 15 })} Garantía mecánica</span>
            </div>
          </div>
        </aside>
      </div>

      <section className="ap-section">
        <div className="ap-wrap">
          <SectionHead overline="También te puede interesar" title="Vehículos similares"
          action="Ver inventario" onAction={() => go("listing")} />
          <div className="ap-grid-cards">
            {similares.map((x) => <CarCard key={x.id} v={x} onOpen={(y) => go("detail", y)} />)}
          </div>
        </div>
      </section>
    </div>);

}

window.DetailScreen = DetailScreen;