"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 ContactUsPage() {
    const [name, setName] = useState("");
    const [email, setEmail] = useState("");
    const [phone, setPhone] = useState("");
    const [messageText, setMessageText] = 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 || !email || !messageText) {
            setMessage({ type: "error", text: "Name, Email, and Message are required." });
            return;
        }
        if (!/^[[\w-]+(?:\.[\w-]+)*@(?:[\w-]+\.)+[a-zA-Z]{2,7}$/.test(email)) {
            setMessage({ type: "error", text: "Please enter a valid email address." });
            return;
        }

        try {
            // Simulate API call
            console.log("Submitting contact form:", { name, email, phone, messageText });
            await new Promise(resolve => setTimeout(resolve, 1000)); // Simulate network delay

            setMessage({ type: "success", text: "Your message has been sent successfully! We will get back to you shortly." });
            // Clear form
            setName("");
            setEmail("");
            setPhone("");
            setMessageText("");
        } catch (error) {
            setMessage({ type: "error", text: "Failed to send message. 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">Contact Us</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="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="phone" className="mb-1 block text-sm font-medium text-foreground">Phone Number (Optional)</label>
                                <Input
                                    id="phone"
                                    value={phone}
                                    onChange={setPhone}
                                    type="tel"
                                    placeholder="Your Phone Number"
                                    className="w-full"
                                />
                            </div>
                            <div>
                                <label htmlFor="messageText" className="mb-1 block text-sm font-medium text-foreground">Message</label>
                                <textarea
                                    id="messageText"
                                    value={messageText}
                                    onChange={(e) => setMessageText(e.target.value)}
                                    placeholder="Your message or inquiry"
                                    rows={5}
                                    required
                                    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="Send Message"
                                type="submit"
                                className="w-full bg-primary-cta text-primary-cta-text hover:bg-opacity-90"
                            />
                        </form>
                    </div>
                </div>
            </ReactLenis>
        </ThemeProvider>
    );
}