// ============================================================================
// vk-booking.jsx — booking modal (anketa): date, party size, contact details,
// live total in € · лв, sends the lead to Telegram. 7 languages, theme-aware.
// ============================================================================
const { VK: KB, t: TB0, toEur: EUB, sendLeadToTelegram: SENDB, Angular: AB3, MonoTag: MB3 } = window;

const TXB = {
  bk_title:   { ru: "Бронирование", en: "Booking", de: "Buchung", pl: "Rezerwacja", he: "הזמנה", bg: "Резервация", cs: "Rezervace" },
  bk_date:    { ru: "Дата", en: "Date", de: "Datum", pl: "Data", he: "תאריך", bg: "Дата", cs: "Datum" },
  bk_from:    { ru: "С даты", en: "From", de: "Ab", pl: "Od", he: "מתאריך", bg: "От дата", cs: "Od" },
  bk_adults:  { ru: "Взрослые", en: "Adults", de: "Erwachsene", pl: "Dorośli", he: "מבוגרים", bg: "Възрастни", cs: "Dospělí" },
  bk_children:{ ru: "Дети", en: "Children", de: "Kinder", pl: "Dzieci", he: "ילדים", bg: "Деца", cs: "Děti" },
  bk_days:    { ru: "Суток", en: "Days", de: "Tage", pl: "Dni", he: "ימים", bg: "Дни", cs: "Dnů" },
  bk_hotel:   { ru: "Отель / адрес", en: "Hotel / address", de: "Hotel / Adresse", pl: "Hotel / adres", he: "מלון / כתובת", bg: "Хотел / адрес", cs: "Hotel / adresa" },
  bk_note:    { ru: "Комментарий", en: "Note", de: "Anmerkung", pl: "Uwagi", he: "הערה", bg: "Коментар", cs: "Poznámka" },
  bk_total:   { ru: "Итого", en: "Total", de: "Gesamt", pl: "Razem", he: "סה״כ", bg: "Общо", cs: "Celkem" },
  bk_pay:     { ru: "Оплата на месте или картой после подтверждения мест.", en: "Pay on site or by card once seats are confirmed.", de: "Zahlung vor Ort oder per Karte nach Bestätigung der Plätze.", pl: "Płatność na miejscu lub kartą po potwierdzeniu miejsc.", he: "תשלום במקום או בכרטיס לאחר אישור המקומות.", bg: "Плащане на място или с карта след потвърждение на местата.", cs: "Platba na místě nebo kartou po potvrzení míst." },
  bk_success: { ru: "Бронь отправлена!", en: "Booking sent!", de: "Buchung gesendet!", pl: "Rezerwacja wysłana!", he: "ההזמנה נשלחה!", bg: "Резервацията е изпратена!", cs: "Rezervace odeslána!" },
  bk_success_msg: { ru: "Мы свяжемся с вами в течение 15 минут в рабочее время, чтобы подтвердить места.", en: "We'll contact you within 15 minutes during working hours to confirm.", de: "Wir melden uns innerhalb von 15 Minuten (Geschäftszeiten) zur Bestätigung.", pl: "Skontaktujemy się w ciągu 15 minut w godzinach pracy, aby potwierdzić.", he: "ניצור קשר תוך 15 דקות בשעות הפעילות לאישור.", bg: "Ще се свържем с вас до 15 минути в работно време за потвърждение.", cs: "Ozveme se do 15 minut v pracovní době pro potvrzení." },
  bk_close:   { ru: "Закрыть", en: "Close", de: "Schließen", pl: "Zamknij", he: "סגירה", bg: "Затвори", cs: "Zavřít" },
};
function tb(lang, k) { const e2 = TXB[k]; if (!e2) return k; return e2[lang] || e2.en || k; }

function BkField({ label, children }) {
  return (
    <label style={{ display: "flex", flexDirection: "column", gap: 6, flex: 1, minWidth: 130 }}>
      <span style={{ fontFamily: KB.MONO, fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase", color: KB.faint }}>{label}</span>
      {children}
    </label>
  );
}
const bkInputStyle = () => ({
  background: KB.panel2, border: `1px solid ${KB.line}`, color: KB.ink, padding: "11px 12px",
  fontFamily: KB.BODY, fontSize: 14.5, outline: "none", width: "100%", boxSizing: "border-box", borderRadius: 0,
});

function BkStepper({ val, set, min = 0, max = 30 }) {
  const b = (txt, on) => (
    <button onClick={on} type="button" style={{ width: 38, height: 42, flexShrink: 0, cursor: "pointer", background: KB.panel2,
      border: `1px solid ${KB.line}`, color: KB.ink, fontFamily: KB.HEAD, fontWeight: 800, fontSize: 17 }}>{txt}</button>
  );
  return (
    <div style={{ display: "flex", gap: 1 }}>
      {b("−", () => set(Math.max(min, val - 1)))}
      <div style={{ flex: 1, height: 42, display: "flex", alignItems: "center", justifyContent: "center", background: KB.panel2,
        border: `1px solid ${KB.line}`, fontFamily: KB.HEAD, fontWeight: 800, fontSize: 16, color: KB.ink, minWidth: 40 }}>{val}</div>
      {b("+", () => set(Math.min(max, val + 1)))}
    </div>
  );
}

function BookingModal({ booking, lang, onClose }) {
  if (!booking) return null;
  const isExc = booking.type === "exc";
  const item = isExc ? window.VEXC.find((x) => x.id === booking.id) : window.VCARS.find((x) => x.id === booking.id);
  if (!item) return null;

  const today = new Date().toISOString().slice(0, 10);
  const [date, setDate] = window.uS("");
  const [adults, setAdults] = window.uS(2);
  const [children, setChildren] = window.uS(0);
  const [days, setDays] = window.uS(3);
  const [form, setForm] = window.uS({ name: "", phone: "", hotel: "", note: "" });
  const [stage, setStage] = window.uS("form"); // form | sending | done | error

  window.uE(() => {
    const onKey = (ev) => { if (ev.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = prev; };
  }, []);

  const title = isExc ? item.title[lang] : item.name;
  const hasPrice = item.price != null;
  const childPrice = item.priceChild != null ? item.priceChild : item.price;
  const totalLv = !hasPrice ? null : (isExc ? adults * item.price + children * childPrice : days * item.price);
  const valid = form.name.trim() && form.phone.trim().length >= 6 && (isExc ? date : true);

  const submit = async () => {
    if (!valid || stage === "sending") return;
    setStage("sending");
    const head = isExc ? "🟠 НОВАЯ БРОНЬ · ЭКСКУРСИЯ" : "🚗 НОВАЯ БРОНЬ · АРЕНДА АВТО";
    const lines = [
      head, "",
      `🎫 ${isExc ? item.title.ru : item.name} (${item.code})`,
      isExc ? `— Дата: ${date}` : `— С даты: ${date || "не указана"} · Суток: ${days}`,
      isExc ? `— Взрослые: ${adults} · Дети: ${children}` : null,
      `— Итого: ${hasPrice ? `€${EUB(totalLv)} · ${totalLv} лв` : "по запросу"}`,
      `— Имя: ${form.name}`,
      `— Контакт: ${form.phone}`,
      form.hotel.trim() ? `— Отель: ${form.hotel}` : null,
      form.note.trim() ? `— Комментарий: ${form.note}` : null,
      `— Язык сайта: ${lang.toUpperCase()}`,
      `— Время: ${new Date().toLocaleString("ru-RU", { timeZone: "Europe/Sofia" })}`,
    ].filter(Boolean);
    const res = await SENDB(lines.join("\n"));
    setStage(res.ok || res.reason === "no-chat-id" ? "done" : "error");
  };

  return (
    <div style={{ position: "fixed", inset: 0, zIndex: 100, display: "flex", alignItems: "center", justifyContent: "center", padding: 16 }}>
      <div onClick={onClose} style={{ position: "absolute", inset: 0, background: KB.scrim, backdropFilter: "blur(4px)" }} />
      <div style={{ position: "relative", width: "min(560px, 100%)", maxHeight: "92vh", overflowY: "auto", background: KB.panel,
        border: `1px solid ${KB.line}`, padding: "clamp(20px,4vw,32px)", boxShadow: "0 30px 80px rgba(0,0,0,0.45)" }}>

        <button onClick={onClose} aria-label={tb(lang, "bk_close")} style={{ position: "absolute", top: 14, insetInlineEnd: 14, width: 36, height: 36,
          background: "none", border: `1px solid ${KB.line}`, color: KB.sub, cursor: "pointer", fontSize: 15, lineHeight: 1 }}>✕</button>

        {stage === "done" ? (
          <div style={{ textAlign: "center", padding: "36px 10px" }}>
            <div style={{ width: 58, height: 58, margin: "0 auto 18px", borderRadius: "50%", background: KB.coral, display: "flex", alignItems: "center", justifyContent: "center", color: "#fff", fontSize: 26 }}>✓</div>
            <div style={{ fontFamily: KB.HEAD, fontWeight: 800, fontSize: 24, color: KB.ink, marginBottom: 8 }}>{tb(lang, "bk_success")}</div>
            <p style={{ fontFamily: KB.BODY, fontSize: 14, color: KB.sub, maxWidth: 320, margin: "0 auto 22px" }}>{form.name.split(" ")[0]}, {tb(lang, "bk_success_msg")}</p>
            <AB3 variant="coral" onClick={onClose}>{tb(lang, "bk_close")}</AB3>
          </div>
        ) : (
          <>
            <div style={{ marginBottom: 6 }}><MB3 accent>{tb(lang, "bk_title")} · {item.code}</MB3></div>
            <h3 style={{ fontFamily: KB.HEAD, fontWeight: 800, fontSize: "clamp(22px,3vw,28px)", color: KB.ink, margin: "12px 0 4px", letterSpacing: "-0.01em" }}>{title}</h3>
            {isExc && <div style={{ fontFamily: KB.MONO, fontSize: 11.5, color: KB.faint, marginBottom: 18 }}>{item.time} · {item.place[lang]}</div>}
            {!isExc && <div style={{ fontFamily: KB.MONO, fontSize: 11.5, color: KB.faint, marginBottom: 18 }}>{item.cls} · {item.seats} ⊹ · {item.trans} · {item.fuel}</div>}

            <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginBottom: 14 }}>
              <BkField label={isExc ? tb(lang, "bk_date") : tb(lang, "bk_from")}>
                <input type="date" min={today} value={date} onChange={(ev) => setDate(ev.target.value)} style={{ ...bkInputStyle(), colorScheme: window.__dtTheme === "dark" ? "dark" : "light", height: 42 }} />
              </BkField>
              {isExc ? (
                <>
                  <BkField label={tb(lang, "bk_adults")}><BkStepper val={adults} set={setAdults} min={1} max={30} /></BkField>
                  <BkField label={tb(lang, "bk_children")}><BkStepper val={children} set={setChildren} min={0} max={30} /></BkField>
                </>
              ) : (
                <BkField label={tb(lang, "bk_days")}><BkStepper val={days} set={setDays} min={1} max={60} /></BkField>
              )}
            </div>

            <div style={{ display: "flex", flexDirection: "column", gap: 12, marginBottom: 14 }}>
              <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
                <BkField label={TB0(lang, "ph_name")}><input value={form.name} onChange={(ev) => setForm({ ...form, name: ev.target.value })} style={bkInputStyle()} /></BkField>
                <BkField label={TB0(lang, "ph_phone")}><input value={form.phone} onChange={(ev) => setForm({ ...form, phone: ev.target.value })} style={bkInputStyle()} /></BkField>
              </div>
              <BkField label={tb(lang, "bk_hotel")}><input value={form.hotel} onChange={(ev) => setForm({ ...form, hotel: ev.target.value })} style={bkInputStyle()} /></BkField>
              <BkField label={tb(lang, "bk_note")}><textarea rows={2} value={form.note} onChange={(ev) => setForm({ ...form, note: ev.target.value })} style={{ ...bkInputStyle(), resize: "vertical" }} /></BkField>
            </div>

            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12, flexWrap: "wrap", borderTop: `1px solid ${KB.line}`, paddingTop: 16 }}>
              <div>
                <div style={{ fontFamily: KB.MONO, fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase", color: KB.faint }}>{tb(lang, "bk_total")}</div>
                {hasPrice ? (
                  <div style={{ fontFamily: KB.HEAD, fontWeight: 800, fontSize: 26, color: KB.ink }}>€{EUB(totalLv)} <span style={{ fontFamily: KB.MONO, fontSize: 13, fontWeight: 500, color: KB.faint }}>· {totalLv} лв</span></div>
                ) : (
                  <div style={{ fontFamily: KB.HEAD, fontWeight: 800, fontSize: 19, color: KB.coral }}>{TB0(lang, "price_check")}</div>
                )}
              </div>
              <AB3 variant={valid && stage !== "sending" ? "coral" : "ghost"} size="lg" onClick={submit}
                style={{ opacity: valid && stage !== "sending" ? 1 : 0.5, cursor: valid && stage !== "sending" ? "pointer" : "not-allowed" }}>
                {stage === "sending" ? "…" : TB0(lang, "book")}
              </AB3>
            </div>
            {stage === "error" && <p style={{ fontFamily: KB.MONO, fontSize: 11, color: KB.coral, marginTop: 12 }}>{TB0(lang, "send_err")}</p>}
            <p style={{ fontFamily: KB.MONO, fontSize: 10, color: KB.faint, letterSpacing: "0.03em", marginTop: 14, lineHeight: 1.5 }}>{tb(lang, "bk_pay")}</p>
          </>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { BookingModal });