/* ============================================================
   calendar.jsx - interactive availability calendar + booking
   ============================================================ */
const { useState: useStateCal, useMemo } = React;

const MONTHS = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"];
const DOW = ["Lun", "Mar", "Mer", "Jeu", "Ven", "Sam", "Dim"];
const TODAY = new Date(2026, 5, 3);
TODAY.setHours(0, 0, 0, 0);

function rng(seed) {
  return ((seed * 9301 + 49297) % 233280) / 233280;
}

function normalizedSlots(configuredSlots, seed) {
  const defaults = [
    { id: "am", label: "Matin", time: "08:00 - 13:00" },
    { id: "pm", label: "Après-midi", time: "14:00 - 19:00" },
    { id: "full", label: "Journée complète", time: "08:00 - 19:00" },
  ];
  const source = Array.isArray(configuredSlots) && configuredSlots.length ? configuredSlots : defaults;

  return source.map((slot, index) => ({
    id: slot.id || `slot-${index}`,
    label: slot.label || defaults[index]?.label || "Créneau",
    time: slot.time || defaults[index]?.time || "",
    taken: index < 2 ? rng(seed + index + 1) < 0.18 : false,
  }));
}

function slotsFor(date, configuredSlots) {
  const dow = date.getDay();
  if (dow === 0 || dow === 6) return null;
  if (date < TODAY) return null;
  const seed = date.getDate() + (date.getMonth() + 1) * 31 + date.getFullYear();
  if (rng(seed) < 0.22) return null;
  const slots = normalizedSlots(configuredSlots, seed);
  if (slots.length >= 3) {
    slots[2].taken = slots[0].taken || slots[1].taken;
  }
  if (slots.every((slot) => slot.taken)) return null;
  return slots;
}

function fmtLong(date) {
  return `${date.getDate()} ${MONTHS[date.getMonth()].toLowerCase()} ${date.getFullYear()}`;
}

function AvailabilityCalendar({ content = {}, onBook }) {
  const [view, setView] = useStateCal(() => ({ y: TODAY.getFullYear(), m: TODAY.getMonth() }));
  const [selected, setSelected] = useStateCal(null);
  const [slotId, setSlotId] = useStateCal(null);
  const [confirmed, setConfirmed] = useStateCal(null);

  const minMonth = TODAY.getFullYear() * 12 + TODAY.getMonth();
  const curMonth = view.y * 12 + view.m;
  const canPrev = curMonth > minMonth;
  const canNext = curMonth < minMonth + 3;

  const cells = useMemo(() => {
    const first = new Date(view.y, view.m, 1);
    const startDow = (first.getDay() + 6) % 7;
    const days = new Date(view.y, view.m + 1, 0).getDate();
    const out = [];
    for (let i = 0; i < startDow; i++) out.push(null);
    for (let d = 1; d <= days; d++) out.push(new Date(view.y, view.m, d));
    return out;
  }, [view]);

  const selSlots = selected ? slotsFor(selected, content.slots) : null;

  const go = (dir) => {
    if ((dir < 0 && !canPrev) || (dir > 0 && !canNext)) return;
    let m = view.m + dir;
    let y = view.y;
    if (m < 0) { m = 11; y--; }
    if (m > 11) { m = 0; y++; }
    setView({ y, m });
  };

  const pickDay = (date, hasSlots) => {
    if (!hasSlots) return;
    setSelected(date);
    setSlotId(null);
    setConfirmed(null);
  };

  const confirm = () => {
    const slot = selSlots.find((item) => item.id === slotId);
    const booking = { date: selected, slotLabel: slot.label, slotTime: slot.time, dateLabel: fmtLong(selected) };
    setConfirmed(booking);
    if (onBook) onBook(booking);
  };

  const reset = () => {
    setConfirmed(null);
    setSelected(null);
    setSlotId(null);
  };

  return (
    <div className="cal-wrap">
      <div className="reveal">
        <div className="cal__top">
          <div className="cal__month tnum">{MONTHS[view.m]} {view.y}</div>
          <div className="cal__nav">
            <button className="cal__navbtn" onClick={() => go(-1)} disabled={!canPrev} aria-label="Mois précédent">
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M9 2L4 7l5 5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square" /></svg>
            </button>
            <button className="cal__navbtn" onClick={() => go(1)} disabled={!canNext} aria-label="Mois suivant">
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M5 2l5 5-5 5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square" /></svg>
            </button>
          </div>
        </div>

        <div className="cal__dow">{DOW.map((day) => <span key={day}>{day}</span>)}</div>
        <div className="cal__grid">
          {cells.map((date, index) => {
            if (!date) return <div className="cal__cell" key={`e${index}`}><span className="cal__day is-empty" /></div>;
            const slots = slotsFor(date, content.slots);
            const has = Boolean(slots);
            const isSel = selected && date.getTime() === selected.getTime();
            let cls = "cal__day";
            if (isSel) cls += " is-selected";
            else if (has) cls += " is-available";
            else cls += " is-disabled";

            return (
              <div className="cal__cell" key={date.getTime()}>
                <button
                  className={cls}
                  onClick={() => pickDay(date, has)}
                  disabled={!has}
                  aria-label={`${fmtLong(date)}${has ? " - disponible" : " - indisponible"}`}
                >
                  <span className="n">{date.getDate()}</span>
                  {has && <span className="avail"><i />libre</span>}
                </button>
              </div>
            );
          })}
        </div>

        <div className="cal__legend">
          <span><i className="lg-avail" />Créneaux disponibles</span>
          <span><i className="lg-sel" />Sélectionné</span>
          <span><i className="lg-off" />Indisponible</span>
        </div>
      </div>

      <div className="panel reveal reveal--right" style={{ transitionDelay: ".08s" }}>
        {!confirmed && (
          <React.Fragment>
            <div className="panel__head">
              <div className="k">{selected ? "Créneaux du" : (content.bookingTitle || "Réservation")}</div>
              <div className="v tnum">{selected ? fmtLong(selected) : "Choisissez une date"}</div>
            </div>
            <div className="panel__body">
              {!selected && <p className="panel__empty">{content.emptyText}</p>}
              {selected && selSlots && (
                <React.Fragment>
                  {selSlots.map((slot) => (
                    <button
                      key={slot.id}
                      className={"slot" + (slotId === slot.id ? " is-active" : "")}
                      disabled={slot.taken}
                      onClick={() => setSlotId(slot.id)}
                    >
                      <span className="slot__l">
                        <span className="slot__label">{slot.label}</span>
                        <span className="slot__time">{slot.time}</span>
                      </span>
                      {slot.taken ? <span className="slot__tag">Réservé</span> : <span className="slot__radio" />}
                    </button>
                  ))}
                  <button className="btn btn--primary btn--block" style={{ marginTop: 8 }} disabled={!slotId} onClick={confirm}>
                    {content.confirmCta || "Pré-réserver ce créneau"} <Arrow />
                  </button>
                </React.Fragment>
              )}
            </div>
          </React.Fragment>
        )}

        {confirmed && (
          <React.Fragment>
            <div className="panel__head">
              <div className="confirm__badge">
                <span className="chk">
                  <svg width="11" height="11" viewBox="0 0 11 11" fill="none"><path d="M2 6l2.5 2.5L9.5 3" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /></svg>
                </span>
                Créneau pré-réservé
              </div>
            </div>
            <div className="panel__body confirm">
              <div className="confirm__row"><span className="k">Date</span><span className="v tnum">{confirmed.dateLabel}</span></div>
              <div className="confirm__row"><span className="k">Créneau</span><span className="v">{confirmed.slotLabel}</span></div>
              <div className="confirm__row"><span className="k">Horaires</span><span className="v tnum">{confirmed.slotTime}</span></div>
              <p className="small" style={{ margin: "16px 0 0" }}>
                Pré-réservation maintenue 48 h. Complétez votre demande ci-dessous pour la confirmer.
              </p>
              <a href="#formulaire" className="btn btn--dark btn--block" style={{ marginTop: 8 }}>
                Compléter ma demande <Arrow />
              </a>
              <button className="btn btn--ghost btn--block" style={{ marginTop: 8 }} onClick={reset}>
                Choisir un autre créneau
              </button>
            </div>
          </React.Fragment>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { AvailabilityCalendar });