// StompGear — Step 1: Input Screen

function Step1({ inputs, setInputs, onNext }) {
  const [imagePreview, setImagePreview] = React.useState(inputs.image || null);
  const [dragging, setDragging] = React.useState(false);
  const [showCategory, setShowCategory] = React.useState(false);
  const [urlFocused, setUrlFocused] = React.useState(false);
  const fileRef = React.useRef(null);

  const canProceed = !!(imagePreview || (inputs.url && inputs.url.trim().length > 5));

  const handleFile = file => {
    if (!file || !file.type.startsWith("image/")) return;
    const reader = new FileReader();
    reader.onload = e => {
      setImagePreview(e.target.result);
      setInputs(p => ({ ...p, image: e.target.result }));
    };
    reader.readAsDataURL(file);
  };

  const removeImage = () => {
    setImagePreview(null);
    setInputs(p => ({ ...p, image: null }));
    if (fileRef.current) fileRef.current.value = "";
  };

  const categories = ["Water Sports", "Mountain Bikes", "Power Sports", "Camping", "Recreation", "Guided Tours"];

  const topbarStyle = { background: "#fff", height: 60, display: "flex", alignItems: "center", justifyContent: "space-between", padding: "0 16px", boxShadow: "0 1px 0 #f0f0f0", position: "sticky", top: 0, zIndex: 50 };
  const cardStyle = { background: "#fff", borderRadius: 8, boxShadow: "0 1px 3px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04)", overflow: "hidden" };
  const cardHeaderStyle = { padding: "14px 16px 12px", borderBottom: "1px solid #f3f4f6" };

  return (
    <div style={{ minHeight: "100vh", background: "#F7F8F9", display: "flex", flexDirection: "column" }}>

      {/* Topbar */}
      <header style={topbarStyle}>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <StompLogo size={22} />
          <span style={{ fontFamily: "'Montserrat', sans-serif", fontWeight: 700, fontSize: 17, letterSpacing: "0.05em" }}>
            STOMP<span style={{ color: "#015672" }}>GEAR</span>
          </span>
        </div>
        <span style={{ fontSize: 12, color: "#9ca3af", fontFamily: "'Inter', sans-serif", fontWeight: 500 }}>List Your Gear</span>
      </header>

      {/* Step progress */}
      <div style={{ background: "#fff", padding: "10px 16px 12px", borderBottom: "1px solid #ececec" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 0, maxWidth: 400, marginBottom: 8 }}>
          {[{ n: 1, label: "Add details" }, { n: 2, label: "Generating" }, { n: 3, label: "Review & publish" }].map((s, i, arr) => (
            <React.Fragment key={s.n}>
              <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 4 }}>
                <div style={{ width: 26, height: 26, borderRadius: "50%", background: s.n === 1 ? "#015672" : "#e5e7eb", color: s.n === 1 ? "#fff" : "#9ca3af", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 12, fontWeight: 700, fontFamily: "'Inter', sans-serif", flexShrink: 0 }}>{s.n}</div>
              </div>
              {i < arr.length - 1 && <div style={{ flex: 1, height: 2, background: "#e5e7eb", margin: "0 6px", marginBottom: 4 }} />}
            </React.Fragment>
          ))}
        </div>
        <div style={{ fontSize: 11, color: "#6b7280", fontFamily: "'Inter', sans-serif" }}>Step 1 of 3 — Tell us about your gear</div>
      </div>

      {/* Main content */}
      <div style={{ flex: 1, padding: "16px", display: "flex", flexDirection: "column", gap: 12, maxWidth: 520, margin: "0 auto", width: "100%", boxSizing: "border-box" }}>

        {/* Photo upload */}
        <div style={cardStyle}>
          <div style={cardHeaderStyle}>
            <div style={{ fontSize: 14, fontWeight: 600, color: "#111827", fontFamily: "'Poppins', sans-serif" }}>Photo of your gear</div>
            <div style={{ fontSize: 12, color: "#9ca3af", fontFamily: "'Inter', sans-serif", marginTop: 2 }}>
              Take a photo from your garage or driveway — we'll do the rest
            </div>
          </div>
          {imagePreview ? (
            <div style={{ position: "relative" }}>
              <img src={imagePreview} alt="Your gear" style={{ width: "100%", height: 200, objectFit: "cover", display: "block" }} />
              <div style={{ position: "absolute", top: 0, left: 0, right: 0, bottom: 0, background: "linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, transparent 50%)" }} />
              <button onClick={removeImage} style={{ position: "absolute", top: 10, right: 10, width: 30, height: 30, borderRadius: "50%", background: "rgba(0,0,0,0.55)", border: "none", color: "#fff", fontSize: 16, cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "sans-serif" }}>×</button>
              <button onClick={() => fileRef.current?.click()} style={{ position: "absolute", bottom: 10, right: 10, padding: "6px 12px", borderRadius: 4, background: "rgba(0,0,0,0.55)", border: "1px solid rgba(255,255,255,0.3)", color: "#fff", fontSize: 11, fontWeight: 600, cursor: "pointer", fontFamily: "'Inter', sans-serif" }}>Replace</button>
            </div>
          ) : (
            <div
              onClick={() => fileRef.current?.click()}
              onDragOver={e => { e.preventDefault(); setDragging(true); }}
              onDragLeave={() => setDragging(false)}
              onDrop={e => { e.preventDefault(); setDragging(false); handleFile(e.dataTransfer.files[0]); }}
              style={{ margin: 12, height: 150, border: `2px dashed ${dragging ? "#015672" : "#d1d5db"}`, borderRadius: 8, background: dragging ? "rgba(1,86,114,0.03)" : "#fafafa", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 10, cursor: "pointer", transition: "all 0.15s" }}
            >
              <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke={dragging ? "#015672" : "#9ca3af"} strokeWidth="1.5">
                <path d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" /><circle cx="12" cy="13" r="3" />
              </svg>
              <div style={{ textAlign: "center" }}>
                <div style={{ fontSize: 14, fontWeight: 600, color: "#374151", fontFamily: "'Inter', sans-serif" }}>Tap to add a photo</div>
                <div style={{ fontSize: 11, color: "#9ca3af", fontFamily: "'Inter', sans-serif", marginTop: 2 }}>JPG, PNG, HEIC · or drag & drop</div>
              </div>
            </div>
          )}
          <input ref={fileRef} type="file" accept="image/*" capture="environment" style={{ display: "none" }} onChange={e => handleFile(e.target.files[0])} />
        </div>

        {/* Divider */}
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <div style={{ flex: 1, height: 1, background: "#e5e7eb" }} />
          <span style={{ fontSize: 11, color: "#9ca3af", fontFamily: "'Inter', sans-serif", fontWeight: 500 }}>AND / OR</span>
          <div style={{ flex: 1, height: 1, background: "#e5e7eb" }} />
        </div>

        {/* Product URL */}
        <div style={cardStyle}>
          <div style={cardHeaderStyle}>
            <div style={{ fontSize: 14, fontWeight: 600, color: "#111827", fontFamily: "'Poppins', sans-serif" }}>
              Product link
              <span style={{ fontSize: 11, fontWeight: 400, color: "#9ca3af", marginLeft: 6 }}>optional if you have a photo</span>
            </div>
            <div style={{ fontSize: 12, color: "#9ca3af", fontFamily: "'Inter', sans-serif", marginTop: 2 }}>
              Where you bought it — MEC, REI, Amazon, manufacturer site
            </div>
          </div>
          <div style={{ padding: "10px 12px 14px" }}>
            <div style={{ position: "relative" }}>
              <svg style={{ position: "absolute", left: 12, top: "50%", transform: "translateY(-50%)", pointerEvents: "none" }} width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" strokeWidth="2">
                <path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71" /><path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71" />
              </svg>
              <input
                type="url"
                value={inputs.url || ""}
                onChange={e => setInputs(p => ({ ...p, url: e.target.value }))}
                onFocus={() => setUrlFocused(true)}
                onBlur={() => setUrlFocused(false)}
                placeholder="https://www.trekbikes.com/us/en_US/bikes/mountain-bikes/trail-mountain-bikes/fuel-ex/fuel-ex-9-7/"
                style={{ width: "100%", height: 44, paddingLeft: 34, paddingRight: 12, border: `1px solid ${urlFocused ? "#80bdff" : "#D8DCE6"}`, borderRadius: 6, fontSize: 13, fontFamily: "'Inter', sans-serif", color: "#374151", outline: "none", background: "#fff", boxSizing: "border-box", transition: "border-color 0.15s", boxShadow: urlFocused ? "0 0 0 3px rgba(0,123,255,0.12)" : "none" }}
              />
            </div>
            {inputs.url && (
              <div style={{ marginTop: 8, display: "flex", alignItems: "center", gap: 6, fontSize: 11, color: "#16a34a", fontFamily: "'Inter', sans-serif" }}>
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><path d="M20 6L9 17l-5-5" /></svg>
                We'll extract the product details from this link
              </div>
            )}
          </div>
        </div>

        {/* Optional details */}
        <div style={cardStyle}>
          <div style={cardHeaderStyle}>
            <div style={{ fontSize: 14, fontWeight: 600, color: "#111827", fontFamily: "'Poppins', sans-serif" }}>
              Anything else to know?
              <span style={{ fontSize: 11, fontWeight: 400, color: "#9ca3af", marginLeft: 6 }}>optional</span>
            </div>
          </div>
          <div style={{ padding: "10px 12px 14px" }}>
            <textarea
              value={inputs.details || ""}
              onChange={e => setInputs(p => ({ ...p, details: e.target.value }))}
              placeholder="e.g. 2022 Trek Fuel EX, medium frame, SRAM GX Eagle, small scuff on chainstay — rides great..."
              style={{ width: "100%", height: 76, padding: "10px 12px", border: "1px solid #D8DCE6", borderRadius: 6, fontSize: 13, fontFamily: "'Inter', sans-serif", color: "#374151", outline: "none", background: "#fff", resize: "none", lineHeight: 1.5, boxSizing: "border-box" }}
            />
          </div>
        </div>

        {/* Category hint (collapsed) */}
        <button onClick={() => setShowCategory(!showCategory)} style={{ background: "none", border: "none", cursor: "pointer", display: "flex", alignItems: "center", gap: 6, fontSize: 12, color: "#6b7280", fontFamily: "'Inter', sans-serif", padding: "0", alignSelf: "flex-start" }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
            <path d={showCategory ? "M6 9l6 6 6-6" : "M9 18l6-6-6-6"} />
          </svg>
          {showCategory ? "Hide category hint" : "Hint the category (if needed)"}
        </button>

        {showCategory && (
          <div style={{ ...cardStyle, padding: 12 }}>
            <div style={{ fontSize: 12, color: "#6b7280", fontFamily: "'Inter', sans-serif", marginBottom: 8 }}>Only needed if we can't figure it out from the image or URL</div>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
              {categories.map(cat => (
                <button key={cat} onClick={() => setInputs(p => ({ ...p, category: p.category === cat ? null : cat }))} style={{ padding: "6px 12px", borderRadius: 20, border: `1.5px solid ${inputs.category === cat ? "#015672" : "#e5e7eb"}`, background: inputs.category === cat ? "#015672" : "#fff", color: inputs.category === cat ? "#fff" : "#374151", fontSize: 12, fontFamily: "'Inter', sans-serif", fontWeight: 500, cursor: "pointer", transition: "all 0.12s" }}>
                  {cat}
                </button>
              ))}
            </div>
          </div>
        )}

        {/* CTA */}
        <div style={{ marginTop: 4, paddingBottom: 28 }}>
          {!canProceed && (
            <div style={{ fontSize: 12, color: "#9ca3af", textAlign: "center", marginBottom: 10, fontFamily: "'Inter', sans-serif" }}>
              Add a photo or product link to continue
            </div>
          )}
          <button
            onClick={() => canProceed && onNext()}
            style={{ width: "100%", height: 56, background: canProceed ? "#015672" : "#d1d5db", color: canProceed ? "#fff" : "#9ca3af", border: "none", borderRadius: 4, fontSize: 15, fontWeight: 700, letterSpacing: 1, textTransform: "uppercase", fontFamily: "'Inter', sans-serif", cursor: canProceed ? "pointer" : "not-allowed", transition: "background 0.15s", boxShadow: canProceed ? "0 4px 12px rgba(1,86,114,0.25)" : "none" }}
            onMouseEnter={e => canProceed && (e.currentTarget.style.background = "#92BECD")}
            onMouseLeave={e => canProceed && (e.currentTarget.style.background = "#015672")}
          >
            Generate My Listing →
          </button>
          <div style={{ textAlign: "center", marginTop: 12 }}>
            <span style={{ fontSize: 12, color: "#9ca3af", fontFamily: "'Inter', sans-serif" }}>
              Or{" "}
              <span style={{ color: "#015672", cursor: "pointer", textDecoration: "underline" }} onClick={() => onNext()}>fill it out manually</span>
            </span>
          </div>
        </div>

      </div>
    </div>
  );
}

Object.assign(window, { Step1 });