import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import './BookingPage.css';

function BookingPage() {
    const [formData, setFormData] = useState({
        name: '',
        email: '',
        checkin: '',
        checkout: ''
    });
    const [message, setMessage] = useState('');
    const [isSuccess, setIsSuccess] = useState(false);
    const navigate = useNavigate();

    const handleChange = (e) => {
        setFormData({ ...formData, [e.target.name]: e.target.value });
    };

    const handleSubmit = async (e) => {
        e.preventDefault();

        const checkinDate = new Date(formData.checkin);
        const checkoutDate = new Date(formData.checkout);
        const today = new Date();
        today.setHours(0, 0, 0, 0); 

        if (checkinDate < today) {
            setMessage('Check-in date cannot be in the past.');
            setIsSuccess(false);
            return;
        }

        if (checkoutDate <= checkinDate) {
            setMessage('Check-out date must be after check-in date.');
            setIsSuccess(false);
            return;
        }

        try {
            await submitForm(formData); 
            setMessage('Booking successful!');
            setIsSuccess(true);
            setFormData({ name: '', email: '', checkin: '', checkout: '' }); 
        } catch (error) {
            setMessage('Booking failed. Please try again.');
            setIsSuccess(false);
        }
    };

    const handleBackToHome = () => {
        navigate('/');
    };

    const submitForm = (data) => {
        return new Promise((resolve) => {
            setTimeout(() => {
                resolve();
            }, 2000);
        });
    };

    return (
        <div className="booking-page dark-theme">
            <button className="back-to-home-button" onClick={handleBackToHome}>
                Back to Home
            </button>

            <h1>Book Your Apartment Now!</h1>
            <p>Please fill out the form below to complete your booking.</p>

            <form className="booking-form" onSubmit={handleSubmit}>
                <div className="form-group">
                    <label htmlFor="name">Name:</label>
                    <input type="text" id="name" name="name" required value={formData.name} onChange={handleChange} />
                </div>

                <div className="form-group">
                    <label htmlFor="email">Email:</label>
                    <input type="email" id="email" name="email" required value={formData.email} onChange={handleChange} />
                </div>

                <div className="form-group">
                    <label htmlFor="checkin">Check-in Date:</label>
                    <input type="date" id="checkin" name="checkin" required value={formData.checkin} onChange={handleChange} />
                </div>

                <div className="form-group">
                    <label htmlFor="checkout">Check-out Date:</label>
                    <input type="date" id="checkout" name="checkout" required value={formData.checkout} onChange={handleChange} />
                </div>

                <button type="submit" className="submit-button">Complete Booking</button>
            </form>

            {message && (
                <div className={`message ${isSuccess ? 'success' : 'error'}`}>
                    {message}
                </div>
            )}
        </div>
    );
}

export default BookingPage;