import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';

const ReservationConfirmation = () => {
    const navigate = useNavigate();

    const [restaurant, setRestaurant] = useState({});
    const [table, setTable] = useState({});
    const [reservationDateTime, setReservationDateTime] = useState('');
    const [partySize, setPartySize] = useState('');
    const [specialRequests, setSpecialRequests] = useState('');
    const { tableNumber, timeSlot, restaurantId } = useParams();

    useEffect(() => {
        const fetchTableDetails = async () => {
            try {
                const tableResponse = await axios.get(`http://localhost:8080/api/tables/${tableNumber}`);
                setTable(tableResponse.data);

                const restaurantResponse = await axios.get(`http://localhost:8080/api/restaurants/${restaurantId}`);
                setRestaurant(restaurantResponse.data);
            } catch (error) {
                console.error('Error fetching table details:', error);
            }
        };
        fetchTableDetails();
    }, [tableNumber, restaurantId]);

    const handleSubmit = async (e) => {
        e.preventDefault();
        // Handle form submission here
        try {
            // Check if restaurant and table are valid
            if (!restaurant || !table) {
                console.error("Restaurant or table is missing.");
                return;
            }

            const response = await axios.post(`http://localhost:8080/api/reservations`, {
                restaurant: restaurant, // Assuming restaurant has an 'id' property
                table: table, // Assuming table has an 'id' property
                checkInTime: timeSlot, // Fill in as needed
                partySize: partySize,
                specialRequests: specialRequests
            });
            // Handle successful reservation creation
            // console.log("Reservation created:", response.data);
            navigate("/reservations")
        } catch (error) {
            console.error("Error creating reservation:", error);
        }
    };

    const initialRemainingTime = localStorage.getItem('remainingTime') || 300;
    const [remainingTime, setRemainingTime] = useState(parseInt(initialRemainingTime));

    useEffect(() => {
        const timer = setInterval(() => {
            setRemainingTime((prevTime) => {
                const newTime = prevTime - 1;
                localStorage.setItem('remainingTime', newTime.toString()); // Update remaining time in localStorage
                return newTime;
            });
        }, 1000);

        return () => clearInterval(timer);
    }, []);

    useEffect(() => {
        // Reset remaining time if it reaches zero
        if (remainingTime <= 0) {
            localStorage.removeItem('remainingTime');
            // Optionally, handle releasing the hold on the table
        }
    }, [remainingTime]);

    const formatTime = (timeInSeconds) => {
        const minutes = Math.floor(timeInSeconds / 60);
        const seconds = timeInSeconds % 60;
        return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
    };

    return (
        <div className="container mt-5">
            <div className="row justify-content-center">
                <div className="col-md-6">
                    <div className="card">
                        <div className="card-header">
                            <h3 className="text-center">Reservation Confirmation</h3>
                            <p>Remaining Time: {formatTime(remainingTime)}</p>
                        </div>
                        <form onSubmit={handleSubmit}>
                            <div className="card-body">
                                <h5 className="card-title">Reservation Details</h5>
                                <p className="card-text">
                                    <strong>Restaurant:</strong> {restaurant.name || 'Loading...'} <br/>
                                    <strong>Cuisine type:</strong> {restaurant.cuisineType || 'Loading...'} <br/>
                                    <strong>Selected Time Slot:</strong> {timeSlot} <br/>
                                    <strong>Party size:</strong> <input type="number" max={table.capacity}
                                                                        value={partySize}
                                                                        onChange={(e) => setPartySize(e.target.value)}/>
                                    <strong>Table size:</strong> {table.capacity} <br/>
                                    <strong>Special Requests:</strong> <input type="text" value={specialRequests}
                                                                              onChange={(e) => setSpecialRequests(e.target.value)}/><br/>
                                </p>
                                <p className="card-text text-success">
                                    <strong>Check-in Time: grace period of 15 minutes +- the slot, for more call the
                                        restaurant</strong><br/>
                                </p>
                            </div>
                            <div className="card-footer">
                                <button type="submit" className="btn btn-primary">Submit</button>
                            </div>
                            <div className="card-footer">
                                <a href="/restaurants" className="btn btn-primary">Back to Restaurants</a>
                            </div>
                            <div className="card-footer">
                                <a href="/" className="btn btn-primary">Back to Home</a>
                            </div>
                        </form>
                    </div>
                </div>

            </div>
        </div>
    );
};

export default ReservationConfirmation;