// ============================================================
// HausMatch App · Mobile screens
// Upload, Results, Detail — responsive adaptations in iOS frame
// ============================================================

function MobileFrame({ children }) {
  return (
    <div className="m-frame">
      <div className="m-frame-notch">
        <div className="m-frame-speaker" />
        <div className="m-frame-camera" />
      </div>
      <div className="m-frame-screen">
        <div className="m-statusbar">
          <span className="m-time">9:41</span>
          <div className="m-status-right">
            <svg width="16" height="10" viewBox="0 0 16 10" fill="currentColor"><path d="M1 8h2v1H1zM5 6h2v3H5zM9 4h2v5H9zM13 1h2v8h-2z"/></svg>
            <svg width="14" height="10" viewBox="0 0 14 10" fill="none" stroke="currentColor" strokeWidth="1"><path d="M1 4a8 8 0 0 1 12 0M3 6a5 5 0 0 1 8 0M5.5 8a2 2 0 0 1 3 0"/></svg>
            <svg width="22" height="10" viewBox="0 0 22 10" fill="none" stroke="currentColor" strokeWidth="1"><rect x="0.5" y="1" width="18" height="8" rx="2"/><rect x="2" y="2.5" width="13" height="5" rx="1" fill="currentColor"/><rect x="19.5" y="3.5" width="1.5" height="3" rx="0.5" fill="currentColor"/></svg>
          </div>
        </div>
        <div className="m-content">{children}</div>
        <div className="m-home-indicator" />
      </div>
    </div>
  );
}

function MobileTopBar({ title, onBack, right }) {
  return (
    <div className="m-topbar">
      {onBack ? (
        <button className="m-topbar-btn" onClick={onBack}><Icon name="arrowBack" size={18} /></button>
      ) : (
        <Wordmark size={24} />
      )}
      {title && <div className="m-topbar-title">{title}</div>}
      <div className="m-topbar-right">{right || <button className="m-topbar-btn"><Icon name="search" size={18} /></button>}</div>
    </div>
  );
}

function MobileUpload({ onMatch, onQuiz }) {
  return (
    <>
      <MobileTopBar />
      <div className="m-upload">
        <div className="m-upload-head">
          <div className="hm-eyebrow">Visual home search</div>
          <h2 className="m-upload-title">
            Show us the one you <span className="hm-italic-accent">saved</span>.
          </h2>
          <p className="m-upload-sub">Drop a photo. We'll find the real one.</p>
        </div>
        <button
          className="m-upload-dropzone"
          onClick={onMatch}
          style={{ border: 0, font: "inherit", width: "100%", textAlign: "center" }}
        >
          <Icon name="image" size={28} stroke={1.2} />
          <div className="m-upload-dz-title">Tap to add a photo</div>
          <div className="m-upload-dz-sub">or paste from your camera roll</div>
        </button>
        <div className="m-upload-row">
          <button className="m-upload-chip" onClick={onMatch}><Icon name="link" size={13} /> Paste link</button>
          <button className="m-upload-chip" onClick={onQuiz}><Icon name="sparkle" size={13} /> Style quiz</button>
        </div>
        <div className="m-upload-examples">
          <div className="hm-eyebrow" style={{ color: "var(--fg-4)" }}>Or try</div>
          <div className="m-upload-ex-row">
            {[0, 1, 2].map((i) => (
              <button
                key={i}
                className="m-upload-ex"
                onClick={onMatch}
                style={{ border: 0, padding: 0, background: "transparent", cursor: "pointer" }}
              >
                <img src={window.QUIZ_PAIRS[i][0].src} alt="" />
              </button>
            ))}
          </div>
        </div>
      </div>
    </>
  );
}

function MobileResults({ onOpenListing, onRefine }) {
  return (
    <>
      <MobileTopBar
        title="Your matches"
        onBack={onRefine}
        right={<button className="m-topbar-btn" aria-label="Filter"><Icon name="sliders" size={18} /></button>}
      />
      <div className="m-results">
        <div className="m-results-head">
          <div className="m-results-reference">
            <img src={window.UPLOADED_HOME.img} alt="Reference" />
            <div className="m-results-ref-label">
              <div className="hm-eyebrow" style={{ fontSize: 9 }}>Your reference</div>
              <div className="m-results-ref-tag">Desert Modern · Organic Minimal</div>
            </div>
          </div>
          <h2 className="m-results-title">
            <span className="hm-italic-accent">6 homes</span> that feel like yours.
          </h2>
        </div>
        <div className="m-results-list">
          {window.MATCHES.map((m) => (
            <button
              key={m.id}
              className="m-listing"
              onClick={() => onOpenListing && onOpenListing(m)}
              style={{ border: 0, font: "inherit", textAlign: "left", width: "100%", background: "transparent", cursor: "pointer", padding: 0 }}
            >
              <div className="m-listing-photo">
                <img src={m.photos[0]} alt={m.address} />
                <div className="m-listing-match"><MatchBadge pct={m.sim} size={36} /></div>
              </div>
              <div className="m-listing-body">
                <div className="m-listing-price">{m.price}</div>
                <div className="m-listing-addr">{m.address}</div>
                <div className="m-listing-hood">{m.neighborhood} · {m.beds} bd · {m.baths} ba · {m.sqft.toLocaleString()} sq ft</div>
                <div className="m-listing-rationale">
                  <span>Matched on</span> {m.rationale}
                </div>
              </div>
            </button>
          ))}
        </div>
      </div>
    </>
  );
}

function MobileDetail({ listing, onBack, onMoreLikeThis }) {
  const l = listing || window.MATCHES[0];
  return (
    <>
      <div className="m-detail-hero">
        <img src={l.photos[0]} alt={l.address} />
        <button className="m-detail-back" onClick={onBack} aria-label="Back"><Icon name="arrowBack" size={16} /></button>
        <button className="m-detail-save" aria-label="Save"><Icon name="heart" size={16} /></button>
        <div className="m-detail-match">
          <MatchBadge pct={l.sim} size={42} />
        </div>
      </div>
      <div className="m-detail-body">
        <div className="m-detail-price">{l.price}</div>
        <div className="m-detail-addr">{l.address}</div>
        <div className="m-detail-hood">{l.neighborhood}</div>
        <div className="m-detail-specs">
          <span><Icon name="bed" size={12} /> {l.beds} bd</span>
          <span><Icon name="bath" size={12} /> {l.baths} ba</span>
          <span><Icon name="ruler" size={12} /> {l.sqft.toLocaleString()} sqft</span>
        </div>
        <div className="m-detail-tags">
          {l.styleTags.map((t) => <Chip key={t} variant="sage">{t}</Chip>)}
        </div>
        <div className="m-detail-why">
          <div className="hm-eyebrow">Why this matched</div>
          <ul>
            <li><span className="m-why-dot" /> Low horizontal rooflines</li>
            <li><span className="m-why-dot" /> Warm oak · rammed earth palette</li>
            <li><span className="m-why-dot" /> Indoor-outdoor threshold</li>
            <li><span className="m-why-dot" /> Courtyard-centered plan</li>
          </ul>
        </div>
        <button className="m-detail-cta">
          <Icon name="phone" size={14} />
          Request a tour with Daniel
        </button>
      </div>
    </>
  );
}

Object.assign(window, { MobileFrame, MobileUpload, MobileResults, MobileDetail });