// ============================================================
// HausMatch App · Screen 2 — Upload / Home
// The hero action. Drag-drop, paste URL, or use quiz result.
// Uses quiet pearl canvas; big whitespace; one clear action.
// ============================================================

function ScreenUpload({ onMatch }) {
  const [mode, setMode] = React.useState("drop"); // drop | url | quiz
  const [url, setUrl] = React.useState("");
  const [hovering, setHovering] = React.useState(false);

  return (
    <div className="screen upload-screen">
      <AppBar current="upload" />
      <main className="upload-main">
        <div className="upload-head">
          <Eyebrow>Visual home search</Eyebrow>
          <h1 className="upload-title">
            Show us the one you <span className="hm-italic-accent">saved</span>.
            <br />
            We'll find you the real one.
          </h1>
          <p className="upload-sub">
            Drop a photo of a home you love — from Instagram, Pinterest,
            Architectural Digest, anywhere. We'll match it to listings in your area.
          </p>
        </div>

        <div className="upload-tabs">
          <button
            className={`upload-tab ${mode === "drop" ? "is-active" : ""}`}
            onClick={() => setMode("drop")}
          >
            <Icon name="upload" size={14} />
            Upload an image
          </button>
          <button
            className={`upload-tab ${mode === "url" ? "is-active" : ""}`}
            onClick={() => setMode("url")}
          >
            <Icon name="link" size={14} />
            Paste a link
          </button>
          <button
            className={`upload-tab ${mode === "quiz" ? "is-active" : ""}`}
            onClick={() => setMode("quiz")}
          >
            <Icon name="sparkle" size={14} />
            Use my style quiz
          </button>
        </div>

        {mode === "drop" && (
          <div
            className={`upload-dropzone ${hovering ? "is-hovering" : ""}`}
            onDragOver={(e) => { e.preventDefault(); setHovering(true); }}
            onDragLeave={() => setHovering(false)}
            onDrop={(e) => { e.preventDefault(); setHovering(false); onMatch && onMatch(); }}
            onClick={() => onMatch && onMatch()}
          >
            <div className="upload-dropzone-inner">
              <div className="upload-icon">
                <Icon name="image" size={36} stroke={1.2} />
              </div>
              <div className="upload-dropzone-title">
                Drop an image here
              </div>
              <div className="upload-dropzone-sub">
                or <span className="upload-browse">browse your files</span>
                <span className="upload-sep"> · </span>
                JPG, PNG, HEIC · up to 12 MB
              </div>
              <div className="upload-examples">
                <span className="hm-mono" style={{ fontSize: 11, color: "var(--fg-4)", letterSpacing: "0.1em" }}>
                  OR TRY
                </span>
                <div className="upload-example-row">
                  {[0, 1, 2, 3].map((i) => (
                    <button
                      key={i}
                      className="upload-example"
                      onClick={(e) => { e.stopPropagation(); onMatch && onMatch(); }}
                    >
                      <img src={window.QUIZ_PAIRS[i][0].src} alt="" />
                    </button>
                  ))}
                </div>
              </div>
            </div>
          </div>
        )}

        {mode === "url" && (
          <div className="upload-urlbox">
            <div className="upload-url-input">
              <Icon name="link" size={16} />
              <input
                type="url"
                placeholder="Paste a Pinterest, Instagram, or article URL"
                value={url}
                onChange={(e) => setUrl(e.target.value)}
              />
              <button className="hm-btn hm-btn-primary hm-btn-md" onClick={onMatch}>
                Match
              </button>
            </div>
            <div className="upload-url-hint">
              We'll extract the home image and match it to local listings.
            </div>
          </div>
        )}

        {mode === "quiz" && (
          <div className="upload-quiz-result">
            <div className="upload-quiz-label">
              <Eyebrow>Your aesthetic fingerprint</Eyebrow>
            </div>
            <div className="upload-quiz-name">
              <span className="hm-italic-accent">Desert Modern</span>
              <span className="upload-quiz-name-plus"> + </span>
              <span className="hm-italic-accent">Organic Minimal</span>
            </div>
            <div className="upload-quiz-traits">
              <span>Low rooflines</span>
              <span>·</span>
              <span>warm oak</span>
              <span>·</span>
              <span>indoor-outdoor flow</span>
              <span>·</span>
              <span>courtyard plans</span>
            </div>
            <Button variant="primary" size="lg" iconRight="arrow" onClick={onMatch}>
              Find my matches
            </Button>
            <a className="upload-quiz-retake">Retake the quiz</a>
          </div>
        )}

        <div className="upload-trust">
          <div className="upload-trust-item">
            <span className="hm-mono">01</span>
            <span>We never share your uploads.</span>
          </div>
          <div className="upload-trust-divider" />
          <div className="upload-trust-item">
            <span className="hm-mono">02</span>
            <span>Matches from real MLS listings — updated daily.</span>
          </div>
          <div className="upload-trust-divider" />
          <div className="upload-trust-item">
            <span className="hm-mono">03</span>
            <span>Free to start. No account required.</span>
          </div>
        </div>
      </main>
    </div>
  );
}

Object.assign(window, { ScreenUpload });