/* Sweet Haven — brand-styled date picker (replaces native <input type="date">) */

const { useState: useStateDP, useEffect: useEffectDP, useRef: useRefDP } = React;

const SH_DOW = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
const SH_MONTHS = ["January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December"];

// yyyy-mm-dd <-> Date helpers (local, no timezone drift)
function dpParse(s) {
  if (!s) return null;
  const [y, m, d] = s.split("-").map(Number);
  if (!y || !m || !d) return null;
  return new Date(y, m - 1, d);
}
function dpKey(date) {
  const y = date.getFullYear();
  const m = String(date.getMonth() + 1).padStart(2, "0");
  const d = String(date.getDate()).padStart(2, "0");
  return `${y}-${m}-${d}`;
}
function dpStartOfDay(date) { return new Date(date.getFullYear(), date.getMonth(), date.getDate()); }
function dpSameDay(a, b) {
  return a && b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
}
function dpLabel(date) {
  // "Fri, 12 Jun 2026"
  const dow = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"][date.getDay()];
  const mon = SH_MONTHS[date.getMonth()].slice(0, 3);
  return `${dow}, ${date.getDate()} ${mon} ${date.getFullYear()}`;
}

function DatePicker({ value, onChange, min, placeholder = "Choose a date" }) {
  const selected = dpParse(value);
  const minDate = min ? dpStartOfDay(dpParse(min)) : null;
  const today = dpStartOfDay(new Date());

  const [open, setOpen] = useStateDP(false);
  const [view, setView] = useStateDP(() => {
    const base = selected || minDate || today;
    return { y: base.getFullYear(), m: base.getMonth() };
  });
  const wrapRef = useRefDP(null);

  // keep the visible month in sync when an external value lands
  useEffectDP(() => {
    if (selected) setView({ y: selected.getFullYear(), m: selected.getMonth() });
  }, [value]);

  // outside-click + escape close
  useEffectDP(() => {
    if (!open) return;
    const onDoc = (e) => { if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false); };
    const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
    document.addEventListener("mousedown", onDoc);
    document.addEventListener("keydown", onKey);
    return () => { document.removeEventListener("mousedown", onDoc); document.removeEventListener("keydown", onKey); };
  }, [open]);

  const firstDow = new Date(view.y, view.m, 1).getDay();
  const daysInMonth = new Date(view.y, view.m + 1, 0).getDate();

  // can we still page backwards without crossing min?
  const monthStart = new Date(view.y, view.m, 1);
  const prevDisabled = minDate && monthStart <= new Date(minDate.getFullYear(), minDate.getMonth(), 1);

  const step = (delta) => {
    setView((v) => {
      const d = new Date(v.y, v.m + delta, 1);
      return { y: d.getFullYear(), m: d.getMonth() };
    });
  };

  const pick = (day) => {
    const d = new Date(view.y, view.m, day);
    if (minDate && d < minDate) return;
    onChange(dpKey(d));
    setOpen(false);
  };

  const cells = [];
  for (let i = 0; i < firstDow; i++) cells.push(null);
  for (let d = 1; d <= daysInMonth; d++) cells.push(d);

  return (
    <div className="sh-dp" ref={wrapRef}>
      <button
        type="button"
        className={"sh-input sh-dp-trigger" + (open ? " is-open" : "") + (selected ? "" : " is-empty")}
        onClick={() => setOpen((o) => !o)}
        aria-haspopup="dialog"
        aria-expanded={open}
      >
        <span className="sh-dp-value">{selected ? dpLabel(selected) : placeholder}</span>
        <Icon name="calendar" size={18} className="sh-dp-icon" />
      </button>

      {open && (
        <div className="sh-dp-pop" role="dialog">
          <div className="sh-dp-head">
            <button type="button" className="sh-dp-nav" onClick={() => step(-1)} disabled={prevDisabled} aria-label="Previous month">
              <Icon name="chevron-left" size={18} />
            </button>
            <div className="sh-dp-title">{SH_MONTHS[view.m]} <em>{view.y}</em></div>
            <button type="button" className="sh-dp-nav" onClick={() => step(1)} aria-label="Next month">
              <Icon name="chevron-right" size={18} />
            </button>
          </div>

          <div className="sh-dp-dow">
            {SH_DOW.map((d, i) => <span key={i}>{d}</span>)}
          </div>

          <div className="sh-dp-grid">
            {cells.map((day, i) => {
              if (day === null) return <span key={i} className="sh-dp-cell is-blank" />;
              const date = new Date(view.y, view.m, day);
              const disabled = minDate && date < minDate;
              const isSel = dpSameDay(date, selected);
              const isToday = dpSameDay(date, today);
              return (
                <button
                  key={i}
                  type="button"
                  className={"sh-dp-cell" + (isSel ? " is-selected" : "") + (isToday && !isSel ? " is-today" : "")}
                  disabled={disabled}
                  onClick={() => pick(day)}
                >
                  {day}
                </button>
              );
            })}
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { DatePicker, dpParse, dpLabel });