/* global React, VEHICLES, fmt$, Eyebrow, SectionHead, Photo, VehicleCard, TestDriveQuick, QuickActions, QuickPhone */

function Detail({ vehicle, setPage, openVehicle }) {
  const v = vehicle || VEHICLES[0];
  const similar = VEHICLES.filter(x => x.id !== v.id && x.body === v.body).slice(0, 4);

  const facts = [
    { label: 'Year', value: v.year },
    { label: 'Mileage', value: `${v.miles.toLocaleString()} mi` },
    { label: 'Body', value: v.body },
    { label: 'Stock', value: v.stock },
    { label: 'VIN', value: v.vin },
  ];

  return (
    <div className="container">
      <div style={{
        padding: '32px 0 8px', display: 'flex', gap: 12, alignItems: 'center',
        fontFamily: 'var(--mono)', fontSize: 11, fontWeight: 500,
        letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--fg-dim)',
        flexWrap: 'wrap',
      }}>
        <a onClick={() => setPage('home')} style={{ cursor: 'pointer' }}>Home</a>
        <span>›</span>
        <a onClick={() => setPage('inventory')} style={{ cursor: 'pointer' }}>Inventory</a>
        <span>›</span>
        <span style={{ color: 'var(--fg)' }}>{v.year} {v.make} {v.model}</span>
      </div>

      <div className="detail-grid">
        <div>
          <div style={{ paddingTop: 28, paddingBottom: 24, borderBottom: '1px solid var(--line)' }}>
            <div className="mono" style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.18em', color: 'var(--fg-dim)', textTransform: 'uppercase' }}>
              Stock {v.stock} · VIN {v.vin}
            </div>
            <h1 className="detail-title" style={{ marginTop: 14 }}>
              {v.year} {v.make}<br/>
              <span style={{ color: 'var(--fg-mute)' }}>{v.model}</span>
              {' '}<em style={{ fontStyle: 'italic', color: 'var(--accent)', fontSize: '0.7em' }}>{v.trim}</em>
            </h1>
          </div>

          <div className="detail-gallery" style={{ marginTop: 28 }}>
            <Photo hue={v.hue} photo={v.photo} label={`${v.year} ${v.make} ${v.model}`} aspect="16/9" />
          </div>

          <div style={{
            marginTop: 28,
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
            border: '1px solid var(--line)',
            borderRadius: 6,
            overflow: 'hidden',
          }}>
            {facts.map((fact, i) => (
              <div key={fact.label} className="spec" style={{ borderRadius: 0, borderRight: i < facts.length - 1 ? '1px solid var(--line)' : 'none' }}>
                <span className="spec-l">{fact.label}</span>
                <span className="spec-v" style={{ overflowWrap: 'anywhere' }}>{fact.value}</span>
              </div>
            ))}
          </div>

          <div style={{ padding: '36px 0', borderBottom: '1px solid var(--line)' }}>
            <Eyebrow>Listing note</Eyebrow>
            <p style={{ fontFamily: 'var(--display)', fontSize: 24, lineHeight: 1.4, marginTop: 18, letterSpacing: '-0.01em' }}>
              {v.blurb}
            </p>
            <p style={{ marginTop: 16, color: 'var(--fg-mute)', lineHeight: 1.65 }}>
              Availability, final price, equipment, and condition should be confirmed with the lot before you drive in. We keep this page tied to the live inventory feed so stale sold vehicles are easier to catch.
            </p>
          </div>
        </div>

        <aside className="detail-side">
          <div>
            <div className="detail-pricerow">
              <div className="detail-price">{fmt$(v.price)}</div>
              <div className="chip chip-sage"><span className="chip-dot"/>In live feed</div>
            </div>
            <div className="detail-pm" style={{ marginTop: 8 }}>
              {v.miles.toLocaleString()} miles · Stock {v.stock}
            </div>
          </div>

          <QuickActions vehicle={v} />
          <TestDriveQuick vehicle={v} key={v.id} />

          <div>
            <div className="mono" style={{ fontSize: 10, fontWeight: 600, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--fg-dim)', marginBottom: 8 }}>
              Want this one?
            </div>
            <QuickPhone intent="vehicle" vehicle={v} key={'qp-' + v.id} cta="Text me about it" placeholder="Phone number" />
          </div>

          <button className="btn btn-primary btn-lg" onClick={() => window.openLead && window.openLead('finance', v)}>
            Start financing <span className="btn-arrow">→</span>
          </button>
          <button className="btn btn-ghost btn-lg" onClick={() => window.openLead && window.openLead('general', v)}>
            Ask a question <span className="btn-arrow">→</span>
          </button>
        </aside>
      </div>

      {similar.length > 0 && (
        <section className="section">
          <SectionHead num={8} title={<>Similar vehicles.</>} sub={`Other ${v.body.toLowerCase()}s in inventory`} />
          <div className="grid-4">
            {similar.map(s => <VehicleCard key={s.id} v={s} onClick={openVehicle} />)}
          </div>
        </section>
      )}
    </div>
  );
}

window.Detail = Detail;