"use client"

import { useState } from "react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Calendar, Clock, User, Mail, Phone, Sparkles, ChevronLeft } from 'lucide-react';

export default function BookingPage() {
  const [selectedDate, setSelectedDate] = useState("");
  const [selectedTime, setSelectedTime] = useState("");
  const [selectedService, setSelectedService] = useState("");
  const [fullName, setFullName] = useState("");
  const [email, setEmail] = useState("");
  const [phoneNumber, setPhoneNumber] = useState("");
  const [submitted, setSubmitted] = useState(false);

  const services = [
    { id: "consultation", name: "Skin Analysis & Consultation", duration: "30 min", price: "$50" },
    { id: "makeup", name: "Makeup Application", duration: "45 min", price: "$75" },
    { id: "facial", name: "Premium Facials", duration: "60 min", price: "$100" },
    { id: "brow", name: "Eyebrow Design", duration: "20 min", price: "$30" },
    { id: "lash", name: "Lash Extensions", duration: "90 min", price: "$120" },
    { id: "nails", name: "Nail Art", duration: "45 min", price: "$60" }
  ];

  const timeSlots = [
    "9:00 AM", "9:30 AM", "10:00 AM", "10:30 AM", "11:00 AM", "11:30 AM",    "12:00 PM", "1:00 PM", "1:30 PM", "2:00 PM", "2:30 PM", "3:00 PM",    "3:30 PM", "4:00 PM", "4:30 PM", "5:00 PM"
  ];

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (selectedDate && selectedTime && selectedService && fullName && email && phoneNumber) {
      setSubmitted(true);
      setTimeout(() => {
        window.location.href = "/";
      }, 3000);
    }
  };

  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="mediumSmall"
      sizing="largeSizeMediumTitles"
      background="floatingGradient"
      cardStyle="solid"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Radiance Beauty"
          navItems={[
            { name: "Gallery", id: "gallery" },
            { name: "Services", id: "services" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Back Home", href: "/" }}
          animateOnLoad={true}
        />
      </div>

      <div className="min-h-screen w-full pt-32 pb-20 px-4">
        <div className="w-full max-w-2xl mx-auto">
          <div className="mb-12">
            <a href="/" className="inline-flex items-center gap-2 text-sm text-foreground/70 hover:text-foreground mb-8 transition-colors">
              <ChevronLeft className="w-4 h-4" />
              Back to Home
            </a>
            <h1 className="text-4xl md:text-5xl font-light mb-3 flex items-center gap-3">
              <Sparkles className="w-8 h-8 md:w-10 md:h-10" />
              Book Your Appointment
            </h1>
            <p className="text-lg text-foreground/70">Schedule your beauty session with our expert team</p>
          </div>

          {submitted ? (
            <div className="bg-primary-cta/10 border border-primary-cta rounded-2xl p-8 text-center">
              <div className="w-16 h-16 rounded-full bg-primary-cta/20 flex items-center justify-center mx-auto mb-4">
                <Sparkles className="w-8 h-8 text-primary-cta" />
              </div>
              <h2 className="text-2xl font-semibold mb-2">Booking Confirmed!</h2>
              <p className="text-foreground/70 mb-4">Thank you for booking with Radiance Beauty Studio. We've sent a confirmation email to {email}</p>
              <p className="text-sm text-foreground/60">Our team will contact you within 24 hours to confirm your appointment.</p>
              <p className="text-sm text-foreground/60 mt-4">Redirecting to home page...</p>
            </div>
          ) : (
            <form onSubmit={handleSubmit} className="space-y-8">
              {/* Service Selection */}
              <div className="space-y-4">
                <label className="block text-lg font-medium">Select Service *</label>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                  {services.map((service) => (
                    <button
                      key={service.id}
                      type="button"
                      onClick={() => setSelectedService(service.id)}
                      className={`p-4 rounded-xl border-2 transition-all text-left ${
                        selectedService === service.id
                          ? "border-primary-cta bg-primary-cta/10"
                          : "border-card hover:border-primary-cta/50"
                      }`}
                    >
                      <div className="font-medium text-sm">{service.name}</div>
                      <div className="text-xs text-foreground/60 mt-1">{service.duration} • {service.price}</div>
                    </button>
                  ))}
                </div>
              </div>

              {/* Date Selection */}
              <div className="space-y-4">
                <label className="block text-lg font-medium flex items-center gap-2">
                  <Calendar className="w-5 h-5" />
                  Select Date *
                </label>
                <input
                  type="date"
                  value={selectedDate}
                  onChange={(e) => setSelectedDate(e.target.value)}
                  required
                  className="w-full px-4 py-3 rounded-xl bg-card border border-foreground/10 focus:border-primary-cta focus:outline-none transition-colors"
                />
              </div>

              {/* Time Selection */}
              <div className="space-y-4">
                <label className="block text-lg font-medium flex items-center gap-2">
                  <Clock className="w-5 h-5" />
                  Select Time *
                </label>
                <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
                  {timeSlots.map((time) => (
                    <button
                      key={time}
                      type="button"
                      onClick={() => setSelectedTime(time)}
                      className={`py-2 px-3 rounded-lg border-2 transition-all text-sm ${
                        selectedTime === time
                          ? "border-primary-cta bg-primary-cta/10"
                          : "border-card hover:border-primary-cta/50"
                      }`}
                    >
                      {time}
                    </button>
                  ))}
                </div>
              </div>

              {/* User Details */}
              <div className="space-y-4">
                <h3 className="text-lg font-medium">Your Information</h3>
                
                <div>
                  <label className="block text-sm font-medium mb-2 flex items-center gap-2">
                    <User className="w-4 h-4" />
                    Full Name *
                  </label>
                  <input
                    type="text"
                    value={fullName}
                    onChange={(e) => setFullName(e.target.value)}
                    placeholder="Enter your full name"
                    required
                    className="w-full px-4 py-3 rounded-xl bg-card border border-foreground/10 focus:border-primary-cta focus:outline-none transition-colors"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium mb-2 flex items-center gap-2">
                    <Mail className="w-4 h-4" />
                    Email Address *
                  </label>
                  <input
                    type="email"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    placeholder="Enter your email"
                    required
                    className="w-full px-4 py-3 rounded-xl bg-card border border-foreground/10 focus:border-primary-cta focus:outline-none transition-colors"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium mb-2 flex items-center gap-2">
                    <Phone className="w-4 h-4" />
                    Phone Number *
                  </label>
                  <input
                    type="tel"
                    value={phoneNumber}
                    onChange={(e) => setPhoneNumber(e.target.value)}
                    placeholder="Enter your phone number"
                    required
                    className="w-full px-4 py-3 rounded-xl bg-card border border-foreground/10 focus:border-primary-cta focus:outline-none transition-colors"
                  />
                </div>
              </div>

              {/* Booking Summary */}
              <div className="bg-card rounded-xl p-6 border border-foreground/10">
                <h3 className="font-medium mb-4">Booking Summary</h3>
                <div className="space-y-2 text-sm">
                  <div className="flex justify-between">
                    <span className="text-foreground/70">Service:</span>
                    <span className="font-medium">
                      {selectedService ? services.find(s => s.id === selectedService)?.name : "Not selected"}
                    </span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-foreground/70">Date:</span>
                    <span className="font-medium">{selectedDate || "Not selected"}</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-foreground/70">Time:</span>
                    <span className="font-medium">{selectedTime || "Not selected"}</span>
                  </div>
                </div>
              </div>

              {/* Submit Button */}
              <button
                type="submit"
                disabled={!selectedDate || !selectedTime || !selectedService || !fullName || !email || !phoneNumber}
                className="w-full py-4 px-6 bg-primary-cta text-foreground font-medium rounded-xl hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed transition-opacity"
              >
                Confirm Appointment
              </button>

              <p className="text-xs text-foreground/60 text-center">
                We respect your privacy. Your appointment details will be kept confidential and used only for scheduling purposes.
              </p>
            </form>
          )}
        </div>
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="Radiance Beauty"
          leftLink={{ text: "Privacy Policy", href: "#" }}
          rightLink={{ text: "Terms & Conditions", href: "#" }}
        />
      </div>
    </ThemeProvider>
  );
}