// booking.jsx — booking widget with location/date/time pickers

const fmtMonthYear = (d) => d.toLocaleDateString("en-US", { month: "long", year: "numeric" });
const fmtShort = (d) => d ? d.toLocaleDateString("en-US", { weekday: "short", month: "short", day: "numeric" }) : null;
const sameDay = (a, b) => a && b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
const startOfDay = (d) => { const x = new Date(d); x.setHours(0,0,0,0); return x; };
const addDays = (d, n) => { const x = new Date(d); x.setDate(x.getDate() + n); return x; };

const LocationDropdown = ({ value, onSelect, exclude }) => (
  <div className="dropdown" onClick={(e) => e.stopPropagation()}>
    {window.LOCATIONS.filter(l => l.id !== exclude).map(loc => (
      <div
        key={loc.id}
        className={`dropdown-item ${value && value.id === loc.id ? "is-selected" : ""}`}
        onClick={() => onSelect(loc)}
      >
        <div className="ico"><Icon name="pin" size={16} /></div>
        <div className="meta">
          <div className="title">{loc.name}</div>
          <div className="sub">{loc.detail}</div>
        </div>
      </div>
    ))}
  </div>
);

const TimeDropdown = ({ value, onSelect }) => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (ref.current && value) {
      const sel = ref.current.querySelector(".is-selected");
      if (sel) {
        // scroll the dropdown container only — never the page
        ref.current.scrollTop = sel.offsetTop - ref.current.clientHeight / 2 + sel.clientHeight / 2;
      }
    }
  }, []);
  return (
    <div className="dropdown dropdown--time" ref={ref} onClick={(e) => e.stopPropagation()}>
      {window.TIME_SLOTS.map(t => (
        <div
          key={t}
          className={`time-item ${value === t ? "is-selected" : ""}`}
          onClick={() => onSelect(t)}
        >
          {t}
        </div>
      ))}
    </div>
  );
};

// deterministic "booked" pattern per car id
const isCarBooked = (carId, date) => {
  if (!carId) return false;
  const key = `${carId}-${date.getFullYear()}-${date.getMonth()}`;
  let h = 0;
  for (let i = 0; i < key.length; i++) h = (h * 31 + key.charCodeAt(i)) >>> 0;
  const rand = (n) => { let x = (h + n * 2654435761) >>> 0; x = (x ^ (x >>> 13)) >>> 0; x = (x * 1274126177) >>> 0; return ((x ^ (x >>> 16)) >>> 0) / 0xffffffff; };
  const daysInMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
  const ranges = 2 + Math.floor(rand(0) * 2);
  for (let r = 0; r < ranges; r++) {
    const start = 1 + Math.floor(rand(r + 1) * (daysInMonth - 6));
    const len = 2 + Math.floor(rand(r + 100) * 4);
    if (date.getDate() >= start && date.getDate() < start + len) return true;
  }
  return false;
};
window.isCarBooked = isCarBooked;

// next booked day strictly after `from` (within next 90 days)
const nextBookedAfter = (carId, from) => {
  if (!carId) return null;
  const start = startOfDay(from);
  for (let i = 1; i <= 90; i++) {
    const d = addDays(start, i);
    if (isCarBooked(carId, d)) return d;
  }
  return null;
};
window.nextBookedAfter = nextBookedAfter;

const Calendar = ({ start, end, onChange, anchor, mode, carId, pickupStart }) => {
  const [view, setView] = React.useState(() => {
    const d = start || anchor || new Date();
    return new Date(d.getFullYear(), d.getMonth(), 1);
  });
  const today = startOfDay(new Date());

  // For drop-off mode: max allowed = day before next booking after pickupStart
  let maxAllowed = null;
  if (mode === "dropoff" && pickupStart && carId) {
    const nb = nextBookedAfter(carId, pickupStart);
    maxAllowed = nb ? addDays(nb, -1) : null;
  }

  const monthStart = new Date(view.getFullYear(), view.getMonth(), 1);
  const daysInMonth = new Date(view.getFullYear(), view.getMonth() + 1, 0).getDate();
  const firstDow = monthStart.getDay();

  const handleClick = (day) => {
    const d = new Date(view.getFullYear(), view.getMonth(), day);
    if (mode === "dropoff") {
      if (pickupStart && d >= pickupStart && (!maxAllowed || d <= maxAllowed)) {
        onChange({ start: pickupStart, end: d });
      }
      return;
    }
    if (!start || (start && end)) {
      onChange({ start: d, end: null });
    } else if (d < start) {
      onChange({ start: d, end: null });
    } else if (sameDay(d, start)) {
      onChange({ start: d, end: d });
    } else {
      onChange({ start, end: d });
    }
  };

  const cells = [];
  for (let i = 0; i < firstDow; i++) cells.push(<div key={`e${i}`} className="cal-day is-empty" />);
  for (let day = 1; day <= daysInMonth; day++) {
    const d = new Date(view.getFullYear(), view.getMonth(), day);
    const past = d < today;
    const booked = carId && isCarBooked(carId, d);
    let outOfRange = false;
    if (mode === "dropoff" && pickupStart) {
      if (d < pickupStart) outOfRange = true;
      if (maxAllowed && d > maxAllowed) outOfRange = true;
    }
    const disabled = past || booked || outOfRange;
    const isStart = sameDay(d, start);
    const isEnd = sameDay(d, end);
    const inRange = start && end && d > start && d < end;
    const isToday = sameDay(d, today);
    cells.push(
      <div
        key={day}
        className={`cal-day ${disabled ? "is-disabled" : ""} ${booked ? "is-booked" : ""} ${isStart ? "is-start" : ""} ${isEnd ? "is-end" : ""} ${inRange ? "is-in-range" : ""} ${isToday ? "is-today" : ""}`}
        onClick={() => !disabled && handleClick(day)}
        title={booked ? "Booked" : ""}
      >
        {day}
      </div>
    );
  }

  const dows = ["S", "M", "T", "W", "T", "F", "S"];
  return (
    <div className="dropdown dropdown--cal" onClick={(e) => e.stopPropagation()}>
      <div className="cal-head">
        <button className="cal-nav" onClick={() => setView(new Date(view.getFullYear(), view.getMonth() - 1, 1))}>
          <Icon name="chevron-left" size={14} />
        </button>
        <div className="cal-month">{fmtMonthYear(view)}</div>
        <button className="cal-nav" onClick={() => setView(new Date(view.getFullYear(), view.getMonth() + 1, 1))}>
          <Icon name="chevron-right" size={14} />
        </button>
      </div>
      <div className="cal-grid">
        {dows.map((d, i) => <div key={i} className="cal-dow">{d}</div>)}
        {cells}
      </div>
      <div className="cal-foot">
        <span>
          {mode === "dropoff" && pickupStart
            ? (maxAllowed
                ? `Keep up to ${Math.round((maxAllowed - pickupStart) / 86400000)} days · next booking ${fmtShort(addDays(maxAllowed, 1))}`
                : (start && end ? `${Math.round((end - start) / 86400000) || 1} day rental` : "Choose drop-off date"))
            : (start && !end ? "Choose drop-off date" : start && end ? `${Math.round((end - start) / 86400000) || 1} day rental` : "Choose pickup date")}
        </span>
        {(start || end) && mode !== "dropoff" && <button onClick={() => onChange({ start: null, end: null })}>Clear</button>}
      </div>
    </div>
  );
};

const BookingWidget = ({ onSearch, initial, carId }) => {
  const [pickup, setPickup] = React.useState(initial?.pickup || window.LOCATIONS[2]); // AIA
  const [dropoff, setDropoff] = React.useState(initial?.dropoff || null);
  const [diffDropoff, setDiffDropoff] = React.useState(initial?.diffDropoff || false);
  const tomorrow = addDays(new Date(), 1);
  const fourDaysOut = addDays(new Date(), 5);
  const [dates, setDates] = React.useState(initial?.dates || { start: tomorrow, end: fourDaysOut });
  const [pickupTime, setPickupTime] = React.useState(initial?.pickupTime || "10:00");
  const [dropoffTime, setDropoffTime] = React.useState(initial?.dropoffTime || "10:00");
  const [open, setOpen] = React.useState(null); // 'pickup' | 'dropoff' | 'dates' | 'pTime' | 'dTime'

  React.useEffect(() => {
    const close = () => setOpen(null);
    document.addEventListener("click", close);
    return () => document.removeEventListener("click", close);
  }, []);

  const toggle = (key, e) => { e.stopPropagation(); setOpen(open === key ? null : key); };

  const submit = () => {
    if (!pickup || !dates.start || !dates.end) return;
    onSearch({
      pickup,
      dropoff: diffDropoff ? dropoff : pickup,
      diffDropoff,
      dates,
      pickupTime,
      dropoffTime,
    });
  };

  const days = dates.start && dates.end ? Math.max(1, Math.round((dates.end - dates.start) / 86400000)) : 0;

  return (
    <div className="booking">
      <div className="booking-toggle-row">
        <button
          className={`dropoff-toggle ${diffDropoff ? "is-active" : ""}`}
          onClick={(e) => { e.stopPropagation(); setDiffDropoff(!diffDropoff); if (!diffDropoff && !dropoff) setDropoff(window.LOCATIONS[0]); }}
        >
          <span className="checkbox">{diffDropoff && <Icon name="check" size={11} strokeWidth={3} />}</span>
          Return to a different location
        </button>
        <span className="booking-promo">
          <Icon name="star" size={12} color="#f5b800" />
          <strong>20% off</strong> rentals 7+ days
        </span>
      </div>

      <div className="booking-grid" style={{gridTemplateColumns: diffDropoff ? "1fr 0.9fr 0.7fr 1fr 0.9fr 0.7fr auto" : "1.1fr 0.9fr 0.7fr 0.9fr 0.7fr auto"}}>
        {/* Pickup location */}
        <div className="booking-field" onClick={(e) => toggle("pickup", e)}>
          <div className="booking-field-label">Pickup location</div>
          <div className="booking-field-value">
            {pickup ? pickup.name : <span className="placeholder">Select location</span>}
          </div>
          <div className="field-icon"><Icon name="chevron-down" size={14} /></div>
          {open === "pickup" && <LocationDropdown value={pickup} onSelect={(l) => { setPickup(l); setOpen("dates"); }} />}
        </div>

        {/* Pickup date */}
        <div className="booking-field" onClick={(e) => toggle("dates", e)}>
          <div className="booking-field-label">Pickup date</div>
          <div className="booking-field-value">
            {dates.start ? fmtShort(dates.start) : <span className="placeholder">Add date</span>}
          </div>
          <div className="field-icon"><Icon name="calendar" size={14} /></div>
          {open === "dates" && <Calendar start={dates.start} end={dates.end} onChange={(d) => { setDates(d); if (d.start && !d.end) setOpen("pTime"); }} carId={carId} />}
        </div>

        {/* Pickup time */}
        <div className="booking-field" onClick={(e) => toggle("pTime", e)}>
          <div className="booking-field-label">Pickup time</div>
          <div className="booking-field-value">{pickupTime}</div>
          <div className="field-icon"><Icon name="clock" size={14} /></div>
          {open === "pTime" && <TimeDropdown value={pickupTime} onSelect={(t) => { setPickupTime(t); setOpen(null); }} />}
        </div>

        {/* Dropoff location (conditional) */}
        {diffDropoff && (
          <div className="booking-field" onClick={(e) => toggle("dropoff", e)}>
            <div className="booking-field-label">Drop-off location</div>
            <div className="booking-field-value">
              {dropoff ? dropoff.name : <span className="placeholder">Select location</span>}
            </div>
            <div className="field-icon"><Icon name="chevron-down" size={14} /></div>
            {open === "dropoff" && <LocationDropdown value={dropoff} onSelect={(l) => { setDropoff(l); setOpen(null); }} />}
          </div>
        )}

        {/* Dropoff date */}
        <div className="booking-field" onClick={(e) => toggle("dDate", e)}>
          <div className="booking-field-label">Drop-off date</div>
          <div className="booking-field-value">
            {dates.end ? fmtShort(dates.end) : <span className="placeholder">Add date</span>}
          </div>
          <div className="field-icon"><Icon name="calendar" size={14} /></div>
          {open === "dDate" && <Calendar start={dates.start} end={dates.end} onChange={(d) => setDates(d)} mode="dropoff" carId={carId} pickupStart={dates.start} anchor={dates.start} />}
        </div>

        {/* Dropoff time — always visible */}
        <div className="booking-field" onClick={(e) => toggle("dTime", e)}>
          <div className="booking-field-label">Drop-off time</div>
          <div className="booking-field-value">{dropoffTime}</div>
          <div className="field-icon"><Icon name="clock" size={14} /></div>
          {open === "dTime" && <TimeDropdown value={dropoffTime} onSelect={(t) => { setDropoffTime(t); setOpen(null); }} />}
        </div>

        {/* Search */}
        <button className="booking-search" onClick={submit}>
          <Icon name="search" size={16} color="white" />
          Search
        </button>
      </div>

      {!diffDropoff && days > 0 && (
        <div style={{padding: "10px 22px 12px", fontSize: 13, color: "var(--ink-500)", display: "flex", justifyContent: "flex-end"}}>
          <span><strong style={{color:"var(--ink-700)", fontWeight:600}}>{days}</strong> day{days>1?"s":""} · returning to <strong style={{color:"var(--ink-700)", fontWeight:600}}>{pickup?.name}</strong></span>
        </div>
      )}
    </div>
  );
};

window.BookingWidget = BookingWidget;
window.fmtShort = fmtShort;
window.LocationDropdown = LocationDropdown;
window.TimeDropdown = TimeDropdown;
window.Calendar = Calendar;
window.addDays = addDays;