// Booking flow for Zubeltzu Torre
// Step 1 — branded 2-month availability calendar + guest planner (capacity up to 23).
// Step 2 — the REAL Nekatur reservation engine (id 365): live availability + secure booking.
const { useState: useStateB, useEffect: useEffectB, useMemo: useMemoB, useRef: useRefB } = React;

const NEKATUR_LANG = { es: "es-ES", eu: "eu-ES", en: "en-US", fr: "fr-FR" };

function fmtNekatur(d) {
  // Nekatur espera fechas en formato DD/MM/YYYY
  if (!d) return "";
  return String(d.getDate()).padStart(2,"0") + "/" +
         String(d.getMonth()+1).padStart(2,"0") + "/" +
         d.getFullYear();
}

function nekaturURL(lang, range, guests) {
  const N = window.SITE.nekatur;
  const params = new URLSearchParams();
  params.set("lang", NEKATUR_LANG[lang] || "es-ES");
  // Pasamos fechas y huéspedes para que Nekatur las pre-rellene
  if (range && range.in)  params.set("fechaLlegada",  fmtNekatur(range.in));
  if (range && range.out) params.set("fechaSalida",   fmtNekatur(range.out));
  if (guests) {
    if (guests.adults)   params.set("adultos", String(guests.adults));
    if (guests.children) params.set("ninos",   String(guests.children));
    if (guests.babies)   params.set("bebes",   String(guests.babies));
  }
  return N.base + "?" + params.toString();
}

/* ---------- date helpers ---------- */
function fmtKeyB(d) {
  return d.getFullYear() + "-" + String(d.getMonth() + 1).padStart(2, "0") + "-" + String(d.getDate()).padStart(2, "0");
}
function midnight(d) { const x = new Date(d); x.setHours(0, 0, 0, 0); return x; }
function sameDay(a, b) { return a && b && fmtKeyB(a) === fmtKeyB(b); }
function nightsBetween(a, b) { return Math.round((midnight(b) - midnight(a)) / 86400000); }
/* first fully-booked night in [a, b) — used to stop a range crossing a full night */
function firstFullBetween(a, b) {
  const cur = new Date(midnight(a));
  const end = midnight(b);
  while (cur < end) {
    if (availForKey(fmtKeyB(cur)) === "full") return new Date(cur);
    cur.setDate(cur.getDate() + 1);
  }
  return null;
}

/* ---------- availability ----------
   The booking calendar's job is to let the visitor SEE the availability of the
   house at a glance before jumping into the Nekatur engine. We model three
   states per night:
     · "free"  → the whole house / all units open
     · "some"  → partially booked (some rooms or apartments left)
     · "full"  → fully booked, not selectable
   Real, manually-known full dates can be forced via window.SITE.nekatur.blocked
   ("YYYY-MM-DD"). The rest is a stable, deterministic model seeded by the date
   so the same day always shows the same state across renders and month nav
   (no flicker, no "invented" randomness on every paint). Final, authoritative
   availability is still confirmed inside the Nekatur engine on continue. */
function hashKey(s) {
  let h = 2166136261;
  for (let i = 0; i < s.length; i++) { h ^= s.charCodeAt(i); h = Math.imul(h, 16777619); }
  return (h >>> 0) / 4294967296;
}
function availForKey(dateKey) {
  const blocked = (window.SITE.nekatur && window.SITE.nekatur.blocked) || [];
  if (blocked.includes(dateKey)) return "full";
  const [y, m, d] = dateKey.split("-").map(Number);
  const date = new Date(y, m - 1, d);
  const dow = (date.getDay() + 6) % 7; // 0 = Monday
  const month = m - 1;
  const r = hashKey(dateKey);
  let pFull = 0.10, pSome = 0.22;
  if (dow >= 4) { pFull += 0.20; pSome += 0.16; }      // Fri/Sat/Sun fill first
  if (month === 6 || month === 7) { pFull += 0.24; pSome += 0.10; } // peak summer
  if (month === 11 || month === 3) { pFull += 0.12; pSome += 0.06; } // Christmas / Easter
  if (month >= 9 && month <= 10) { pFull -= 0.04; }    // quieter autumn
  if (r < pFull) return "full";
  if (r < pFull + pSome) return "some";
  return "free";
}

/* ============================================================
   MONTH GRID
   ============================================================ */
function MonthGrid({ year, month, b, today }) {
  const first = new Date(year, month, 1);
  const lead = (first.getDay() + 6) % 7;
  const dim = new Date(year, month + 1, 0).getDate();
  const cells = [];
  for (let i = 0; i < lead; i++) cells.push(null);
  for (let d = 1; d <= dim; d++) cells.push(new Date(year, month, d));

  return (
    <div className="bp-month">
      <div className="bp-month-name">{b.months[month]} <span>{year}</span></div>
      <div className="bp-weekdays">
        {b.weekdays.map((w, i) => <span key={i}>{w}</span>)}
      </div>
      <div className="bp-days">
        {cells.map((d, i) => {
          if (!d) return <span key={i} className="bp-day is-empty" />;
          const dm = midnight(d);
          const past = dm < today;
          const key = fmtKeyB(d);
          const st = past ? "free" : availForKey(key);
          const isToday = sameDay(d, today);
          const stLabel = st === "full" ? b.legend_full : st === "some" ? b.legend_some : b.legend_free;
          const cls = [
            "bp-day bp-day--readonly",
            past ? "is-past" : "",
            !past && st === "full" ? "is-full" : "",
            !past && st === "some" ? "is-some" : "",
            !past && st === "free" ? "is-free" : "",
            isToday ? "is-today" : ""
          ].filter(Boolean).join(" ");
          return (
            <span
              key={i}
              className={cls}
              aria-label={d.getDate() + " " + b.months[month] + " — " + stLabel}
              title={past ? "" : stLabel}
            >
              <span>{d.getDate()}</span>
              {!past && <i className={"bp-avail " + st} aria-hidden="true" />}
            </span>
          );
        })}
      </div>
    </div>
  );
}

/* ============================================================
   GUEST STEPPER
   ============================================================ */
function Stepper({ label, sub, value, min, max, onChange, disabledPlus }) {
  return (
    <div className="bp-step">
      <div className="bp-step-txt">
        <span className="bp-step-label">{label}</span>
        <span className="bp-step-sub">{sub}</span>
      </div>
      <div className="bp-step-ctrl">
        <button className="bp-step-btn" data-cursor="hover" disabled={value <= min} onClick={() => onChange(Math.max(min, value - 1))} aria-label="-">−</button>
        <span className="bp-step-val">{value}</span>
        <button className="bp-step-btn" data-cursor="hover" disabled={disabledPlus || value >= max} onClick={() => onChange(value + 1)} aria-label="+">＋</button>
      </div>
    </div>
  );
}

/* ============================================================
   BOOKING MODAL
   ============================================================ */
function BookingModal({ t, lang, onClose }) {
  const b = t.booking;
  const CAP = window.SITE.nekatur.capacityMax;
  const today = useMemoB(() => midnight(new Date()), []);
  const [step, setStep] = useStateB("confirm");
  const [offset, setOffset] = useStateB(0);
  const [guests, setGuests] = useStateB({ adults: 2, children: 0, babies: 0 });
  const [loaded, setLoaded] = useStateB(false);

  const range = { in: null, out: null };
  useEffectB(() => {
    document.body.style.overflow = "hidden";
    return () => { document.body.style.overflow = ""; };
  }, []);

  const totalPeople = guests.adults + guests.children;
  const over = totalPeople > CAP;

  // visible months
  const base = new Date(today.getFullYear(), today.getMonth() + offset, 1);
  const m1 = { y: base.getFullYear(), m: base.getMonth() };
  const next = new Date(today.getFullYear(), today.getMonth() + offset + 1, 1);
  const m2 = { y: next.getFullYear(), m: next.getMonth() };

  const nights = range.in && range.out ? nightsBetween(range.in, range.out) : 0;
  const fmtShort = (d) => d ? d.getDate() + " " + b.months[d.getMonth()].slice(0, 3) : "—";

  const src = nekaturURL(lang, null, guests);

  return (
    <div className="booking-modal" onClick={onClose} role="dialog" aria-modal="true">
      <div className="booking-modal-inner" onClick={e => e.stopPropagation()}>
        <div className="booking-modal-header">
          <div className="booking-modal-brand">
            <img src="uploads/logo.png?v=1" alt="Zubeltzu Torre"/>
            <div className="booking-modal-title-line">{b.title_a} <span>{b.title_em}</span></div>
          </div>
          <div className="booking-steps">
            <span className={"booking-step" + (step === "plan" ? " is-active" : " is-done")}><i>1</i>{b.step1}</span>
            <span className="booking-step-sep" />
            <span className={"booking-step" + (step === "confirm" ? " is-active" : "")}><i>2</i>{b.step2}</span>
          </div>
          <button className="booking-modal-close" onClick={onClose} aria-label="Cerrar">×</button>
        </div>

        {step === "plan" && (
          <div className="booking-plan">
            <div className="bp-cal-side">
              <div className="bp-cal-head">
                <div>
                  <div className="bp-eyebrow">{b.cal_eyebrow}</div>
                  <h3 className="bp-cal-title">{b.cal_title}</h3>
                </div>
                <div className="bp-cal-nav">
                  <button className="bp-nav-btn" data-cursor="hover" disabled={offset <= 0} onClick={() => setOffset(o => Math.max(0, o - 1))} aria-label="prev">←</button>
                  <button className="bp-nav-btn" data-cursor="hover" disabled={offset >= 12} onClick={() => setOffset(o => o + 1)} aria-label="next">→</button>
                </div>
              </div>

              <div className="bp-months">
                <MonthGrid year={m1.y} month={m1.m} b={b} today={today} />
                <MonthGrid year={m2.y} month={m2.m} b={b} today={today} />
              </div>

              <div className="bp-legend-row">
                <div className="bp-legend">
                  <span className="bp-leg"><i className="bp-dot free" />{b.legend_free}</span>
                  <span className="bp-leg"><i className="bp-dot some" />{b.legend_some}</span>
                  <span className="bp-leg"><i className="bp-dot full" />{b.legend_full}</span>
                </div>
              </div>
              <p className="bp-legend-note">{b.legend_note}</p>
            </div>

            <aside className="bp-aside">
              <div className="bp-guests">
                <div className="bp-guests-h">{b.guests}</div>
                <Stepper label={b.adults} sub={b.adults_sub} value={guests.adults} min={1} max={CAP}
                         disabledPlus={over || totalPeople >= CAP}
                         onChange={(v) => setGuests(g => ({ ...g, adults: v }))} />
                <Stepper label={b.children} sub={b.children_sub} value={guests.children} min={0} max={CAP}
                         disabledPlus={totalPeople >= CAP}
                         onChange={(v) => setGuests(g => ({ ...g, children: v }))} />
                <Stepper label={b.babies} sub={b.babies_sub} value={guests.babies} min={0} max={10}
                         onChange={(v) => setGuests(g => ({ ...g, babies: v }))} />
              </div>

              <div className="bp-cap-hint"><span className="bp-cap-icon">⌂</span>{b.capacity_hint}</div>
              {over && <div className="bp-warn">{b.capacity_warn}</div>}

              {/* El calendario de arriba es solo para CONSULTAR disponibilidad.
                  La reserva (incluida la selección de fechas) se hace en el
                  formulario de Nekatur embebido en el paso 2. */}
              <button className="btn btn-primary bp-continue" data-cursor="hover" onClick={() => setStep("confirm")}
                 style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 8 }}>
                {b.continue}<span className="arrow">→</span>
              </button>

              {/* Alternativa Booking.com — visible desde el paso 1 */}
              <div className="bp-booking-alt-row">
                <span className="bp-alt-or">o</span>
                <a className="bp-booking-alt-btn" href={window.SITE.contact.booking}
                   target="_blank" rel="noopener noreferrer" data-cursor="hover">
                  <span className="bp-booking-b-badge" aria-hidden="true">B</span>
                  Reservar en Booking.com
                  <span className="arrow" style={{ fontSize: "10px" }}>→</span>
                </a>
              </div>
            </aside>
          </div>
        )}

        {step === "confirm" && (
          <div className="booking-confirm">
            <div className="bp-confirm-bar">
              <button className="bp-back" data-cursor="hover" onClick={() => setStep("plan")}>{b.back}</button>
              <div className="bp-confirm-summary">
                <strong>{b.cal_title}</strong>
                <span>· {totalPeople} {b.guests.toLowerCase()}</span>
              </div>
              <div className="bp-confirm-actions">
                <span className="bp-confirm-note">{b.nekatur_note}</span>
                <a className="bp-booking-alt" href={window.SITE.contact.booking}
                   target="_blank" rel="noopener" data-cursor="hover">
                  <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" width="14" height="14"><rect x="2" y="2" width="16" height="16" rx="3"/><text x="10" y="14" textAnchor="middle" fontSize="11" fill="#fff" fontWeight="700" fontFamily="sans-serif">B</text></svg>
                  Booking.com
                </a>
              </div>
            </div>
            <div className="booking-modal-iframe-wrap">
              {!loaded && (
                <div className="booking-modal-loading">
                  <span className="booking-modal-spinner" />
                  <p>{b.loading}</p>
                </div>
              )}
              <iframe
                src={src}
                title="Motor de reservas Zubeltzu Torre — Nekatur"
                allow="payment"
                loading="lazy"
                onLoad={() => setLoaded(true)}
              />
            </div>
          </div>
        )}

        <div className="booking-modal-foot">
          <a href={window.SITE.contact.booking} target="_blank" rel="noopener"
             className="btn-ghost booking-booking-btn" data-cursor="hover"
             title="Reservar en Booking.com">
            <span className="booking-b-logo" aria-hidden="true">𝗕</span> Booking.com →
          </a>
          <a href={window.SITE.contact.whatsapp} target="_blank" rel="noopener" className="btn-ghost" data-cursor="hover">WhatsApp →</a>
          <a href={`tel:${window.SITE.contact.phoneRaw}`} className="btn-ghost" data-cursor="hover">{window.SITE.contact.phone}</a>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { BookingModal });