/* ============================================================
   PRESTIGE BIMMER — Vehicle detail page
   ============================================================ */

function VehicleDetail({ id }) {
  const all = useInventory();
  const v = all.find(x => x.id === id);
  const [activeImg, setActiveImg] = useState(0);
  useRevealObserver(id);

  if (!v) {
    return (
      <main className="detail-missing">
        <Icon name="search" size={44} />
        <h2 className="display-m">Vehicle not found</h2>
        <p className="text-dim">This car may have been sold or removed from the collection.</p>
        <a href="#/inventory" className="btn btn-primary">Back to inventory</a>
      </main>
    );
  }

  const imgs = (v.images && v.images.length) ? v.images : [v.model];
  const related = all.filter(x => x.id !== v.id && x.series === v.series && x.status !== "sold").slice(0, 3);
  const fallbackRelated = all.filter(x => x.id !== v.id && x.status !== "sold").slice(0, 3);
  const rel = related.length ? related : fallbackRelated;

  const keySpecs = [
    ["gauge", "Power", v.power + " hp"],
    ["bolt", "0–60 mph", v.zeroSixty + "s"],
    ["spark", "Top speed", v.topSpeed + " mph"],
    ["road", "Mileage", fmtMiles(v.mileage) + " mi"],
  ];
  const fullSpecs = [
    ["Year", v.year], ["Body style", v.body], ["Engine", v.engine],
    ["Transmission", v.transmission], ["Drivetrain", v.drivetrain], ["Fuel", v.fuel],
    ["Exterior", v.color], ["Power", v.power + " hp"], ["VIN", v.vin || "On request"],
  ];

  return (
    <main className="detail">
      {/* breadcrumb */}
      <div className="detail-crumb wrap">
        <a href="#/inventory" className="detail-back"><Icon name="chevL" size={16} /> All inventory</a>
        <span className="mono text-dim">{v.series}</span>
      </div>

      {/* gallery + summary */}
      <div className="detail-top wrap">
        <div className="detail-gallery" data-reveal>
          <div className="detail-main-img">
            <Photo className="detail-photo" label={imgs[activeImg]} src={v.imageUrls && v.imageUrls[activeImg]} />
            <span className={"badge badge-" + v.status + " detail-status"}>{statusLabel[v.status]}</span>
          </div>
          {imgs.length > 1 && (
            <div className="detail-thumbs">
              {imgs.map((im, i) => (
                <button key={i} className={"detail-thumb " + (i === activeImg ? "active" : "")} onClick={() => setActiveImg(i)}>
                  <Photo label={"0" + (i + 1)} src={v.imageUrls && v.imageUrls[i]} />
                </button>
              ))}
            </div>
          )}
        </div>

        <aside className="detail-summary" data-reveal="right">
          {v.featured && <span className="vcard-fav mono detail-feat"><Icon name="star" size={12} fill /> Featured</span>}
          <span className="detail-year mono">{v.year} · {v.series}</span>
          <h1 className="detail-title display-m">{v.model}</h1>
          <p className="detail-tagline text-dim">{v.tagline}</p>
          <div className="detail-price tnum">{fmtPrice(v.price)}</div>

          <div className="detail-keyspecs">
            {keySpecs.map(([ic, l, val]) => (
              <div className="detail-keyspec" key={l}>
                <Icon name={ic} size={18} />
                <div><span className="detail-keyspec-v tnum">{val}</span><span className="detail-keyspec-l mono">{l}</span></div>
              </div>
            ))}
          </div>

          <div className="detail-actions">
            <a href="#/contact" className="btn btn-primary btn-block btn-lg">
              {v.status === "sold" ? "Notify me of similar" : "Book a viewing"} <Icon name="arrow" size={17} />
            </a>
            <a href="#/contact" className="btn btn-ghost btn-block">Request finance quote</a>
          </div>

          <div className="detail-assure mono">
            <span><Icon name="shield" size={14} /> 150-pt inspected</span>
            <span><Icon name="check" size={14} /> Full history</span>
            <span><Icon name="spark" size={14} /> 48h delivery</span>
          </div>
        </aside>
      </div>

      {/* specs + features */}
      <div className="detail-body wrap">
        <section className="detail-specs" data-reveal>
          <h2 className="detail-h2">Specification</h2>
          <dl className="spec-table">
            {fullSpecs.map(([k, val]) => (
              <div className="spec-row" key={k}>
                <dt className="mono">{k}</dt><dd className="tnum">{val}</dd>
              </div>
            ))}
          </dl>
        </section>

        <section className="detail-features" data-reveal style={{ "--d": "80ms" }}>
          <h2 className="detail-h2">Equipment &amp; options</h2>
          {v.features && v.features.length ? (
            <ul className="feature-list">
              {v.features.map((f, i) => (
                <li key={i} style={{ "--d": `${i * 50}ms` }}><Icon name="check" size={16} /> {f}</li>
              ))}
            </ul>
          ) : <p className="text-dim">Full equipment list available on request.</p>}

          <div className="detail-quote card">
            <Icon name="shield" size={22} />
            <p>Every Prestige Bimmer is sold with a comprehensive warranty, complimentary first service and a 7-day money-back promise.</p>
          </div>
        </section>
      </div>

      {/* related */}
      {rel.length > 0 && (
        <section className="detail-related section">
          <div className="wrap">
            <div className="sec-head sec-head-row">
              <h2 className="display-m" data-reveal>You may also like</h2>
              <a href="#/inventory" className="btn btn-ghost sec-head-cta" data-reveal>View all <Icon name="arrow" size={16} /></a>
            </div>
            <div className="featured-grid">
              {rel.map((rv, i) => <VehicleCard key={rv.id} v={rv} i={i} />)}
            </div>
          </div>
        </section>
      )}
    </main>
  );
}

Object.assign(window, { VehicleDetail });