/* search — the 3-tab Smart Search panel (Flights / Hotels / Tour Packages).
   Every control is controlled and writes into searchCtx so results pages,
   booking and Mr. Wing all consume the same query. */

/* shared airport / city picker (listbox with keyboard support) */
function AirportField({ label, value, onChange, exclude, mode }) {
  const { AIRPORTS } = useStore();
  const { t, lang } = useLang();
  const [open, setOpen] = React.useState(false);
  const [q, setQ] = React.useState("");
  const [active, setActive] = React.useState(0);
  const ref = React.useRef();
  const cur = (AIRPORTS || []).find(a => a.code === value);
  React.useEffect(() => {
    const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener("mousedown", h); return () => document.removeEventListener("mousedown", h);
  }, []);
  const list = (AIRPORTS || []).filter(a => a.code !== exclude &&
    (a.city.toLowerCase().includes(q.toLowerCase()) || a.code.toLowerCase().includes(q.toLowerCase()) || (a.ar && a.ar.includes(q))));
  const cityName = (a) => lang === "ar" ? a.ar : a.city;
  const choose = (a) => { onChange(a.code); setOpen(false); setQ(""); };
  const onKey = (e) => {
    if (!open) return;
    if (e.key === "ArrowDown") { e.preventDefault(); setActive(i => Math.min(list.length - 1, i + 1)); }
    else if (e.key === "ArrowUp") { e.preventDefault(); setActive(i => Math.max(0, i - 1)); }
    else if (e.key === "Enter") { e.preventDefault(); if (list[active]) choose(list[active]); }
    else if (e.key === "Escape") { setOpen(false); }
  };
  return (
    <div className="field" ref={ref} style={{ position: "relative" }}>
      <label id={"lbl-" + label}>{label}</label>
      <button type="button" onClick={() => { setOpen(o => !o); setActive(0); }} className="input"
        aria-haspopup="listbox" aria-expanded={open} aria-labelledby={"lbl-" + label}
        style={{ textAlign: "start", cursor: "pointer", display: "flex", alignItems: "baseline", gap: 8 }}>
        {mode === "city"
          ? <><span style={{ fontWeight: 700, fontSize: 16 }}>{cur ? cityName(cur) : t("search.selectCity")}</span><span className="muted" style={{ fontSize: 12.5 }}>{cur ? cur.code : ""}</span></>
          : <><span style={{ fontWeight: 700, fontSize: 17 }}>{cur ? cur.code : "—"}</span><span className="muted" style={{ fontSize: 13, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{cur ? cityName(cur) : t("search.selectCity")}</span></>}
      </button>
      {open && (
        <div className="card" id={"lb-" + label} role="listbox" aria-label={label} style={{ position: "absolute", top: "100%", marginTop: 8, insetInline: 0, zIndex: 40, padding: 8, boxShadow: "var(--shadow-lg)", maxHeight: 300, overflowY: "auto" }}>
          <input autoFocus className="input" role="combobox" aria-expanded="true" aria-controls={"lb-" + label} aria-activedescendant={list[active] ? "apt-opt-" + list[active].code : undefined} placeholder={t("search.from.ph")} value={q} onChange={e => { setQ(e.target.value); setActive(0); }} onKeyDown={onKey} style={{ marginBottom: 6 }} />
          {list.map((a, i) => (
            <button key={a.code} id={"apt-opt-" + a.code} type="button" role="option" aria-selected={i === active} onClick={() => choose(a)} onMouseEnter={() => setActive(i)}
              style={{ display: "flex", width: "100%", gap: 12, alignItems: "center", padding: "10px 12px", border: "none", background: i === active ? "var(--paper-2)" : "transparent", borderRadius: 10, cursor: "pointer", textAlign: "start" }}>
              <span style={{ fontWeight: 700, width: 42 }}>{a.code}</span>
              <span style={{ flex: 1 }}><div style={{ fontWeight: 600, fontSize: 14 }}>{cityName(a)}</div><div className="muted" style={{ fontSize: 12 }}>{a.name}</div></span>
            </button>
          ))}
          {list.length === 0 && <div className="muted" style={{ padding: "10px 12px", fontSize: 13 }}>—</div>}
        </div>
      )}
    </div>
  );
}

function SmartSearch({ compact }) {
  const { t, lang } = useLang();
  const { searchCtx, setSearchCtx, nav, PACKAGES } = useStore();
  const [tab, setTab] = React.useState(searchCtx.tab || "flights");
  const [s, setS] = React.useState(searchCtx);
  const upd = (k, v) => setS(p => ({ ...p, [k]: v }));

  const tabs = [
    { id: "flights", icon: "plane", label: t("search.flights") },
    { id: "hotels", icon: "hotel", label: t("search.hotels") },
    { id: "packages", icon: "spark", label: t("search.packages") },
  ];

  const go = () => {
    let ctx = { ...s, tab };
    if (tab === "packages") {
      const pkg = (PACKAGES || []).find(p => p.id === s.packageId) || (PACKAGES || [])[0];
      if (pkg) ctx = { ...ctx, packageId: pkg.id, destination: pkg.city };
    }
    setSearchCtx(ctx);
    nav(tab === "flights" ? "flights" : tab === "hotels" ? "hotels" : "packages");
  };

  return (
    <div className="card smart-search" style={{
      borderRadius: "var(--r-xl)", padding: compact ? 14 : 18, boxShadow: "var(--shadow-lg)",
      background: "rgba(255,255,255,.94)", backdropFilter: "blur(14px)", border: "1px solid rgba(255,255,255,.6)"
    }}>
      <div className="search-tabs" role="tablist" style={{ display: "flex", gap: 6, padding: 5, background: "var(--paper-2)", borderRadius: 100, width: "fit-content", marginBottom: 16 }}>
        {tabs.map(tb => (
          <button key={tb.id} role="tab" aria-selected={tab === tb.id} onClick={() => setTab(tb.id)}
            style={{
              display: "flex", alignItems: "center", gap: 8, padding: "9px 18px", borderRadius: 100, border: "none", cursor: "pointer",
              fontFamily: "var(--sans)", fontWeight: 600, fontSize: 14, transition: "all .2s",
              background: tab === tb.id ? "var(--emerald)" : "transparent",
              color: tab === tb.id ? "#fff" : "var(--ink-2)",
              boxShadow: tab === tb.id ? "0 4px 14px rgba(60,45,28,.25)" : "none"
            }}>
            <Icon name={tb.icon} size={17} stroke={1.8} /> {tb.label}
          </button>
        ))}
      </div>

      {tab === "flights" && (
        <div>
          <div style={{ display: "flex", gap: 6, marginBottom: 12 }}>
            {[["round", t("search.round")], ["oneway", t("search.oneway")]].map(([v, l]) => (
              <button key={v} onClick={() => upd("tripType", v)} type="button"
                style={{ padding: "6px 14px", borderRadius: 100, border: "1px solid " + (s.tripType === v ? "var(--emerald)" : "var(--line-2)"), background: s.tripType === v ? "var(--emerald-wash)" : "#fff", color: s.tripType === v ? "var(--emerald)" : "var(--ink-3)", fontWeight: 600, fontSize: 13, cursor: "pointer", fontFamily: "var(--sans)" }}>{l}</button>
            ))}
          </div>
          <div className="search-grid" style={{ display: "grid", gridTemplateColumns: s.tripType === "oneway" ? "1.1fr 1.1fr 1fr .9fr .9fr auto" : "1.1fr 1.1fr 1fr 1fr .9fr .9fr auto", gap: 12, alignItems: "end" }}>
            <AirportField label={t("search.from")} value={s.from} onChange={v => upd("from", v)} exclude={s.to} />
            <AirportField label={t("search.to")} value={s.to} onChange={v => { upd("to", v); upd("destination", v); }} exclude={s.from} />
            <div className="field"><label>{t("search.depart")}</label><input type="date" className="input" value={s.depart} onChange={e => upd("depart", e.target.value)} /></div>
            {s.tripType !== "oneway" && <div className="field"><label>{t("search.return")}</label><input type="date" className="input" value={s.ret} min={s.depart} onChange={e => upd("ret", e.target.value)} /></div>}
            <div className="field"><label>{t("search.cabin")}</label>
              <select className="select" value={s.cabin} onChange={e => upd("cabin", e.target.value)}>
                <option value="any">{t("cabin.any")}</option><option value="Economy">{t("cabin.economy")}</option><option value="Business">{t("cabin.business")}</option>
              </select>
            </div>
            <div className="field"><label>{t("search.travelers")}</label>
              <select className="select" value={s.travelers} onChange={e => upd("travelers", +e.target.value)}>
                {[1, 2, 3, 4, 5, 6].map(n => <option key={n} value={n}>{n} {t("search.adults")}</option>)}
              </select>
            </div>
            <button className="btn btn-primary btn-lg" onClick={go} style={{ height: 50 }}><Icon name="search" size={18} /> {t("search.cta")}</button>
          </div>
        </div>
      )}

      {tab === "hotels" && (
        <div className="search-grid" style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr 1fr 1fr auto", gap: 12, alignItems: "end" }}>
          <AirportField mode="city" label={t("search.destination")} value={s.destination} onChange={v => upd("destination", v)} />
          <div className="field"><label>{t("search.checkin")}</label><input type="date" className="input" value={s.depart} onChange={e => upd("depart", e.target.value)} /></div>
          <div className="field"><label>{t("search.checkout")}</label><input type="date" className="input" value={s.ret} min={s.depart} onChange={e => upd("ret", e.target.value)} /></div>
          <div className="field"><label>{t("search.guests")}</label>
            <select className="select" value={s.guests + "-" + s.rooms} onChange={e => { const [g, r] = e.target.value.split("-").map(Number); upd("guests", g); upd("rooms", r); }}>
              <option value="1-1">{t("search.guests1")}</option><option value="2-1">{t("search.guests2")}</option><option value="4-2">{t("search.guests4")}</option>
            </select>
          </div>
          <button className="btn btn-primary btn-lg" onClick={go} style={{ height: 50 }}><Icon name="search" size={18} /> {t("search.cta")}</button>
        </div>
      )}

      {tab === "packages" && (
        <div className="search-grid" style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr 1fr auto", gap: 12, alignItems: "end" }}>
          <div className="field"><label>{t("search.destination")}</label>
            <select className="select" value={s.packageId} onChange={e => upd("packageId", e.target.value)}>
              {(PACKAGES || []).map(p => <option key={p.id} value={p.id}>{loc(p, "name", lang)}</option>)}
            </select>
          </div>
          <div className="field"><label>{t("search.depart")}</label><input type="date" className="input" value={s.depart} onChange={e => upd("depart", e.target.value)} /></div>
          <div className="field"><label>{t("search.travelers")}</label>
            <select className="select" value={s.travelers} onChange={e => upd("travelers", +e.target.value)}>{[1, 2, 3, 4].map(n => <option key={n} value={n}>{t("search.travelersN", { n })}</option>)}</select>
          </div>
          <button className="btn btn-primary btn-lg" onClick={go} style={{ height: 50 }}><Icon name="search" size={18} /> {t("search.cta")}</button>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { SmartSearch, AirportField });