import { useState } from 'react';
import { Calendar, Clock } from 'lucide-react';

export default function LaundryBooking() {
  const [selectedDate, setSelectedDate] = useState('');
  const [selectedTime, setSelectedTime] = useState('');
  const [bookings, setBookings] = useState([]);
  const [name, setName] = useState('');
  const [unit, setUnit] = useState('');

  const timeSlots = [
    '08:00', '10:00', '12:00', '14:00', 
    '16:00', '18:00', '20:00'
  ];

  const handleBooking = (e) => {
    e.preventDefault();
    if (!selectedDate || !selectedTime || !name || !unit) {
      alert('Please fill in all fields');
      return;
    }

    const newBooking = {
      id: Date.now(),
      date: selectedDate,
      time: selectedTime,
      name,
      unit
    };

    setBookings([...bookings, newBooking]);
    setSelectedDate('');
    setSelectedTime('');
    setName('');
    setUnit('');
  };

  const isSlotBooked = (date, time) => {
    return bookings.some(booking => 
      booking.date === date && booking.time === time
    );
  };

  return (
    <div className="min-h-screen bg-gray-50 py-12 px-4">
      <div className="max-w-4xl mx-auto">
        <div className="bg-white rounded-xl shadow-lg p-8">
          <h1 className="text-3xl font-bold text-gray-800 mb-8 flex items-center gap-3">
            <Calendar className="w-8 h-8 text-blue-600" />
            Laundry Booking System
          </h1>

          <div className="grid md:grid-cols-2 gap-8">
            {/* Booking Form */}
            <div className="space-y-6">
              <h2 className="text-xl font-semibold text-gray-700">Make a Booking</h2>
              <form onSubmit={handleBooking} className="space-y-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Name
                  </label>
                  <input
                    type="text"
                    value={name}
                    onChange={(e) => setName(e.target.value)}
                    className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                    placeholder="Enter your name"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Unit Number
                  </label>
                  <input
                    type="text"
                    value={unit}
                    onChange={(e) => setUnit(e.target.value)}
                    className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                    placeholder="Enter your unit number"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Date
                  </label>
                  <input
                    type="date"
                    value={selectedDate}
                    onChange={(e) => setSelectedDate(e.target.value)}
                    min={new Date().toISOString().split('T')[0]}
                    className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Time Slot
                  </label>
                  <select
                    value={selectedTime}
                    onChange={(e) => setSelectedTime(e.target.value)}
                    className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                  >
                    <option value="">Select a time slot</option>
                    {timeSlots.map(time => (
                      <option 
                        key={time} 
                        value={time}
                        disabled={isSlotBooked(selectedDate, time)}
                      >
                        {time}
                      </option>
                    ))}
                  </select>
                </div>

                <button
                  type="submit"
                  className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition-colors duration-200"
                >
                  Book Slot
                </button>
              </form>
            </div>

            {/* Bookings List */}
            <div>
              <h2 className="text-xl font-semibold text-gray-700 mb-4">Current Bookings</h2>
              <div className="space-y-3">
                {bookings.map(booking => (
                  <div 
                    key={booking.id}
                    className="bg-gray-50 p-4 rounded-lg border border-gray-200"
                  >
                    <div className="flex items-center gap-2 text-gray-600 mb-2">
                      <Clock className="w-4 h-4" />
                      <span>{booking.date} at {booking.time}</span>
                    </div>
                    <div className="text-sm text-gray-600">
                      <p>Name: {booking.name}</p>
                      <p>Unit: {booking.unit}</p>
                    </div>
                  </div>
                ))}
                {bookings.length === 0 && (
                  <p className="text-gray-500 text-center py-4">
                    No bookings yet
                  </p>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}