// Search & booking widget
// Statik fallback — API hazır değilse kullanılır
const ANTALYA_LOCATIONS_FALLBACK = [
  { id: "ayt", type: "airport", name: "Antalya Havalimanı (AYT)", meta: "Terminal 1 & 2", code: "AYT" },
  { id: "lara", type: "hotel", name: "Lara Bölgesi", meta: "Antalya · 12 km", code: "LARA" },
  { id: "kemer", type: "city", name: "Kemer", meta: "Antalya · 55 km", code: "KMR" },
  { id: "belek", type: "city", name: "Belek", meta: "Antalya · 35 km", code: "BLK" },
  { id: "side", type: "city", name: "Side / Manavgat", meta: "Antalya · 65 km", code: "SDE" },
  { id: "alanya", type: "city", name: "Alanya", meta: "Antalya · 125 km", code: "ALA" },
  { id: "kalkan", type: "city", name: "Kalkan / Kaş", meta: "Antalya · 200 km", code: "KAL" },
  { id: "kaleici", type: "city", name: "Kaleiçi (Eski Şehir)", meta: "Antalya · 14 km", code: "KAL" },
];

// Lokasyonları API'den yükle, hata olursa fallback
function useLocations() {
  const [locations, setLocations] = React.useState(ANTALYA_LOCATIONS_FALLBACK);
  React.useEffect(() => {
    engApi.get("/api/location")
      .then(data => setLocations(data.map(mapLocation)))
      .catch(() => {}); // API yoksa fallback kullan
  }, []);
  return locations;
}

const SearchWidget = ({ lang, ccy, query, setQuery, onSearch, compact = false, dark = false }) => {
  const t = TRANSLATIONS[lang].search;
  const [openSuggest, setOpenSuggest] = React.useState(null);
  const locations = useLocations();

  const setField = (k, v) => setQuery(q => ({ ...q, [k]: v }));
  const setPax = (k, delta) => setQuery(q => ({ ...q, [k]: Math.max(k === "adults" ? 1 : 0, q[k] + delta) }));

  return (
    <div className={"search-widget" + (compact ? " compact" : "")}>
      <div className="trip-toggle">
        <button className={query.trip === "oneway" ? "active" : ""} onClick={() => setField("trip", "oneway")}>
          <Icon name="plane" size={14} style={{ verticalAlign: "middle", marginRight: 6 }}/> {t.oneway}
        </button>
        <button className={query.trip === "round" ? "active" : ""} onClick={() => setField("trip", "round")}>
          <Icon name="arrowRight" size={14} style={{ verticalAlign: "middle", marginRight: 6, transform: "rotate(90deg)" }}/> {t.roundtrip}
        </button>
        <button className={query.trip === "hourly" ? "active" : ""} onClick={() => setField("trip", "hourly")}>
          <Icon name="clock" size={14} style={{ verticalAlign: "middle", marginRight: 6 }}/> {t.hourly}
        </button>
      </div>

      <div className={"search-fields" + (query.trip === "round" ? " with-return" : "")}>
        <div className="field" onClick={() => setOpenSuggest(openSuggest === "from" ? null : "from")}>
          <span className="field-label">{t.from}</span>
          <span className="field-value">
            <Icon name="plane" size={16} style={{ color: "var(--blue)" }}/>
            {query.from ? (
              <>
                <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{query.from.name}</span>
                <span className="code">{query.from.code}</span>
              </>
            ) : <span className="placeholder">{t.fromPh}</span>}
          </span>
          {openSuggest === "from" && (
            <div className="suggest" onClick={e => e.stopPropagation()}>
              <div className="suggest-group">Havaalanı</div>
              {locations.filter(l => l.type === "airport").map(l => (
                <div key={l.id} className={"suggest-item airport"} onClick={() => { setField("from", l); setOpenSuggest(null); }}>
                  <div className="icon"><Icon name="plane" size={16}/></div>
                  <div><div className="name">{l.name}</div><div className="meta">{l.meta}</div></div>
                  <span className="badge">{l.code}</span>
                </div>
              ))}
              <div className="suggest-group">Bölgeler</div>
              {locations.filter(l => l.type !== "airport").map(l => (
                <div key={l.id} className="suggest-item" onClick={() => { setField("from", l); setOpenSuggest(null); }}>
                  <div className="icon"><Icon name="pin" size={16}/></div>
                  <div><div className="name">{l.name}</div><div className="meta">{l.meta}</div></div>
                </div>
              ))}
            </div>
          )}
        </div>

        <div className="field" onClick={() => setOpenSuggest(openSuggest === "to" ? null : "to")}>
          <span className="field-label">{t.to}</span>
          <span className="field-value">
            <Icon name="pin" size={16} style={{ color: "var(--red)" }}/>
            {query.to ? (
              <>
                <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{query.to.name}</span>
                <span className="code">{query.to.code}</span>
              </>
            ) : <span className="placeholder">{t.toPh}</span>}
          </span>
          {openSuggest === "to" && (
            <div className="suggest" onClick={e => e.stopPropagation()}>
              <div className="suggest-group">Popüler</div>
              {locations.filter(l => l.type !== "airport").map(l => (
                <div key={l.id} className="suggest-item" onClick={() => { setField("to", l); setOpenSuggest(null); }}>
                  <div className="icon"><Icon name="pin" size={16}/></div>
                  <div><div className="name">{l.name}</div><div className="meta">{l.meta}</div></div>
                </div>
              ))}
            </div>
          )}
        </div>

        <div className="field">
          <span className="field-label">{t.pickupDate}</span>
          <span className="field-value">
            <Icon name="calendar" size={16} style={{ color: "var(--blue)" }}/>
            <input type="date" value={query.pickupDate} onChange={e => setField("pickupDate", e.target.value)}/>
          </span>
        </div>

        {query.trip === "round" && (
          <div className="field">
            <span className="field-label">{t.returnDate}</span>
            <span className="field-value">
              <Icon name="calendar" size={16} style={{ color: "var(--red)" }}/>
              <input type="date" value={query.returnDate} onChange={e => setField("returnDate", e.target.value)}/>
            </span>
          </div>
        )}

        <div className="field">
          <span className="field-label">{t.pickupTime}</span>
          <span className="field-value">
            <Icon name="clock" size={16} style={{ color: "var(--blue)" }}/>
            <input type="time" value={query.pickupTime} onChange={e => setField("pickupTime", e.target.value)}/>
          </span>
        </div>

        <div className="field" onClick={() => setOpenSuggest(openSuggest === "pax" ? null : "pax")}>
          <span className="field-label">{t.pax}</span>
          <span className="field-value">
            <Icon name="users" size={16} style={{ color: "var(--blue)" }}/>
            <span>{query.adults} {t.adults.toLowerCase()}, {query.children} {t.children.toLowerCase()}</span>
          </span>
          {openSuggest === "pax" && (
            <div className="suggest" onClick={e => e.stopPropagation()} style={{ padding: 14 }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "10px 4px" }}>
                <div><div style={{ fontWeight: 600, fontSize: 14 }}>{t.adults}</div><div style={{ fontSize: 12, color: "var(--gray-500)" }}>12+ yaş</div></div>
                <div className="stepper">
                  <button onClick={() => setPax("adults", -1)}><Icon name="minus" size={12}/></button>
                  <span className="v">{query.adults}</span>
                  <button onClick={() => setPax("adults", 1)}><Icon name="plus" size={12}/></button>
                </div>
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "10px 4px", borderTop: "1px solid var(--gray-100)" }}>
                <div><div style={{ fontWeight: 600, fontSize: 14 }}>{t.children}</div><div style={{ fontSize: 12, color: "var(--gray-500)" }}>0–11 yaş</div></div>
                <div className="stepper">
                  <button onClick={() => setPax("children", -1)}><Icon name="minus" size={12}/></button>
                  <span className="v">{query.children}</span>
                  <button onClick={() => setPax("children", 1)}><Icon name="plus" size={12}/></button>
                </div>
              </div>
            </div>
          )}
        </div>

        <button className="field-cta" onClick={onSearch}>
          {t.search}
          <Icon name="arrowRight" size={16}/>
        </button>
      </div>
    </div>
  );
};

window.SearchWidget = SearchWidget;
window.ANTALYA_LOCATIONS = ANTALYA_LOCATIONS_FALLBACK;