// ============================================================
// HausMatch App · Screen 3 — Matching moment (dark)
// The "magic" — uploaded image with visual DNA annotations
// appearing over it, then resolving to "54,802 listings searched".
// Dark cinematic break in an otherwise pearl app.
// ============================================================

function ScreenMatching({ onDone }) {
  const [phase, setPhase] = React.useState(0);
  // 0: scanning → 1: DNA extracted → 2: searching → 3: done

  React.useEffect(() => {
    const timers = [
      setTimeout(() => setPhase(1), 900),
      setTimeout(() => setPhase(2), 2200),
      setTimeout(() => setPhase(3), 3400),
      setTimeout(() => onDone && onDone(), 4200),
    ];
    return () => timers.forEach(clearTimeout);
  }, []);

  return (
    <div className="screen matching-screen">
      <div className="matching-topbar">
        <Wordmark inverted />
        <button className="matching-cancel" onClick={onDone}>
          <Icon name="close" size={14} />
          Cancel
        </button>
      </div>

      <div className="matching-stage">
        <div className={`matching-image-wrap phase-${phase}`}>
          <img src={window.UPLOADED_HOME.img} alt={window.UPLOADED_HOME.alt} />
          <div className="matching-scanline" />
          <div className="matching-grid" />

          {/* DNA annotation pins */}
          <div className="matching-annotations">
            <div className="matching-anno anno-roof" style={{ top: "28%", left: "24%" }}>
              <span className="anno-dot" />
              <span className="anno-line" />
              <span className="anno-label">low rooflines</span>
            </div>
            <div className="matching-anno anno-material" style={{ top: "52%", left: "62%" }}>
              <span className="anno-dot" />
              <span className="anno-line" />
              <span className="anno-label">warm oak · rammed earth</span>
            </div>
            <div className="matching-anno anno-threshold" style={{ top: "68%", left: "18%" }}>
              <span className="anno-dot" />
              <span className="anno-line" />
              <span className="anno-label">indoor-outdoor threshold</span>
            </div>
            <div className="matching-anno anno-palette" style={{ top: "38%", left: "78%" }}>
              <span className="anno-dot" />
              <span className="anno-line" />
              <span className="anno-label">desert palette · bone, sand, sage</span>
            </div>
          </div>
        </div>

        <aside className="matching-side">
          <div className="matching-side-head">
            <Eyebrow muted>Visual DNA · extracted</Eyebrow>
          </div>
          <ul className="matching-dna">
            {window.VISUAL_DNA.map((dna, i) => (
              <li
                key={dna.label}
                className={`matching-dna-row ${phase >= 1 && i <= (phase === 1 ? i : 6) ? "is-visible" : ""}`}
                style={{ transitionDelay: `${i * 110}ms` }}
              >
                <span className="matching-dna-label hm-mono">{dna.label}</span>
                <span className="matching-dna-value">{dna.value}</span>
              </li>
            ))}
          </ul>

          <div className={`matching-status phase-${phase}`}>
            <div className="matching-status-row">
              <span className="matching-status-dot" />
              <span className="matching-status-text">
                {phase < 1 && "Scanning image…"}
                {phase === 1 && "Fingerprint generated"}
                {phase === 2 && (<>Searching <em>54,802</em> listings across Arizona…</>)}
                {phase >= 3 && (<>Found <em>6</em> homes with the same language.</>)}
              </span>
            </div>
            <div className="matching-progress">
              <span className="matching-progress-fill" style={{ width: `${Math.min(100, (phase + 1) * 28)}%` }} />
            </div>
          </div>
        </aside>
      </div>
    </div>
  );
}

Object.assign(window, { ScreenMatching });
