// Reservation system — calendar, guest stepper, price calc, form

const ymd = (d) => {
  const y = d.getFullYear();
  const m = String(d.getMonth() + 1).padStart(2, "0");
  const day = String(d.getDate()).padStart(2, "0");
  return `${y}-${m}-${day}`;
};
const parseYmd = (s) => { const [y,m,d] = s.split("-").map(Number); return new Date(y, m-1, d); };
const sameDay = (a, b) => a && b && a.getFullYear()===b.getFullYear() && a.getMonth()===b.getMonth() && a.getDate()===b.getDate();
const addDays = (d, n) => { const r = new Date(d); r.setDate(r.getDate()+n); return r; };
const daysBetween = (a, b) => Math.round((b - a) / 86400000);

const isBlocked = (d, ranges) => {
  const ds = ymd(d);
  return ranges.some(r => ds >= r.start && ds <= r.end);
};

// Single-month calendar panel
const CalendarMonth = ({ monthDate, range, onPick, blockedRanges, today, t, canPrev, onPrev, onNext }) => {
  const year = monthDate.getFullYear();
  const month = monthDate.getMonth();
  const first = new Date(year, month, 1);
  const startDow = first.getDay(); // 0 = Sun
  const lastDay = new Date(year, month + 1, 0).getDate();
  const cells = [];
  for (let i = 0; i < startDow; i++) cells.push(null);
  for (let d = 1; d <= lastDay; d++) cells.push(new Date(year, month, d));
  const monthLabel = monthDate.toLocaleDateString(undefined, { month: "long", year: "numeric" });
  const dows = ["S","M","T","W","T","F","S"];
  const inRange = (d) => range.start && range.end && d > range.start && d < range.end;
  return (
    <div className="calendar">
      <div className="cal-head">
        <button className="cal-nav" onClick={onPrev} disabled={!canPrev}><Icon name="chevron-left" size={16} /></button>
        <div className="cal-month">{monthLabel}</div>
        <button className="cal-nav" onClick={onNext}><Icon name="chevron-right" size={16} /></button>
      </div>
      <div className="cal-grid">
        {dows.map((d, i) => <div key={i} className="cal-dow">{d}</div>)}
        {cells.map((d, i) => {
          if (!d) return <div key={i} className="cal-day empty" />;
          const past = d < today && !sameDay(d, today);
          const blocked = isBlocked(d, blockedRanges);
          const cls = ["cal-day"];
          if (past) cls.push("past");
          if (blocked && !past) cls.push("blocked");
          if (sameDay(d, range.start)) cls.push("range-start", "selected");
          if (sameDay(d, range.end))   cls.push("range-end", "selected");
          if (inRange(d)) cls.push("in-range");
          const disabled = past || blocked;
          return (
            <button key={i} className={cls.join(" ")} disabled={disabled} onClick={() => onPick(d)}>
              {d.getDate()}
            </button>
          );
        })}
      </div>
      <div className="cal-legend">
        <span><i className="legend-dot avail" />{t.res.legend.avail}</span>
        <span><i className="legend-dot taken" />{t.res.legend.taken}</span>
        <span><i className="legend-dot sel" />{t.res.legend.sel}</span>
      </div>
    </div>
  );
};

const GuestStepper = ({ value, onChange, t }) => (
  <div className="form-row">
    <label className="label">{t.res.guests}</label>
    <div className="guest-stepper">
      <div>
        <div className="gs-name">{value} {value === 1 ? "guest" : "guests"}</div>
        <small style={{ color: "var(--fg-3)", fontSize: 12 }}>{t.res.guestSub}</small>
      </div>
      <div className="gs-controls">
        <button type="button" className="gs-btn" disabled={value <= 1} onClick={() => onChange(Math.max(1, value - 1))}><Icon name="minus" size={14} /></button>
        <span className="gs-val">{value}</span>
        <button type="button" className="gs-btn" disabled={value >= 10} onClick={() => onChange(Math.min(10, value + 1))}><Icon name="plus" size={14} /></button>
      </div>
    </div>
  </div>
);

const calcPrice = (start, end) => {
  if (!start || !end) return null;
  const nights = daysBetween(start, end);
  if (nights <= 0) return null;
  let subtotal = 0;
  for (let i = 0; i < nights; i++) {
    const d = addDays(start, i);
    const dow = d.getDay();
    subtotal += (dow === 5 || dow === 6) ? window.PRICING.weekend : window.PRICING.base;
  }
  const cleaning = window.PRICING.cleaning;
  const tax = Math.round((subtotal + cleaning) * window.PRICING.taxRate);
  return { nights, subtotal, cleaning, tax, total: subtotal + cleaning + tax };
};

const yen = (n) => "¥" + n.toLocaleString("en-US");

const PriceSummary = ({ price, range, t }) => {
  if (!price) return <div className="empty-summary">{t.res.empty}</div>;
  return (
    <div className="price-summary">
      <div className="price-row">
        <span className="underline">{yen(window.PRICING.base)} × {price.nights} {t.res.nights}</span>
        <span>{yen(price.subtotal)}</span>
      </div>
      <div className="price-row">
        <span>{t.res.cleaning}</span>
        <span>{yen(price.cleaning)}</span>
      </div>
      <div className="price-row">
        <span>{t.res.tax}</span>
        <span>{yen(price.tax)}</span>
      </div>
      <div className="price-row total">
        <span>{t.res.total}</span>
        <span>{yen(price.total)}</span>
      </div>
    </div>
  );
};

const Reservation = ({ t, lang }) => {
  const today = React.useMemo(() => { const d = new Date(); d.setHours(0,0,0,0); return d; }, []);
  const [viewMonth, setViewMonth] = React.useState(new Date(today.getFullYear(), today.getMonth(), 1));
  const [range, setRange] = React.useState({ start: null, end: null });
  const [guests, setGuests] = React.useState(2);
  const [form, setForm] = React.useState({ name: "", email: "", phone: "", message: "" });
  const [sending, setSending] = React.useState(false);
  const [done, setDone] = React.useState(false);
  const blocked = window.BLOCKED_RANGES;

  const handlePick = (d) => {
    if (!range.start || (range.start && range.end)) {
      setRange({ start: d, end: null });
    } else if (d <= range.start) {
      setRange({ start: d, end: null });
    } else {
      // verify no blocked in between
      const conflict = blocked.some(r => {
        const rs = parseYmd(r.start), re = parseYmd(r.end);
        return rs >= range.start && rs <= d || re >= range.start && re <= d || (rs <= range.start && re >= d);
      });
      if (conflict) { setRange({ start: d, end: null }); }
      else setRange({ ...range, end: d });
    }
  };
  const price = calcPrice(range.start, range.end);

  const submit = async (e) => {
    e.preventDefault();
    if (!price || !form.name || !form.email) return;
    setSending(true);
    // Simulate API
    await new Promise(r => setTimeout(r, 900));
    // POST mock — what the real /api/reservations/route.ts will receive
    const payload = {
      name: form.name, email: form.email, phone: form.phone,
      check_in: ymd(range.start), check_out: ymd(range.end),
      guests, message: form.message, locale: lang,
    };
    console.log("Reservation request:", payload);
    setSending(false);
    setDone(true);
  };

  const reset = () => {
    setRange({ start: null, end: null });
    setForm({ name: "", email: "", phone: "", message: "" });
    setGuests(2);
    setDone(false);
  };

  const monthLabel = (d) => d.toLocaleDateString(undefined, { month: "short", day: "numeric" });

  return (
    <section className="section" id="reserve" style={{ background: "var(--sand-0)" }}>
      <div className="container">
        <Reveal className="section-head" style={{ textAlign: "center", margin: "0 auto 56px" }}>
          <span className="eyebrow-jp">{t.res.eyebrow}</span>
          <h2 className="h-section">{t.res.title}</h2>
          <p className="h-sub" style={{ margin: "0 auto" }}>{t.res.sub}</p>
        </Reveal>
        <Reveal>
          <div className="res-wrap">
            <div>
              <CalendarMonth
                monthDate={viewMonth}
                range={range}
                onPick={handlePick}
                blockedRanges={blocked}
                today={today}
                t={t}
                canPrev={viewMonth > new Date(today.getFullYear(), today.getMonth(), 1)}
                onPrev={() => setViewMonth(new Date(viewMonth.getFullYear(), viewMonth.getMonth() - 1, 1))}
                onNext={() => setViewMonth(new Date(viewMonth.getFullYear(), viewMonth.getMonth() + 1, 1))}
              />
            </div>
            <div>
              {done ? (
                <div className="form-success">
                  <div className="check"><Icon name="check" size={28} strokeWidth={2} /></div>
                  <h4>{t.res.successTitle}</h4>
                  <p>{t.res.successBody}</p>
                  <button className="btn btn-ghost" style={{ marginTop: 24 }} onClick={reset}>{t.res.another}</button>
                </div>
              ) : (
                <form onSubmit={submit}>
                  <div className="form-row split">
                    <div>
                      <label className="label">{t.res.checkin}</label>
                      <div className="input" style={{ display: "flex", alignItems: "center", gap: 8, color: range.start ? "var(--ink-900)" : "var(--fg-4)" }}>
                        <Icon name="calendar" size={16} strokeWidth={1.4} />
                        {range.start ? monthLabel(range.start) : t.res.pickStart}
                      </div>
                    </div>
                    <div>
                      <label className="label">{t.res.checkout}</label>
                      <div className="input" style={{ display: "flex", alignItems: "center", gap: 8, color: range.end ? "var(--ink-900)" : "var(--fg-4)" }}>
                        <Icon name="calendar" size={16} strokeWidth={1.4} />
                        {range.end ? monthLabel(range.end) : t.res.pickEnd}
                      </div>
                    </div>
                  </div>
                  <GuestStepper value={guests} onChange={setGuests} t={t} />
                  <div className="form-row">
                    <label className="label">{t.res.name}</label>
                    <input className="input" value={form.name} onChange={e=>setForm({...form, name:e.target.value})} required />
                  </div>
                  <div className="form-row split">
                    <div>
                      <label className="label">{t.res.email}</label>
                      <input className="input" type="email" value={form.email} onChange={e=>setForm({...form, email:e.target.value})} required />
                    </div>
                    <div>
                      <label className="label">{t.res.phone}</label>
                      <input className="input" type="tel" value={form.phone} onChange={e=>setForm({...form, phone:e.target.value})} />
                    </div>
                  </div>
                  <div className="form-row">
                    <label className="label">{t.res.message}</label>
                    <textarea className="textarea" placeholder={t.res.messagePh} value={form.message} onChange={e=>setForm({...form, message:e.target.value})} />
                  </div>
                  <PriceSummary price={price} range={range} t={t} />
                  <button type="submit" className="btn btn-block" disabled={!price || sending} style={{ marginTop: 24, opacity: (!price || sending) ? 0.5 : 1 }}>
                    {sending ? t.res.submitting : t.res.submit}
                    {!sending && <Icon name="arrow-right" size={16} />}
                  </button>
                </form>
              )}
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
};

Object.assign(window, { Reservation });