// datepicker.jsx — luxury calendar date picker (range or single)
const { useState: useDPState, useEffect: useDPEffect, useRef: useDPRef } = React;

const DP_MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
const DP_MON = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
const DP_DOW = ["S", "M", "T", "W", "T", "F", "S"];

function dpStartOfDay(d) { const x = new Date(d); x.setHours(0, 0, 0, 0); return x; }
function dpSameDay(a, b) { return !!a && !!b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate(); }
function dpFmt(d) { return `${DP_MON[d.getMonth()]} ${d.getDate()}`; }
function dpFmtRange(s, e) {
  if (!s) return "";
  if (!e) return `${dpFmt(s)}, ${s.getFullYear()}`;
  if (s.getFullYear() === e.getFullYear()) {
    if (s.getMonth() === e.getMonth()) return `${DP_MON[s.getMonth()]} ${s.getDate()} – ${e.getDate()}, ${e.getFullYear()}`;
    return `${dpFmt(s)} – ${dpFmt(e)}, ${e.getFullYear()}`;
  }
  return `${dpFmt(s)}, ${s.getFullYear()} – ${dpFmt(e)}, ${e.getFullYear()}`;
}

function DatePicker({ value, onChange, mode = "range", placeholder = "Select dates…", error }) {
  const [open, setOpen] = useDPState(false);
  const [start, setStart] = useDPState(null);
  const [end, setEnd] = useDPState(null);
  const [view, setView] = useDPState(() => { const t = dpStartOfDay(new Date()); return new Date(t.getFullYear(), t.getMonth(), 1); });
  const wrapRef = useDPRef(null);
  const today = dpStartOfDay(new Date());

  useDPEffect(() => { if (!value) { setStart(null); setEnd(null); } }, [value]);

  useDPEffect(() => {
    if (!open) return;
    const onDown = (e) => { if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false); };
    document.addEventListener("mousedown", onDown);
    return () => document.removeEventListener("mousedown", onDown);
  }, [open]);

  const pick = (day) => {
    if (mode === "single") { setStart(day); setEnd(null); onChange(dpFmtRange(day, null)); setOpen(false); return; }
    if (!start || (start && end)) { setStart(day); setEnd(null); onChange(dpFmtRange(day, null)); }
    else if (day < start) { setStart(day); onChange(dpFmtRange(day, null)); }
    else { setEnd(day); onChange(dpFmtRange(start, day)); setOpen(false); }
  };

  const y = view.getFullYear(), m = view.getMonth();
  const lead = new Date(y, m, 1).getDay();
  const daysInMonth = new Date(y, m + 1, 0).getDate();
  const cells = [];
  for (let i = 0; i < lead; i++) cells.push(null);
  for (let d = 1; d <= daysInMonth; d++) cells.push(new Date(y, m, d));
  const inRange = (d) => start && end && d > start && d < end;
  const canPrev = !(y === today.getFullYear() && m === today.getMonth());

  return (
    <div className="dp" ref={wrapRef}>
      <button type="button" className={`inp dp-trigger ${error ? "inp-err" : ""} ${value ? "" : "is-empty"}`} onClick={() => setOpen(o => !o)}>
        <span>{value || placeholder}</span>
        <svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <rect x="3.5" y="5" width="17" height="16" rx="2.5" /><path d="M3.5 9.5h17M8 3.5v3M16 3.5v3" />
        </svg>
      </button>
      {open && (
        <div className="dp-pop">
          <div className="dp-head">
            <button type="button" className="dp-nav" disabled={!canPrev} onClick={() => canPrev && setView(new Date(y, m - 1, 1))} aria-label="Previous month">
              <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M15 6l-6 6 6 6" /></svg>
            </button>
            <span className="dp-title">{DP_MONTHS[m]} {y}</span>
            <button type="button" className="dp-nav" onClick={() => setView(new Date(y, m + 1, 1))} aria-label="Next month">
              <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M9 6l6 6-6 6" /></svg>
            </button>
          </div>
          <div className="dp-dow">{DP_DOW.map((d, i) => <span key={i}>{d}</span>)}</div>
          <div className="dp-grid">
            {cells.map((d, i) => {
              if (!d) return <span key={i} className="dp-cell dp-empty" />;
              const past = d < today;
              const cls = ["dp-cell"];
              if (past) cls.push("is-past");
              if (dpSameDay(d, start)) cls.push("is-start");
              if (dpSameDay(d, end)) cls.push("is-end");
              if (inRange(d)) cls.push("is-range");
              if (dpSameDay(d, today)) cls.push("is-today");
              return <button type="button" key={i} className={cls.join(" ")} disabled={past} onClick={() => pick(d)}>{d.getDate()}</button>;
            })}
          </div>
          <div className="dp-foot">
            <span className="dp-hint">
              {mode === "single"
                ? (start ? dpFmtRange(start, null) : "Select a date")
                : (!start ? "Select pickup date" : !end ? "Select return date" : dpFmtRange(start, end))}
            </span>
            {(start || end) && <button type="button" className="dp-clear" onClick={() => { setStart(null); setEnd(null); onChange(""); }}>Clear</button>}
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { DatePicker });