import React, { useState } from "react";

// Months April 2026 to November 2026
const months = [
  { name: "April", days: 30 },
  { name: "May", days: 31 },
  { name: "June", days: 30 },
  { name: "July", days: 31 },
  { name: "August", days: 31 },
  { name: "September", days: 30 },
  { name: "October", days: 31 },
  { name: "November", days: 30 },
];

const timeSlots = [
  { id: "slot1", label: "07:00 - 16:30" },
  { id: "slot2", label: "16:30 - 00:00" },
  { id: "slot3", label: "00:00 - 07:00" },
];

export default function BookingCalendar() {
  const [selectedMonth, setSelectedMonth] = useState(0);
  const [bookings, setBookings] = useState({});

  const updateBooking = (day, slot, value) => {
    setBookings((prev) => ({
      ...prev,
      [`${selectedMonth}-${day}-${slot}`]: value,
    }));
  };

  const getDayOfWeek = (day) => {
    // Assuming April 1, 2026 is Wednesday (3) and week starts on Monday (0)
    const firstDayOfMonth = (new Date(2026, selectedMonth + 3, 1).getDay() + 6) % 7;
    return (firstDayOfMonth + day - 1) % 7;
  };

  return (
    <div className="p-6 max-w-6xl mx-auto bg-neutral-100 min-h-screen bg-[linear-gradient(white,white),repeating-linear-gradient(0deg,#f3f3f3_0px,#f3f3f3_2px,#e9e9e9_2px,#e9e9e9_4px)]">
      <h1 className="text-3xl font-bold mb-4">Booking Calendar (2026)</h1>

      <div className="flex gap-4 items-center mb-6">
        <label className="font-semibold">Select month:</label>
        <select
          className="border rounded-xl p-2"
          value={selectedMonth}
          onChange={(e) => setSelectedMonth(Number(e.target.value))}
        >
          {months.map((m, i) => (
            <option key={m.name} value={i}>{m.name}</option>
          ))}
        </select>
      </div>

      {/* Full month grid starting Monday */}
      <div className="grid grid-cols-7 gap-2">
        {['Mon','Tue','Wed','Thu','Fri','Sat','Sun'].map(d => (
          <div key={d} className="font-bold text-center">{d}</div>
        ))}
        {Array.from({ length: getDayOfWeek(1) }).map((_, i) => (
          <div key={`empty-${i}`} />
        ))}
        {Array.from({ length: months[selectedMonth].days }, (_, i) => i + 1).map(day => (
          <div key={day} className="border-2 border-black rounded-xl p-2 min-h-[120px] bg-white shadow-xl ring-1 ring-black/20 flex flex-col">
            <div className="font-semibold mb-1">{day}</div>
            {timeSlots.map(slot => {
              const key = `${selectedMonth}-${day}-${slot.id}`;
              return (
                <div key={slot.id} className="border border-black/40 rounded-lg p-1 mb-1 bg-neutral-50 text-xs flex flex-col">
                  <label>{slot.label}</label>
                  <input
                    type="text"
                    placeholder="Name"
                    className="border rounded p-1 text-xs"
                    value={bookings[key] || ''}
                    onChange={(e) => updateBooking(day, slot.id, e.target.value)}
                  />
                </div>
              );
            })}
          </div>
        ))}
      </div>
    </div>
  );
}