import React, { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { bookSlot, saveDetails, selectSlot } from './action';
import { useNavigate } from 'react-router-dom';

const slots = ['10AM', '11AM', '12PM', '1PM', '2PM', '3PM', '4PM'];

const Book = () => {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const { selectedGame, selectedDate, slotBooked, bookingCheck } = useSelector(state => state);

  const [selectedSlot, setSelectedSlot] = useState(null);
  const [name, setName] = useState('');
  const [contact, setContact] = useState('');

  const today = new Date().toISOString().split('T')[0];
  const tomorrow = new Date();
  tomorrow.setDate(new Date().getDate() + 1);
  const formattedTomorrow = tomorrow.toISOString().split('T')[0];

  const handleSlotClick = (slot) => {
    if (bookingCheck.some(b => b.slot === slot && b.date === selectedDate)) return;
    setSelectedSlot(slot);
    dispatch(selectSlot(slot));
  };

  const validate = () => {
    if (!selectedSlot) {
      alert('Select your slot!!!');
      return false;
    }
    const nameRegex = /^[A-Za-z ]+$/;
    const phoneRegex = /^[0-9]{10}$/;
    if (!nameRegex.test(name) || !phoneRegex.test(contact)) {
      alert('Invalid Input!!!');
      return false;
    }
    return true;
  };

  const handleBook = () => {
    if (!validate()) return;
    const bookingID = Math.floor(1000 + Math.random() * 9000);
    dispatch(bookSlot({ id: bookingID, name, contact, game: selectedGame[0], slot: selectedSlot, date: selectedDate }));
    dispatch(saveDetails({ id: bookingID, name, contact }));
    alert(`Booking successful! Your ID is ${bookingID}`);
    navigate('/');
  };

  const renderSlots = () => {
    return slots.map(slot => {
      const isBooked = bookingCheck.some(b => b.slot === slot && b.date === selectedDate);
      const isSelected = selectedSlot === slot;
      let color = 'green';
      if (isBooked) color = 'red';
      else if (isSelected) color = 'blue';

      return (
        <button
          key={slot}
          onClick={() => handleSlotClick(slot)}
          style={{ backgroundColor: color, margin: '5px' }}
        >
          {slot}
        </button>
      );
    });
  };

  return (
    <div>
      <h2>Game: {selectedGame[0]}</h2>
      <h3>Date: {selectedDate}</h3>
      <button onClick={() => navigate('/')}>Back</button>

      {selectedDate === today && <p>Booking has been closed. Book your slot for {formattedTomorrow}</p>}
      {selectedDate === formattedTomorrow && (
        <>
          <div>{renderSlots()}</div>
          <input placeholder="Name" value={name} onChange={(e) => setName(e.target.value)} />
          <input placeholder="Contact" value={contact} onChange={(e) => setContact(e.target.value)} />
          <button onClick={handleBook}>Book Now</button>
        </>
      )}
      {selectedDate > formattedTomorrow && <p>Booking is not opened yet</p>}
    </div>
  );
};

export default Book;