// Airbnb-style search pill with 6 fields + expanded panels.

const SearchPill = ({ state, setState, compact = false, onSearch }) => {
  const [openField, setOpenField] = React.useState(null);
  const ref = React.useRef(null);

  React.useEffect(() => {
    const onClick = (e) => {
      if (ref.current && !ref.current.contains(e.target)) setOpenField(null);
    };
    document.addEventListener("mousedown", onClick);
    return () => document.removeEventListener("mousedown", onClick);
  }, []);

  const update = (k, v) => setState(s => ({ ...s, [k]: v }));

  return (
    <div ref={ref} style={{ position: "relative", display: "inline-flex", width: "100%", maxWidth: compact ? 860 : 1080 }}>
      <div className="search-pill" style={{ width: "100%" }}>
        <button className={"field " + (openField === "where" ? "active" : "")} onClick={() => setOpenField("where")}>
          <span className="lbl">Where</span>
          <span className={"val " + (state.where ? "filled" : "")}>{state.where || "Search city"}</span>
        </button>
        <div className="sep" />
        <button className={"field " + (openField === "in" ? "active" : "")} onClick={() => setOpenField("in")}>
          <span className="lbl">Move-in</span>
          <span className={"val " + (state.checkIn ? "filled" : "")}>{state.checkIn || "Add date"}</span>
        </button>
        <div className="sep" />
        <button className={"field " + (openField === "out" ? "active" : "")} onClick={() => setOpenField("out")}>
          <span className="lbl">Move-out</span>
          <span className={"val " + (state.checkOut ? "filled" : "")}>{state.checkOut || "Add date"}</span>
        </button>
        <div className="sep" />
        <button className={"field " + (openField === "len" ? "active" : "")} onClick={() => setOpenField("len")}>
          <span className="lbl">Length</span>
          <span className={"val " + (state.length ? "filled" : "")}>{state.length || "1+ months"}</span>
        </button>
        <div className="sep" />
        <button className={"field " + (openField === "type" ? "active" : "")} onClick={() => setOpenField("type")}>
          <span className="lbl">Type</span>
          <span className={"val " + (state.type && state.type !== "any" ? "filled" : "")}>{({any:"Any", apartment:"Apartment", house:"House", room:"Room"})[state.type || "any"]}</span>
        </button>
        <div className="sep" />
        <button className={"field " + (openField === "who" ? "active" : "")} onClick={() => setOpenField("who")}>
          <span className="lbl">Guests</span>
          <span className={"val " + (state.guests ? "filled" : "")}>{state.guests ? `${state.guests} guests` : "Add team"}</span>
        </button>
        <div className="sep" />
        <button className={"field " + (openField === "co" ? "active" : "")} onClick={() => setOpenField("co")} style={{ minWidth: 120 }}>
          <span className="lbl">Company</span>
          <span className={"val " + (state.company ? "filled" : "")}>{state.company || "Optional"}</span>
        </button>
        <button className={"search-btn " + (compact ? "compact" : "")} onClick={onSearch}>
          <Icon name="search" size={16} stroke={2} />
          {!compact && <span>Search</span>}
        </button>
      </div>

      {openField === "where" && (
        <div className="suggest" style={{ top: 74, left: 0 }}>
          {window.SLS_DATA.cities.map(c => (
            <div key={c.name} className="row" onClick={() => { update("where", c.name); setOpenField("in"); }}>
              <div className="ico"><Icon name="pin" size={20} /></div>
              <div>
                <div className="t">{c.name}</div>
                <div className="s">{c.sub}</div>
              </div>
            </div>
          ))}
        </div>
      )}

      {(openField === "in" || openField === "out") && (
        <DatePicker
          top={74} left={openField === "in" ? 140 : 300}
          start={state.checkIn} end={state.checkOut}
          picking={openField}
          onPick={(which, date) => {
            update(which === "in" ? "checkIn" : "checkOut", date);
            if (which === "in") setOpenField("out");
            else setOpenField("len");
          }}
        />
      )}

      {openField === "len" && (
        <div className="suggest" style={{ top: 74, left: 440, minWidth: 220 }}>
          {["1 month","3 months","6 months","12+ months"].map(v => (
            <div key={v} className="row" onClick={() => { update("length", v); setOpenField("type"); }}>
              <div className="ico"><Icon name="cal" size={20} /></div>
              <div><div className="t">{v}</div></div>
            </div>
          ))}
        </div>
      )}

      {openField === "type" && (
        <div className="suggest" style={{ top: 74, left: 580, minWidth: 240 }}>
          {[{k:"any",t:"Any property",i:"sparkle"},{k:"apartment",t:"Apartment",i:"building"},{k:"house",t:"House",i:"home"},{k:"room",t:"Room in home",i:"bed"}].map(o => (
            <div key={o.k} className="row" onClick={() => { update("type", o.k); setOpenField("who"); }}>
              <div className="ico"><Icon name={o.i} size={20} /></div>
              <div><div className="t">{o.t}</div></div>
            </div>
          ))}
        </div>
      )}

      {openField === "who" && (
        <div className="suggest" style={{ top: 74, left: 720, minWidth: 280, padding: 16 }}>
          <Counter label="Guests" sub="Total number of guests" value={state.guests || 0} onChange={(v) => update("guests", v)} />
        </div>
      )}

      {openField === "co" && (
        <div className="suggest" style={{ top: 74, right: 90, left: "auto", minWidth: 300, padding: 14 }}>
          <div style={{ fontSize: 12, color: "var(--ink-3)", marginBottom: 8, fontWeight: 600 }}>B2B quick path</div>
          <input
            value={state.company || ""}
            onChange={(e) => update("company", e.target.value)}
            placeholder="e.g. Volvo, Ericsson, Scania..."
            style={{
              width: "100%", padding: "12px 14px",
              border: "1px solid var(--border-strong)", borderRadius: 10,
              fontSize: 14, outline: "none", background: "var(--bg)", color: "var(--ink)"
            }}
          />
          <div style={{ fontSize: 11, color: "var(--ink-4)", marginTop: 8, lineHeight: 1.4 }}>
            Applies your company's negotiated rates and billing info.
          </div>
        </div>
      )}
    </div>
  );
};

const Counter = ({ label, sub, value, onChange }) => (
  <div style={{ display: "flex", alignItems: "center", padding: "12px 0", borderBottom: "1px solid var(--border)", gap: 12 }}>
    <div style={{ flex: 1 }}>
      <div style={{ fontWeight: 600, fontSize: 14 }}>{label}</div>
      <div style={{ fontSize: 12, color: "var(--ink-3)" }}>{sub}</div>
    </div>
    <button onClick={() => onChange(Math.max(0, value - 1))} style={btnRound}><Icon name="minus" size={14} /></button>
    <div style={{ width: 24, textAlign: "center", fontSize: 14 }}>{value}</div>
    <button onClick={() => onChange(value + 1)} style={btnRound}><Icon name="plus" size={14} /></button>
  </div>
);
const btnRound = {
  width: 30, height: 30, borderRadius: 999,
  border: "1px solid var(--border-strong)",
  background: "var(--bg)", color: "var(--ink)",
  cursor: "pointer", display: "grid", placeItems: "center"
};

// --- lightweight range date picker ---
const MONTHS = ["January","February","March","April","May","June","July","August","September","October","November","December"];
const DOW = ["Mo","Tu","We","Th","Fr","Sa","Su"];

const DatePicker = ({ top, left, start, end, picking, onPick }) => {
  const [anchor, setAnchor] = React.useState(() => { const d = new Date(); return { y: d.getFullYear(), m: d.getMonth() }; });
  const parseD = (s) => {
    if (!s) return null;
    // format MMM D  e.g. "May 12"
    const parts = s.split(" ");
    const m = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"].indexOf(parts[0]);
    if (m < 0) return null;
    const d = parseInt(parts[1], 10);
    return { y: new Date().getFullYear(), m, d };
  };
  const startD = parseD(start);
  const endD = parseD(end);
  const sameDay = (a, b) => a && b && a.y === b.y && a.m === b.m && a.d === b.d;
  const before = (a, b) => a.y < b.y || (a.y === b.y && (a.m < b.m || (a.m === b.m && a.d < b.d)));

  const renderMonth = (y, m) => {
    const first = new Date(y, m, 1);
    const daysInMonth = new Date(y, m + 1, 0).getDate();
    let offset = first.getDay() - 1; if (offset < 0) offset = 6;
    const cells = [];
    for (let i = 0; i < offset; i++) cells.push(null);
    for (let d = 1; d <= daysInMonth; d++) cells.push({ y, m, d });
    return cells;
  };

  const fmt = (c) => `${["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"][c.m]} ${c.d}`;

  const renderCells = (y, m) => {
    const cells = renderMonth(y, m);
    return cells.map((c, i) => {
      if (!c) return <div key={i}></div>;
      let cls = "day";
      if (startD && sameDay(c, startD)) cls += " start";
      if (endD && sameDay(c, endD)) cls += " end";
      if (startD && endD && before(startD, c) && before(c, endD)) cls += " range";
      return (
        <div key={i} className={cls} onClick={() => onPick(picking, fmt(c))}>{c.d}</div>
      );
    });
  };

  const nextMonth = (y, m) => ({ y: m === 11 ? y + 1 : y, m: m === 11 ? 0 : m + 1 });
  const n = nextMonth(anchor.y, anchor.m);

  return (
    <div className="dp" style={{ top, left }}>
      {[{...anchor, arrow: "l"}, {...n, arrow: "r"}].map((mo, i) => (
        <div key={i} className="dp-month">
          <div className="dp-head">
            {i === 0 ? <button onClick={() => setAnchor(a => ({ y: a.m === 0 ? a.y - 1 : a.y, m: a.m === 0 ? 11 : a.m - 1 }))}>‹</button> : <span style={{ width: 28 }}/>}
            <div>{MONTHS[mo.m]} {mo.y}</div>
            {i === 1 ? <button onClick={() => setAnchor(a => ({ y: a.m === 11 ? a.y + 1 : a.y, m: a.m === 11 ? 0 : a.m + 1 }))}>›</button> : <span style={{ width: 28 }}/>}
          </div>
          <div className="dp-grid">
            {DOW.map(d => <div key={d} className="dow">{d}</div>)}
            {renderCells(mo.y, mo.m)}
          </div>
        </div>
      ))}
    </div>
  );
};

Object.assign(window, { SearchPill, DatePicker });