// availability.jsx — dummy 2-month booked/available calendar for CarAbout

const monthNames = ["January","February","March","April","May","June","July","August","September","October","November","December"];
const dayLabels = ["S","M","T","W","T","F","S"];

// deterministic "booked" pattern per car id so each vehicle has its own pattern
const seedBookings = (carId, year, month) => {
  let h = 0;
  const key = `${carId}-${year}-${month}`;
  for (let i = 0; i < key.length; i++) h = (h * 31 + key.charCodeAt(i)) >>> 0;
  const rand = () => { h = (h * 1664525 + 1013904223) >>> 0; return h / 0xffffffff; };
  const days = new Date(year, month + 1, 0).getDate();
  const booked = new Set();
  // 2-3 booked ranges per month, each 2-5 days
  const ranges = 2 + Math.floor(rand() * 2);
  for (let r = 0; r < ranges; r++) {
    const start = 1 + Math.floor(rand() * (days - 6));
    const len = 2 + Math.floor(rand() * 4);
    for (let d = 0; d < len; d++) booked.add(start + d);
  }
  return booked;
};

const AvailabilityMonth = ({ year, month, carId }) => {
  const today = new Date();
  today.setHours(0,0,0,0);
  const firstDay = new Date(year, month, 1).getDay();
  const days = new Date(year, month + 1, 0).getDate();
  const booked = seedBookings(carId, year, month);

  const cells = [];
  for (let i = 0; i < firstDay; i++) cells.push(<div key={`b${i}`} className="av-cell av-empty"></div>);
  for (let d = 1; d <= days; d++) {
    const date = new Date(year, month, d);
    const isPast = date < today;
    const isBooked = booked.has(d);
    const isToday = date.getTime() === today.getTime();
    let cls = "av-cell";
    if (isPast) cls += " av-past";
    else if (isBooked) cls += " av-booked";
    else cls += " av-free";
    if (isToday) cls += " av-today";
    cells.push(
      <div key={d} className={cls}>
        <span className="av-num">{d}</span>
      </div>
    );
  }

  return (
    <div className="av-month">
      <div className="av-month-head">{monthNames[month]} {year}</div>
      <div className="av-day-row">
        {dayLabels.map((d, i) => <div key={i} className="av-day-lbl">{d}</div>)}
      </div>
      <div className="av-grid">{cells}</div>
    </div>
  );
};

const Availability = ({ carId }) => {
  const now = new Date();
  const m1 = { y: now.getFullYear(), m: now.getMonth() };
  const next = new Date(now.getFullYear(), now.getMonth() + 1, 1);
  const m2 = { y: next.getFullYear(), m: next.getMonth() };

  return (
    <div className="availability">
      <div className="av-legend">
        <span><span className="av-swatch av-sw-free"></span>Available</span>
        <span><span className="av-swatch av-sw-booked"></span>Booked</span>
        <span><span className="av-swatch av-sw-past"></span>Past</span>
      </div>
      <div className="av-months">
        <AvailabilityMonth year={m1.y} month={m1.m} carId={carId} />
        <AvailabilityMonth year={m2.y} month={m2.m} carId={carId} />
      </div>
      <div className="av-note">
        Live availability — bookings are blocked in real time. To reserve, pick your dates above and continue to driver info.
      </div>
    </div>
  );
};

window.Availability = Availability;