"use client";

import { useState } from "react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import Input from "@/components/form/Input";
import ButtonTextStagger from "@/components/button/ButtonTextStagger/ButtonTextStagger";
import ReactLenis from "lenis/react";

export default function ReservationsPage() {
    const [name, setName] = useState("");
    const [phone, setPhone] = useState("");
    const [email, setEmail] = useState("");
    const [guests, setGuests] = useState("1");
    const [date, setDate] = useState("");
    const [time, setTime] = useState("");
    const [requests, setRequests] = useState("");
    const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        setMessage(null);

        // Basic validation
        if (!name || !phone || !email || !guests || !date || !time) {
            setMessage({ type: "error", text: "Please fill in all required fields." });
            return;
        }
        if (!/^[[\w-]+(?:\.[\w-]+)*@(?:[\w-]+\.)+[a-zA-Z]{2,7}$/.test(email)) {
            setMessage({ type: "error", text: "Please enter a valid email address." });
            return;
        }
        if (parseInt(guests) < 1) {
            setMessage({ type: "error", text: "Number of guests must be at least 1." });
            return;
        }

        try {
            // Simulate API call
            console.log("Submitting reservation:", { name, phone, email, guests, date, time, requests });
            await new Promise(resolve => setTimeout(resolve, 1000)); // Simulate network delay

            setMessage({ type: "success", text: "Your reservation has been successfully placed! We look forward to seeing you." });
            // Clear form
            setName("");
            setPhone("");
            setEmail("");
            setGuests("1");
            setDate("");
            setTime("");
            setRequests("");
        } catch (error) {
            setMessage({ type: "error", text: "Failed to place reservation. Please try again." });
        }
    };

    return (
        <ThemeProvider
            defaultButtonVariant="icon-arrow"
            defaultTextAnimation="background-highlight"
            borderRadius="soft"
            contentWidth="medium"
            sizing="mediumLarge"
            background="floatingGradient"
            cardStyle="glass-elevated"
            primaryButtonStyle="shadow"
            secondaryButtonStyle="layered"
            headingFontWeight="semibold"
        >
            <ReactLenis root>
                <div id="nav" data-section="nav">
                    <NavbarLayoutFloatingInline
                        brandName="Kerala Flavors"
                        navItems={[
                            { name: "Menu", id: "/#menu" },
                            { name: "About", id: "/#about" },
                            { name: "Reservations", id: "/reservations" },
                            { name: "Contact Us", id: "/contact-us" },
                            { name: "Reviews", id: "/#testimonials" }
                        ]}
                        button={{
                            text: "Book a Table",                            href: "/reservations"
                        }}
                    />
                </div>

                <div className="relative isolate flex min-h-screen flex-col items-center justify-center p-4">
                    <div className="relative z-10 w-full max-w-lg rounded-lg bg-card p-8 shadow-lg">
                        <h2 className="mb-6 text-center text-3xl font-semibold text-foreground">Make a Reservation</h2>
                        <form onSubmit={handleSubmit} className="space-y-4">
                            <div>
                                <label htmlFor="name" className="mb-1 block text-sm font-medium text-foreground">Name</label>
                                <Input
                                    id="name"
                                    value={name}
                                    onChange={setName}
                                    placeholder="Your Name"
                                    required
                                    className="w-full"
                                />
                            </div>
                            <div>
                                <label htmlFor="phone" className="mb-1 block text-sm font-medium text-foreground">Phone Number</label>
                                <Input
                                    id="phone"
                                    value={phone}
                                    onChange={setPhone}
                                    type="tel"
                                    placeholder="Your Phone Number"
                                    required
                                    className="w-full"
                                />
                            </div>
                            <div>
                                <label htmlFor="email" className="mb-1 block text-sm font-medium text-foreground">Email</label>
                                <Input
                                    id="email"
                                    value={email}
                                    onChange={setEmail}
                                    type="email"
                                    placeholder="Your Email Address"
                                    required
                                    className="w-full"
                                />
                            </div>
                            <div>
                                <label htmlFor="guests" className="mb-1 block text-sm font-medium text-foreground">Number of Guests</label>
                                <Input
                                    id="guests"
                                    value={guests}
                                    onChange={setGuests}
                                    type="number"
                                    required
                                    className="w-full"
                                />
                            </div>
                            <div>
                                <label htmlFor="date" className="mb-1 block text-sm font-medium text-foreground">Date</label>
                                <Input
                                    id="date"
                                    value={date}
                                    onChange={setDate}
                                    type="date"
                                    required
                                    className="w-full"
                                />
                            </div>
                            <div>
                                <label htmlFor="time" className="mb-1 block text-sm font-medium text-foreground">Time</label>
                                <Input
                                    id="time"
                                    value={time}
                                    onChange={setTime}
                                    type="time"
                                    required
                                    className="w-full"
                                />
                            </div>
                            <div>
                                <label htmlFor="requests" className="mb-1 block text-sm font-medium text-foreground">Special Requests</label>
                                <textarea
                                    id="requests"
                                    value={requests}
                                    onChange={(e) => setRequests(e.target.value)}
                                    placeholder="Allergies, seating preferences, etc."
                                    rows={3}
                                    className="w-full rounded-md border border-gray-300 bg-background-accent px-3 py-2 text-foreground shadow-sm focus:border-primary-cta focus:ring-primary-cta"
                                />
                            </div>
                            {message && (
                                <div className={`text-center text-sm ${message.type === "success" ? "text-green-500" : "text-red-500"}`}>
                                    {message.text}
                                </div>
                            )}
                            <ButtonTextStagger
                                text="Submit Reservation"
                                type="submit"
                                className="w-full bg-primary-cta text-primary-cta-text hover:bg-opacity-90"
                            />
                        </form>
                    </div>
                </div>
            </ReactLenis>
        </ThemeProvider>
    );
}