// ============================================================
// HausMatch App · Screen 5 — Listing Detail
// One home, gallery, why-matched breakdown, agent contact,
// "show me more like this"
// ============================================================

function ScreenDetail({ listing, onBack, onMoreLikeThis }) {
  const l = listing || window.MATCHES[0];
  const [activePhoto, setActivePhoto] = React.useState(0);

  return (
    <div className="screen detail-screen">
      <AppBar current="matches" />
      <main className="detail-main">
        <div className="detail-breadcrumb">
          <a onClick={onBack}>
            <Icon name="arrowBack" size={14} />
            Back to matches
          </a>
          <span className="detail-bc-sep">·</span>
          <span className="detail-bc-item">Matches</span>
          <span className="detail-bc-sep">·</span>
          <span className="detail-bc-item is-current">{l.address}</span>
        </div>

        <div className="detail-gallery">
          <div className="detail-hero-photo">
            <img src={l.photos[activePhoto]} alt={l.address} />
            <div className="detail-hero-match">
              <MatchBadge pct={l.sim} size={56} />
              <div className="detail-hero-match-label">
                <div className="hm-eyebrow">Aesthetic fit</div>
                <div className="detail-hero-match-sub">vs. your reference</div>
              </div>
            </div>
          </div>
          <div className="detail-thumb-column">
            {l.photos.slice(0, 4).map((p, i) => (
              <button
                key={i}
                className={`detail-thumb ${activePhoto === i ? "is-active" : ""}`}
                onClick={() => setActivePhoto(i)}
              >
                <img src={p} alt="" />
              </button>
            ))}
            {l.photos.length < 4 && Array.from({ length: 4 - l.photos.length }).map((_, i) => (
              <div key={`ph-${i}`} className="detail-thumb is-placeholder">
                <span>+{12 - l.photos.length + i}</span>
              </div>
            ))}
          </div>
        </div>

        <div className="detail-body">
          <div className="detail-body-main">
            <div className="detail-headline">
              <div>
                <div className="detail-price">{l.price}</div>
                <div className="detail-addr">
                  <div className="detail-addr-line1">{l.address}</div>
                  <div className="detail-addr-line2">{l.neighborhood} · Arizona</div>
                </div>
              </div>
              <div className="detail-headline-actions">
                <button className="hm-icon-btn-lg" aria-label="Save"><Icon name="heart" size={18} /></button>
                <button className="hm-icon-btn-lg" aria-label="Share"><Icon name="share" size={18} /></button>
              </div>
            </div>

            <div className="detail-specs">
              <div className="detail-spec">
                <Icon name="bed" size={14} />
                <div>
                  <div className="detail-spec-val">{l.beds}</div>
                  <div className="detail-spec-lbl">bedrooms</div>
                </div>
              </div>
              <div className="detail-spec">
                <Icon name="bath" size={14} />
                <div>
                  <div className="detail-spec-val">{l.baths}</div>
                  <div className="detail-spec-lbl">bathrooms</div>
                </div>
              </div>
              <div className="detail-spec">
                <Icon name="ruler" size={14} />
                <div>
                  <div className="detail-spec-val">{l.sqft.toLocaleString()}</div>
                  <div className="detail-spec-lbl">sq ft</div>
                </div>
              </div>
              <div className="detail-spec">
                <Icon name="map" size={14} />
                <div>
                  <div className="detail-spec-val">0.41</div>
                  <div className="detail-spec-lbl">acres</div>
                </div>
              </div>
            </div>

            <section className="detail-section">
              <Eyebrow>Why this matched</Eyebrow>
              <div className="detail-why">
                <p className="detail-why-lead">
                  <span className="hm-italic-accent">This home shares four aesthetic traits</span> with the one you uploaded.
                </p>
                <ul className="detail-why-list">
                  <li>
                    <span className="detail-why-dot" />
                    <div>
                      <strong>Low horizontal rooflines.</strong>
                      <span className="detail-why-desc"> Single-story, wide overhangs — the same deliberate ground-hugging silhouette.</span>
                    </div>
                  </li>
                  <li>
                    <span className="detail-why-dot" />
                    <div>
                      <strong>Warm oak ceilings against rammed-earth walls.</strong>
                      <span className="detail-why-desc"> Material palette matches within 4% on the VAE color axis.</span>
                    </div>
                  </li>
                  <li>
                    <span className="detail-why-dot" />
                    <div>
                      <strong>Uninterrupted indoor-outdoor threshold.</strong>
                      <span className="detail-why-desc"> Same floor plane carries from living room to patio — no step, no sill.</span>
                    </div>
                  </li>
                  <li>
                    <span className="detail-why-dot" />
                    <div>
                      <strong>Courtyard-centered plan.</strong>
                      <span className="detail-why-desc"> Rooms arranged around a single outdoor core — a Frank Lloyd Wright / Rick Joy lineage.</span>
                    </div>
                  </li>
                </ul>
              </div>
            </section>

            <section className="detail-section">
              <Eyebrow>Style tags</Eyebrow>
              <div className="detail-tags">
                {l.styleTags.map((t) => (
                  <Chip key={t} variant="sage">{t}</Chip>
                ))}
                <Chip variant="ochre">Courtyard plan</Chip>
                <Chip variant="ochre">Mountain view</Chip>
              </div>
            </section>

            <section className="detail-section">
              <Eyebrow>From the listing</Eyebrow>
              <p className="detail-desc">
                A quiet, horizontal composition on a south-facing parcel in lower Paradise Valley.
                Architect-designed in 2019 by Kendle Design Collaborative — rammed-earth perimeter,
                board-formed concrete spine, and a central courtyard that orients every room toward
                Camelback Mountain. Primary suite opens onto a private reflecting pool;
                kitchen runs 24 feet across a single travertine slab.
              </p>
            </section>
          </div>

          <aside className="detail-sidebar">
            <div className="detail-agent">
              <div className="detail-agent-head">
                <div className="detail-agent-avatar">DL</div>
                <div>
                  <div className="detail-agent-name">Daniel Lombard</div>
                  <div className="detail-agent-firm">Compass · Arizona</div>
                </div>
              </div>
              <p className="detail-agent-sub">
                Tour this home or three more like it — Daniel handles the entire Paradise Valley aesthetic corridor.
              </p>
              <div className="detail-agent-actions">
                <Button variant="primary" size="md" icon="phone">Request a tour</Button>
                <Button variant="secondary" size="md">Message</Button>
              </div>
            </div>

            <div className="detail-more-card" onClick={onMoreLikeThis}>
              <div className="detail-more-thumbs">
                {window.MATCHES.slice(1, 4).map((m) => (
                  <img key={m.id} src={m.photos[0]} alt="" />
                ))}
              </div>
              <div className="detail-more-copy">
                <div className="hm-eyebrow">Keep exploring</div>
                <div className="detail-more-title">
                  More homes with <span className="hm-italic-accent">this feeling</span>
                </div>
                <div className="detail-more-link">
                  Show me 6 more
                  <Icon name="arrow" size={13} />
                </div>
              </div>
            </div>

            <div className="detail-disclaimer hm-caption">
              Listing data provided via ARMLS · last refreshed 14 min ago.
              HausMatch is not the listing brokerage.
            </div>
          </aside>
        </div>
      </main>
    </div>
  );
}

Object.assign(window, { ScreenDetail });