// Vertical hero search card (Journeo-style) + compact horizontal sticky variant.
// Fields: Stad, Kategori, Incheckning, Utcheckning, Antal gäster. v9

const L = {
  sv: {
    title: "Hitta din bostad",
    city: "Stad", cityPh: "t.ex. Stockholm, Göteborg, Malmö",
    cat: "Kategori", catPh: "Välj typ",
    checkIn: "Incheckning", checkOut: "Utcheckning",
    guests: "Antal gäster", guestsUnit: (n) => `${n} gäst${n === 1 ? "" : "er"}`,
    guestsCombo: (a, c) => `${a} vuxen${a === 1 ? "" : "a"}${c ? `, ${c} barn` : ""}`,
    search: "Sök bostad",
    tabs: [{ k: "long", label: "Långtid" }, { k: "short", label: "Korttid" }, { k: "company", label: "Företag" }],
    dateDefault: "Lägg till datum",
    citySearchPh: "Sök stad",
    popularCities: "Populära destinationer",
    adults: "Vuxna", adultsSub: "13 år och äldre",
    children: "Barn", childrenSub: "Yngre än 13 år",
    infants: "Spädbarn", infantsSub: "Under 2 år",
    pets: "Husdjur", petsSub: "Tar du med djur?",
    done: "Klar", clear: "Rensa",
  },
  en: {
    title: "Find your stay",
    city: "City", cityPh: "e.g. Stockholm, Gothenburg, Malmö",
    cat: "Category", catPh: "Choose type",
    checkIn: "Check-in", checkOut: "Check-out",
    guests: "Guests", guestsUnit: (n) => `${n} guest${n === 1 ? "" : "s"}`,
    guestsCombo: (a, c) => `${a} adult${a === 1 ? "" : "s"}${c ? `, ${c} child${c === 1 ? "" : "ren"}` : ""}`,
    search: "Search stays",
    tabs: [{ k: "long", label: "Long-term" }, { k: "short", label: "Short-term" }, { k: "company", label: "Company" }],
    dateDefault: "Add date",
    citySearchPh: "Search city",
    popularCities: "Popular destinations",
    adults: "Adults", adultsSub: "Ages 13+",
    children: "Children", childrenSub: "Under 13",
    infants: "Infants", infantsSub: "Under 2",
    pets: "Pets", petsSub: "Bringing a service animal?",
    done: "Done", clear: "Clear",
  },
};

const CAT_OPTIONS = [
  { k: "any",       sv: "Alla bostäder",         en: "All homes",          sub_sv: "Visa alla typer",           sub_en: "Show all types",          i: "sparkle"  },
  { k: "apartment", sv: "Möblerade lägenheter",   en: "Furnished apartments", sub_sv: "Fullt möblerade lägenheter", sub_en: "Fully furnished apartments", i: "building" },
  { k: "room",      sv: "Boenderum",              en: "Guest rooms",        sub_sv: "Rum i delad bostad",        sub_en: "Room in shared home",     i: "bed"      },
  { k: "hotel",     sv: "Lägenhetshotell",         en: "Apartment hotel",    sub_sv: "Hotelliknande med kök",     sub_en: "Hotel-style with kitchen", i: "key"      },
];

// ---- Shared field button ----
const FieldRow = ({ label, value, placeholder, icon, onClick, active }) => (
  <button className={"sp-field " + (active ? "is-active" : "")} onClick={onClick} type="button">
    <div className="sp-field-label">{label}</div>
    <div className="sp-field-val">
      {icon && <Icon name={icon} size={16} />}
      <span className={value ? "filled" : "ph"}>{value || placeholder}</span>
    </div>
  </button>
);

// ---- Tabs at top of card ----
const SearchTabs = ({ value, onChange, tabs }) => (
  <div className="sp-tabs" role="tablist">
    {tabs.map(t => (
      <button
        key={t.k}
        role="tab"
        aria-selected={value === t.k}
        className={"sp-tab " + (value === t.k ? "on" : "")}
        onClick={() => onChange(t.k)}
        type="button"
      >{t.label}</button>
    ))}
  </div>
);

// ---- City popup content ----
const CityPopup = ({ lang, selected, onPick, l }) => {
  const [q, setQ] = React.useState("");
  const cities = window.SLS_DATA.cities;
  const filtered = q
    ? cities.filter(c => c.name.toLowerCase().includes(q.toLowerCase()))
    : cities;
  return (
    <div className="sp-pop" onMouseDown={(e) => e.stopPropagation()}>
      <div className="sp-pop-search">
        <Icon name="search" size={14} />
        <input
          type="text"
          placeholder={l.citySearchPh}
          value={q}
          onChange={(e) => setQ(e.target.value)}
        />
      </div>
      <div className="sp-pop-section-label">{l.popularCities}</div>
      {filtered.map(c => (
        <div
          key={c.name}
          className={"sp-pop-row " + (selected === c.name ? "is-active" : "")}
          onClick={() => onPick(c.name)}
        >
          <div className="sp-pop-icon"><Icon name="pin" size={16} /></div>
          <div style={{ flex: 1 }}>
            <div className="t">{c.name}</div>
            <div className="s">{c.sub}</div>
          </div>
          {selected === c.name && <Icon name="check" size={16} />}
        </div>
      ))}
      {filtered.length === 0 && (
        <div style={{ padding: "20px 12px", fontSize: 13, color: "var(--ink-3)", textAlign: "center" }}>
          No cities match "{q}"
        </div>
      )}
    </div>
  );
};

// ---- Category popup content ----
const CatPopup = ({ lang, selected, onPick }) => (
  <div className="sp-pop sp-pop-cat" onMouseDown={(e) => e.stopPropagation()}>
    {CAT_OPTIONS.map(o => (
      <div
        key={o.k}
        className={"sp-pop-row " + (selected === o.k ? "is-active" : "")}
        onClick={() => onPick(o.k)}
      >
        <div className="sp-pop-icon"><Icon name={o.i} size={16} /></div>
        <div style={{ flex: 1 }}>
          <div className="t">{lang === "sv" ? o.sv : o.en}</div>
          <div className="s">{lang === "sv" ? o.sub_sv : o.sub_en}</div>
        </div>
        {selected === o.k && <Icon name="check" size={16} />}
      </div>
    ))}
  </div>
);

// ---- Guests popup content ----
const GuestsPopup = ({ lang, state, update, onDone, l }) => (
  <div className="sp-pop sp-pop-guests" onMouseDown={(e) => e.stopPropagation()}>
    <Counter label={l.guests} sub={lang === "sv" ? "Antal gäster totalt" : "Total number of guests"} value={state.guests || 0} onChange={(v) => update("guests", v)} min={1} />
    <div className="sp-pop-foot">
      <button className="sp-pop-clear" type="button" onClick={() => update("guests", 0)}>{l.clear}</button>
      <button className="sp-pop-done" type="button" onClick={onDone}>{l.done}</button>
    </div>
  </div>
);

const ADVANCED_AMENITIES = [
  { k: "wifi",      sv: "Wi-Fi",           en: "Wi-Fi",          icon: "wifi",    tag: /wi-?fi/i },
  { k: "parking",   sv: "Parkering",       en: "Parking",        icon: "parking", tag: /parkering/i },
  { k: "gym",       sv: "Gym",             en: "Gym",            icon: "gym",     tag: /gym|fitness/i },
  { k: "tv",        sv: "TV",              en: "TV",             icon: "tv",      tag: /\btv\b|smart.?tv/i },
  { k: "washer",    sv: "Tvättmaskin",     en: "Washer",         icon: "washer",  tag: /tvättmaskin/i },
  { k: "kitchen",   sv: "Kök",             en: "Kitchen",        icon: "kitchen", tag: /kök|kitchen/i },
  { k: "pets",      sv: "Djurvänlig",      en: "Pet-friendly",   icon: "paw",     tag: /husdjur|pet/i },
];

// ---- Vertical hero search card ----
const SearchPanel = ({ state, setState, onSearch, lang = "en" }) => {
  const l = L[lang] || L.en;
  const [open, setOpen] = React.useState(null); // 'city' | 'cat' | 'date' | 'guests'
  const [advOpen, setAdvOpen] = React.useState(false);
  const ref = React.useRef(null);

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

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

  const catLabel = (() => {
    const opt = CAT_OPTIONS.find(o => o.k === (state.type || "any"));
    if (!opt || opt.k === "any") return "";
    return lang === "sv" ? opt.sv : opt.en;
  })();

  const guestsLabel = (() => {
    const a = state.guests || 0;
    if (!a) return "";
    return l.guestsUnit(a);
  })();

  return (
    <div ref={ref} className="sp-card">
      <div className="sp-title">{l.title}</div>

      <div className="sp-body">
        <div className="sp-field-slot">
          <FieldRow
            label={l.city}
            value={state.where}
            placeholder={l.cityPh}
            icon="pin"
            active={open === "city"}
            onClick={() => setOpen(open === "city" ? null : "city")}
          />
          {open === "city" && (
            <CityPopup
              lang={lang}
              l={l}
              selected={state.where}
              onPick={(name) => { update("where", name); setOpen("cat"); }}
            />
          )}
        </div>

        <div className="sp-field-slot">
          <FieldRow
            label={l.cat}
            value={catLabel}
            placeholder={l.catPh}
            icon="building"
            active={open === "cat"}
            onClick={() => setOpen(open === "cat" ? null : "cat")}
          />
          {open === "cat" && (
            <CatPopup
              lang={lang}
              selected={state.type || "any"}
              onPick={(k) => { update("type", k); setOpen("date"); }}
            />
          )}
        </div>

        <div className="sp-field-slot">
          <div className="sp-field-pair">
            <button
              className={"sp-field sp-field-half " + (open === "date" ? "is-active" : "")}
              type="button"
              onClick={() => setOpen(open === "date" ? null : "date")}
            >
              <div className="sp-field-label">{l.checkIn}</div>
              <div className="sp-field-val">
                <Icon name="cal" size={16} />
                <span className={state.checkIn ? "filled" : "ph"}>{state.checkIn || l.dateDefault}</span>
              </div>
            </button>
            <button
              className={"sp-field sp-field-half " + (open === "date" ? "is-active" : "")}
              type="button"
              onClick={() => setOpen(open === "date" ? null : "date")}
            >
              <div className="sp-field-label">{l.checkOut}</div>
              <div className="sp-field-val">
                <Icon name="cal" size={16} />
                <span className={state.checkOut ? "filled" : "ph"}>{state.checkOut || l.dateDefault}</span>
              </div>
            </button>
          </div>
          {open === "date" && (
            <div className="sp-pop sp-pop-dates" onMouseDown={(e) => e.stopPropagation()}>
              <InlineDateRange
                start={state.checkIn}
                end={state.checkOut}
                onPick={(which, date) => {
                  update(which === "in" ? "checkIn" : "checkOut", date);
                }}
                onDone={() => setOpen("guests")}
                lang={lang}
              />
            </div>
          )}
        </div>

        <div className="sp-field-slot">
          <FieldRow
            label={l.guests}
            value={guestsLabel}
            placeholder={lang === "sv" ? "Lägg till gäster" : "Add guests"}
            icon="user"
            active={open === "guests"}
            onClick={() => setOpen(open === "guests" ? null : "guests")}
          />
          {open === "guests" && (
            <GuestsPopup
              lang={lang}
              l={l}
              state={state}
              update={update}
              onDone={() => setOpen(null)}
            />
          )}
        </div>

        <button className="sp-submit" type="button" onClick={onSearch}>
          <Icon name="search" size={16} stroke={2.2} />
          <span>{l.search}</span>
        </button>

        {/* Advanced search — subtle toggle below submit */}
        <button
          className={"sp-adv-toggle" + (advOpen ? " open" : "")}
          type="button"
          onClick={() => setAdvOpen(o => !o)}
          aria-expanded={advOpen}
        >
          <span>{lang === "sv" ? "AVANCERAD SÖKNING" : "ADVANCED SEARCH"}</span>
          <Icon name="chev-down" size={12} />
        </button>

        <div className={"sp-adv-badges" + (advOpen ? " open" : "")}>
          {ADVANCED_AMENITIES.map(a => {
            const checked = (state.amenities || []).includes(a.k);
            return (
              <button
                key={a.k}
                type="button"
                className={"sp-adv-badge" + (checked ? " active" : "")}
                onClick={() => {
                  const cur = state.amenities || [];
                  update("amenities", checked ? cur.filter(x => x !== a.k) : [...cur, a.k]);
                }}
                aria-pressed={checked}
                aria-label={lang === "sv" ? a.sv : a.en}
                tabIndex={advOpen ? 0 : -1}
              >
                <Icon name={a.icon} size={17} />
                <span className="sp-adv-tip">{lang === "sv" ? a.sv : a.en}</span>
              </button>
            );
          })}
        </div>
      </div>
    </div>
  );
};

// ---- Compact horizontal sticky variant ----
// Uses div+role="button" to avoid nesting buttons (popovers are descendants).
const StickyField = ({ label, value, active, ph, onClick, popup, wide }) => (
  <div className="sps-field-wrap" style={{ flex: wide ? 2 : 1 }}>
    <div
      className={"sps-field " + (active ? "is-active" : "")}
      role="button"
      tabIndex={0}
      onClick={onClick}
      onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onClick(); } }}
    >
      <div className="sps-lbl">{label}</div>
      <div className={"sps-val " + (value ? "" : "ph")}>{value || ph}</div>
    </div>
    {active && popup}
  </div>
);

const SearchBarSticky = ({ state, setState, onSearch, lang = "en", visible, embedded }) => {
  const l = L[lang] || L.en;
  const [open, setOpen] = React.useState(null);
  const ref = React.useRef(null);

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

  const update = (k, v) => setState(s => ({ ...s, [k]: v }));
  const catLabel = (() => {
    const opt = CAT_OPTIONS.find(o => o.k === (state.type || "any"));
    if (!opt || opt.k === "any") return lang === "sv" ? "Alla" : "Any";
    return lang === "sv" ? opt.sv : opt.en;
  })();
  const guestsShort = (() => {
    const a = state.guests || 0;
    if (!a) return "";
    return `${a} ${lang === "sv" ? (a === 1 ? "gäst" : "gäster") : (a === 1 ? "guest" : "guests")}`;
  })();

  const fields = (
    <>
      <StickyField
        label={l.city}
        value={state.where}
        ph={lang === "sv" ? "Vart?" : "Where?"}
        active={open === "city"}
        onClick={() => setOpen(open === "city" ? null : "city")}
        popup={<CityPopup lang={lang} l={l} selected={state.where} onPick={(name) => { update("where", name); setOpen(null); }} />}
      />
      <div className="sps-sep" />
      <StickyField
        label={l.cat}
        value={(state.type && state.type !== "any") ? catLabel : ""}
        ph={catLabel}
        active={open === "cat"}
        onClick={() => setOpen(open === "cat" ? null : "cat")}
        popup={<CatPopup lang={lang} selected={state.type || "any"} onPick={(k) => { update("type", k); setOpen(null); }} />}
      />
      <div className="sps-sep" />
      <StickyField
        wide
        label={`${l.checkIn} — ${l.checkOut}`}
        value={(state.checkIn || state.checkOut) ? `${state.checkIn || l.dateDefault} — ${state.checkOut || l.dateDefault}` : ""}
        ph={`${l.dateDefault} — ${l.dateDefault}`}
        active={open === "date"}
        onClick={() => setOpen(open === "date" ? null : "date")}
        popup={
          <div className="sp-pop sps-pop sps-pop-wide" onMouseDown={(e) => e.stopPropagation()}>
            <InlineDateRange
              start={state.checkIn}
              end={state.checkOut}
              onPick={(which, date) => update(which === "in" ? "checkIn" : "checkOut", date)}
              onDone={() => setOpen(null)}
              lang={lang}
            />
          </div>
        }
      />
      <div className="sps-sep" />
      <StickyField
        label={l.guests}
        value={guestsShort}
        ph={lang === "sv" ? "Lägg till" : "Add"}
        active={open === "guests"}
        onClick={() => setOpen(open === "guests" ? null : "guests")}
        popup={<GuestsPopup lang={lang} l={l} state={state} update={update} onDone={() => setOpen(null)} />}
      />
      <button className="sps-submit" type="button" onClick={onSearch} aria-label={l.search}>
        <Icon name="search" size={16} stroke={2.2} />
      </button>
    </>
  );

  if (embedded) {
    return <div ref={ref} className="nav-search-bar">{fields}</div>;
  }

  return (
    <div ref={ref} className={"sp-sticky " + (visible ? "show" : "")} aria-hidden={!visible} style={visible ? {opacity: 1, transform: 'translateY(0)', pointerEvents: 'auto'} : {opacity: 0, transform: 'translateY(-12px)', pointerEvents: 'none'}}>
      <div className="sp-sticky-inner">
        {fields}
      </div>
    </div>
  );
};

// ---- Inline date range picker (two-month, simplified) ----
const InlineDateRange = ({ start, end, onPick, onDone, lang = "en" }) => {
  const [picking, setPicking] = React.useState(start && !end ? "out" : "in");
  const [anchor, setAnchor] = React.useState(() => { const d = new Date(); return { y: d.getFullYear(), m: d.getMonth() }; });

  const MON_FULL = ["January","February","March","April","May","June","July","August","September","October","November","December"];
  const MON_FULL_SV = ["Januari","Februari","Mars","April","Maj","Juni","Juli","Augusti","September","Oktober","November","December"];
  const MON_ABBR = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
  const DOW = ["Mo","Tu","We","Th","Fr","Sa","Su"];
  const monFull = lang === "sv" ? MON_FULL_SV : MON_FULL;

  const parseD = (s) => {
    if (!s) return null;
    const parts = s.split(" "); const m = MON_ABBR.indexOf(parts[0]);
    if (m < 0) return null;
    return { y: new Date().getFullYear(), m, d: parseInt(parts[1], 10) };
  };
  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 fmt = (c) => `${MON_ABBR[c.m]} ${c.d}`;

  const startD = parseD(start), endD = parseD(end);

  const renderMonth = (y, m) => {
    const daysInMonth = new Date(y, m + 1, 0).getDate();
    let offset = new Date(y, m, 1).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 pick = (c) => {
    if (picking === "in") {
      onPick("in", fmt(c));
      if (endD && before(c, endD) === false && !sameDay(c, endD)) onPick("out", "");
      setPicking("out");
    } else {
      if (startD && before(c, startD)) {
        onPick("in", fmt(c));
        onPick("out", "");
        setPicking("out");
      } else {
        onPick("out", fmt(c));
        if (onDone) setTimeout(onDone, 200);
      }
    }
  };

  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={() => pick(c)}>{c.d}</div>;
    });
  };

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

  return (
    <div className="idp">
      <div className="idp-top">
        <div className="idp-tabs">
          <button className={picking === "in" ? "on" : ""} onClick={() => setPicking("in")}>
            {lang === "sv" ? "Incheckning" : "Check-in"}
          </button>
          <button className={picking === "out" ? "on" : ""} onClick={() => setPicking("out")}>
            {lang === "sv" ? "Utcheckning" : "Check-out"}
          </button>
        </div>
        {(start || end) && (
          <button className="idp-clear" onClick={() => { onPick("in", ""); onPick("out", ""); setPicking("in"); }}>
            {lang === "sv" ? "Rensa" : "Clear"}
          </button>
        )}
      </div>
      <div className="idp-grid-wrap">
        {[anchor, n].map((mo, i) => (
          <div key={i} className="idp-month">
            <div className="idp-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: 26 }}/>}
              <div>{monFull[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: 26 }}/>}
            </div>
            <div className="idp-grid">
              {DOW.map(d => <div key={d} className="dow">{d}</div>)}
              {renderCells(mo.y, mo.m)}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

const Counter = ({ label, sub, value, onChange, min = 0 }) => (
  <div className="sp-counter">
    <div className="sp-counter-txt">
      <div className="sp-counter-lbl">{label}</div>
      <div className="sp-counter-sub">{sub}</div>
    </div>
    <button onClick={() => onChange(Math.max(min, value - 1))} className="ctr-btn" type="button" disabled={value <= min}>–</button>
    <div className="sp-counter-val">{value}</div>
    <button onClick={() => onChange(value + 1)} className="ctr-btn" type="button">+</button>
  </div>
);

Object.assign(window, { SearchPanel, SearchBarSticky });