// StompGear — Shared Atoms for Create Listing Flow

const DEMO_LISTING = {
  title: "Trek Fuel EX 9.7 - M (5'7\"\u20135'11\") (Kimberley)",
  category: "Cycle Sports",
  subcategory: "Bikes & E-Bikes",
  rentalType: "Trail / Mountain Bikes",
  brand: "Trek",
  model: "Fuel EX 9.7",
  year: "2022",
  frameType: "Full Suspension",
  wheelSize: "29\"",
  brakeType: "Hydraulic Disc",
  size: "M (5'7\"\u20135'11\")",
  condition: null,
  description: "For Rent: Explore the stunning trails around Kimberley, BC with this Trek Fuel EX 9.7 full-suspension trail bike. Perfect for intermediate to advanced riders, this medium-frame bike handles everything from flowy singletrack to technical rock gardens at Bootleg Gap — the trailhead is a 5-minute ride from pickup.\n\nSpec highlights include SRAM GX Eagle 12-speed drivetrain, RockShox Pike fork with 140mm travel, and 29\" Bontrager tires tubeless-ready. Helmet included. Don't miss the chance to ride Kimberley's legendary trails on a premium trail bike.",
  photos: [
    { id: 1, url: "https://images.unsplash.com/photo-1541625602330-2277a4c46182?w=800&auto=format&fit=crop", isStock: true, label: "Stock product photo" },
    { id: 2, url: "https://images.unsplash.com/photo-1522163182402-834f871fd851?w=800&auto=format&fit=crop", isStock: true, label: "Stock photo" },
    { id: 3, url: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=800&auto=format&fit=crop", isStock: true, label: "Stock photo" }
  ],
  accessories: ["Helmet", "Tool Kit", "Spare Tube", "Lock", "Frame Pump"],
  retailValue: 3800,
  dailyRate: 95,
  weeklyRate: 475,
  monthlyRate: 800,
  minBookingLength: "2 Days",
  deposit: 500,
  deliveryAddons: [{ title: "Helmet", price: 25, applied: "Per Order" }],
  location: "Kimberley, BC",
  pickupAddress: "Kimberley | British Columbia | V1A 2G1",
  dropoffAddress: "Kimberley | British Columbia | V1A 2G1",
  vehicleType: "Pickup Truck",
  pickupNotes: "Message upon arrival. Bike will be ready at the front of the house.",
  rules: "Helmet required at all times. No lift-accessed bike park riding. Return clean and undamaged. Rider assumes full liability for trail use.",
  availability: [
    { day: "Sunday",    hours: "10:00 AM – 4:00 PM" },
    { day: "Monday",    hours: "9:00 AM – 5:00 PM" },
    { day: "Tuesday",   hours: "9:00 AM – 5:00 PM" },
    { day: "Wednesday", hours: "9:00 AM – 5:00 PM" },
    { day: "Thursday",  hours: "9:00 AM – 5:00 PM" },
    { day: "Friday",    hours: "9:00 AM – 5:00 PM" },
    { day: "Saturday",  hours: "9:00 AM – 5:00 PM" }
  ],
  confidence: {
    title: "high",
    description: "high",
    accessories: "medium",
    dailyRate: "medium",
    deposit: "medium",
    year: "low",
    condition: "required"
  },
  ownerName: "Chris M.",
  ownerJoined: "2021",
  ownerListings: 4,
  ownerBio: "When my family isn't out shredding Bootleg Gap or exploring the backcountry, we're happy to rent out our own gear so others can experience the Kootenays the way we do. We believe great gear should be shared."
};

function ConfidenceFlag({ level }) {
  const [open, setOpen] = React.useState(false);
  if (!level || level === "high") return null;
  const cfg = {
    medium:   { label: "Review",   bg: "#fef9c3", border: "#fde047", text: "#854d0e", msg: "We estimated this from the product page. Please verify before publishing." },
    low:      { label: "Verify",   bg: "#fef3c7", border: "#f59e0b", text: "#92400e", msg: "We weren't sure about this — please check and correct if needed." },
    required: { label: "Required", bg: "#fff7ed", border: "#fb923c", text: "#9a3412", msg: "This field needs your input before you can publish." }
  };
  const c = cfg[level] || cfg.medium;
  return (
    <span style={{ position: "relative", display: "inline-flex", alignItems: "center", verticalAlign: "middle", marginLeft: 6 }}>
      <button onClick={e => { e.stopPropagation(); setOpen(!open); }} style={{ display: "inline-flex", alignItems: "center", gap: 3, padding: "2px 7px", borderRadius: 10, background: c.bg, border: `1px solid ${c.border}`, color: c.text, fontSize: 10, fontWeight: 700, cursor: "pointer", fontFamily: "'Inter', sans-serif", letterSpacing: "0.03em", lineHeight: 1.8, whiteSpace: "nowrap" }}>
        {level === "required" ? "● Required" : "⚑ " + c.label}
      </button>
      {open && (
        <div onClick={e => e.stopPropagation()} style={{ position: "absolute", bottom: "130%", left: 0, zIndex: 300, background: "#1f2937", color: "#f9fafb", padding: "10px 14px", borderRadius: 6, fontSize: 12, fontFamily: "'Inter', sans-serif", width: 220, lineHeight: 1.6, boxShadow: "0 4px 20px rgba(0,0,0,0.4)" }}>
          {c.msg}
          <button onClick={() => setOpen(false)} style={{ display: "block", marginTop: 6, background: "none", border: "none", color: "#9ca3af", fontSize: 11, cursor: "pointer", fontFamily: "'Inter', sans-serif", padding: 0 }}>Dismiss</button>
        </div>
      )}
    </span>
  );
}

function EditableText({ value, onChange, multiline, style, placeholder = "Click to edit…", tag = "span" }) {
  const [editing, setEditing] = React.useState(false);
  const [draft, setDraft] = React.useState(value || "");
  const ref = React.useRef(null);
  React.useEffect(() => { setDraft(value || ""); }, [value]);
  React.useEffect(() => { if (editing && ref.current) ref.current.focus(); }, [editing]);
  const commit = () => { onChange(draft); setEditing(false); };
  const inputStyle = { width: "100%", padding: "6px 10px", border: "2px solid #015672", borderRadius: 4, fontSize: "inherit", fontFamily: "inherit", fontWeight: "inherit", lineHeight: "inherit", color: "inherit", outline: "none", background: "#f8fdff", boxSizing: "border-box", ...style };
  if (editing) {
    return multiline
      ? <textarea ref={ref} value={draft} onChange={e => setDraft(e.target.value)} onBlur={commit} style={{ ...inputStyle, resize: "vertical", minHeight: 80 }} />
      : <input ref={ref} value={draft} onChange={e => setDraft(e.target.value)} onBlur={commit} onKeyDown={e => e.key === "Enter" && commit()} style={inputStyle} />;
  }
  const Tag = tag;
  return (
    <Tag onClick={() => setEditing(true)} title="Click to edit" style={{ cursor: "text", borderRadius: 3, transition: "background 0.12s", ...style }} onMouseEnter={e => e.currentTarget.style.background = "rgba(1,86,114,0.05)"} onMouseLeave={e => e.currentTarget.style.background = "transparent"}>
      {value || <em style={{ color: "#9ca3af", fontStyle: "italic", fontWeight: 400 }}>{placeholder}</em>}
    </Tag>
  );
}

function EditableNumber({ value, prefix = "", suffix = "", onChange }) {
  const [editing, setEditing] = React.useState(false);
  const [draft, setDraft] = React.useState(value);
  const ref = React.useRef(null);
  React.useEffect(() => { if (editing && ref.current) ref.current.select(); }, [editing]);
  const commit = () => { onChange(Number(draft) || 0); setEditing(false); };
  if (editing) {
    return (
      <span style={{ display: "inline-flex", alignItems: "baseline", gap: 2 }}>
        {prefix && <span>{prefix}</span>}
        <input ref={ref} type="number" value={draft} onChange={e => setDraft(e.target.value)} onBlur={commit} onKeyDown={e => e.key === "Enter" && commit()} autoFocus style={{ width: 80, padding: "3px 6px", border: "2px solid #015672", borderRadius: 4, fontSize: "inherit", fontFamily: "inherit", fontWeight: "inherit", outline: "none", color: "#015672" }} />
        {suffix && <span>{suffix}</span>}
      </span>
    );
  }
  return (
    <span onClick={() => { setDraft(value); setEditing(true); }} title="Click to edit" style={{ cursor: "text" }}>
      {prefix}<span style={{ borderBottom: "1.5px dashed #015672", color: "#015672" }}>{value}</span>{suffix}
    </span>
  );
}

function StompLogo({ size = 24 }) {
  const w = Math.round(size * 94 / 66);
  return (
    <svg width={w} height={size} viewBox="0 0 94 66" fill="none">
      <path d="M89.6 20.7L82.4 20.7L80.6 18.2L76.8 23.2L66.1 10.3L66.1 23.6L47.2 0L28.3 23.6L28.3 10.3L17.7 23.2L13.8 18.2L12 20.7L4.9 20.7L0 27.5L94.4 27.5L89.6 20.7Z" fill="#015672"/>
      <path d="M37 0L0 51.6L4.1 49.4L7 52.2L17.9 38.7L23.6 45.5L37 28.3L50.4 45.5L56.1 38.7L67 52.2L69.8 49.4L73.9 51.6L37 0Z" fill="#D1E0E9"/>
    </svg>
  );
}

Object.assign(window, { DEMO_LISTING, ConfidenceFlag, EditableText, EditableNumber, StompLogo });