"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { useState } from 'react';
import { Calendar, Clock, Users, Palette, CheckCircle } from 'lucide-react';

export default function BookingPage() {
  const [formData, setFormData] = useState({
    eventType: '',
    eventDate: '',
    eventTime: '',
    guestCount: '',
    budget: '',
    notes: '',
  });

  const [submitted, setSubmitted] = useState(false);

  const navItems = [
    { name: "Home", id: "/" },
    { name: "Services", id: "/#services" },
    { name: "Gallery", id: "/gallery" },
    { name: "Packages", id: "/#packages" },
    { name: "About", id: "/#about" },
    { name: "Booking", id: "/booking" },
    { name: "Contact", id: "/contact" },
  ];

  const footerColumns = [
    {
      title: "Services",      items: [
        { label: "Kids Party Face Painting", href: "/services" },
        { label: "Festival Face Art", href: "/services" },
        { label: "Corporate Events", href: "/services" },
        { label: "Body Painting", href: "/services" },
        { label: "Custom Designs", href: "/services" },
      ],
    },
    {
      title: "Company",      items: [
        { label: "About Us", href: "/#about" },
        { label: "Gallery", href: "/gallery" },
        { label: "Packages", href: "/#packages" },
        { label: "FAQ", href: "/#faq" },
        { label: "Contact", href: "/contact" },
      ],
    },
    {
      title: "Connect",      items: [
        { label: "Instagram", href: "https://instagram.com" },
        { label: "Facebook", href: "https://facebook.com" },
        { label: "TikTok", href: "https://tiktok.com" },
        { label: "Email", href: "mailto:paintasy@events.com" },
        { label: "Phone", href: "tel:+15551234567" },
      ],
    },
    {
      title: "Service Areas",      items: [
        { label: "Local Events", href: "/contact" },
        { label: "Regional Coverage", href: "/contact" },
        { label: "Book Now", href: "/booking" },
        { label: "Get Quote", href: "/contact" },
      ],
    },
  ];

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setSubmitted(true);
    setTimeout(() => setSubmitted(false), 5000);
  };

  const availableDates = [
    { date: '2025-02-15', available: true },
    { date: '2025-02-16', available: false },
    { date: '2025-02-17', available: true },
    { date: '2025-02-22', available: true },
    { date: '2025-02-23', available: true },
    { date: '2025-03-01', available: true },
    { date: '2025-03-02', available: false },
    { date: '2025-03-08', available: true },
    { date: '2025-03-09', available: true },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="compact"
      sizing="large"
      background="none"
      cardStyle="gradient-bordered"
      primaryButtonStyle="flat"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          brandName="Paintasy"
          navItems={navItems}
          bottomLeftText="Creative Face & Body Art"
          bottomRightText="paintasy@events.com"
        />
      </div>

      <div id="hero-booking" data-section="hero-booking" className="mx-auto px-4 md:px-6">
        <HeroLogo
          logoText="Event Booking"
          description="Secure your date and customize your face painting and body art experience. Check availability, fill out your booking form, and let's create something amazing."
          buttons={[{ text: "Scroll to Book", href: "#booking-form" }]}
          buttonAnimation="blur-reveal"
          showDimOverlay={false}
          ariaLabel="Booking page hero section"
          className="min-h-screen flex items-center justify-center"
          containerClassName="text-center"
          descriptionClassName="text-lg opacity-90 max-w-2xl mx-auto"
          logoContainerClassName="mb-6"
          logoClassName="text-5xl md:text-6xl font-extrabold"
        />
      </div>

      <div id="availability-calendar" data-section="availability-calendar" className="mx-auto px-4 md:px-6 py-16">
        <div className="max-w-4xl mx-auto">
          <h2 className="text-4xl font-extrabold mb-4 text-center">Availability Calendar</h2>
          <p className="text-lg opacity-90 text-center mb-12 max-w-2xl mx-auto">Check our availability and select your preferred event date. Green indicates available dates, red shows booked slots.</p>
          
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div className="space-y-4">
              <div className="flex items-center gap-3 p-3 bg-green-100 rounded-lg">
                <div className="w-4 h-4 bg-green-500 rounded"></div>
                <span className="text-sm font-medium">Available</span>
              </div>
              <div className="flex items-center gap-3 p-3 bg-red-100 rounded-lg">
                <div className="w-4 h-4 bg-red-500 rounded"></div>
                <span className="text-sm font-medium">Booked</span>
              </div>
            </div>
            
            <div className="grid grid-cols-3 gap-2">
              {availableDates.map((slot) => {
                const date = new Date(slot.date);
                return (
                  <button
                    key={slot.date}
                    className={`p-3 rounded-lg font-semibold text-sm transition-all ${
                      slot.available
                        ? 'bg-green-100 text-green-900 hover:bg-green-200 cursor-pointer'
                        : 'bg-red-100 text-red-900 cursor-not-allowed opacity-50'
                    }`}
                    disabled={!slot.available}
                  >
                    {date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
                  </button>
                );
              })}
            </div>
          </div>
        </div>
      </div>

      <div id="booking-form" data-section="booking-form" className="mx-auto px-4 md:px-6 py-16">
        <div className="max-w-2xl mx-auto">
          <h2 className="text-4xl font-extrabold mb-4 text-center">Booking Form</h2>
          <p className="text-lg opacity-90 text-center mb-12">Tell us about your event and we'll customize the perfect package for you.</p>
          
          {submitted ? (
            <div className="bg-green-100 border-2 border-green-500 rounded-lg p-8 text-center">
              <CheckCircle className="w-12 h-12 text-green-600 mx-auto mb-4" />
              <h3 className="text-2xl font-bold mb-2">Booking Request Submitted!</h3>
              <p className="text-lg opacity-90">We'll contact you within 24 hours to confirm your event details and finalize your booking.</p>
            </div>
          ) : (
            <form onSubmit={handleSubmit} className="space-y-6 bg-white bg-opacity-5 backdrop-blur-sm p-8 rounded-lg border border-white border-opacity-10">
              <div>
                <label htmlFor="eventType" className="block text-sm font-semibold mb-2">Event Type *</label>
                <select
                  id="eventType"
                  name="eventType"
                  value={formData.eventType}
                  onChange={handleInputChange}
                  required
                  className="w-full px-4 py-2 rounded-lg bg-white bg-opacity-10 border border-white border-opacity-20 focus:outline-none focus:border-opacity-50 transition-all"
                >
                  <option value="">Select event type</option>
                  <option value="birthday">Birthday Party</option>
                  <option value="festival">Festival/Outdoor Event</option>
                  <option value="corporate">Corporate Event</option>
                  <option value="wedding">Wedding/Reception</option>
                  <option value="other">Other</option>
                </select>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <label htmlFor="eventDate" className="block text-sm font-semibold mb-2 flex items-center gap-2">
                    <Calendar className="w-4 h-4" /> Event Date *
                  </label>
                  <input
                    type="date"
                    id="eventDate"
                    name="eventDate"
                    value={formData.eventDate}
                    onChange={handleInputChange}
                    required
                    className="w-full px-4 py-2 rounded-lg bg-white bg-opacity-10 border border-white border-opacity-20 focus:outline-none focus:border-opacity-50 transition-all"
                  />
                </div>

                <div>
                  <label htmlFor="eventTime" className="block text-sm font-semibold mb-2 flex items-center gap-2">
                    <Clock className="w-4 h-4" /> Event Time *
                  </label>
                  <input
                    type="time"
                    id="eventTime"
                    name="eventTime"
                    value={formData.eventTime}
                    onChange={handleInputChange}
                    required
                    className="w-full px-4 py-2 rounded-lg bg-white bg-opacity-10 border border-white border-opacity-20 focus:outline-none focus:border-opacity-50 transition-all"
                  />
                </div>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <label htmlFor="guestCount" className="block text-sm font-semibold mb-2 flex items-center gap-2">
                    <Users className="w-4 h-4" /> Expected Guest Count *
                  </label>
                  <input
                    type="number"
                    id="guestCount"
                    name="guestCount"
                    value={formData.guestCount}
                    onChange={handleInputChange}
                    placeholder="e.g., 30"
                    required
                    min="1"
                    className="w-full px-4 py-2 rounded-lg bg-white bg-opacity-10 border border-white border-opacity-20 focus:outline-none focus:border-opacity-50 transition-all"
                  />
                </div>

                <div>
                  <label htmlFor="budget" className="block text-sm font-semibold mb-2 flex items-center gap-2">
                    <Palette className="w-4 h-4" /> Budget (Optional)
                  </label>
                  <input
                    type="text"
                    id="budget"
                    name="budget"
                    value={formData.budget}
                    onChange={handleInputChange}
                    placeholder="e.g., $200-300"
                    className="w-full px-4 py-2 rounded-lg bg-white bg-opacity-10 border border-white border-opacity-20 focus:outline-none focus:border-opacity-50 transition-all"
                  />
                </div>
              </div>

              <div>
                <label htmlFor="notes" className="block text-sm font-semibold mb-2">Additional Notes</label>
                <textarea
                  id="notes"
                  name="notes"
                  value={formData.notes}
                  onChange={handleInputChange}
                  placeholder="Tell us about your vision, themes, special requests, etc."
                  rows={4}
                  className="w-full px-4 py-2 rounded-lg bg-white bg-opacity-10 border border-white border-opacity-20 focus:outline-none focus:border-opacity-50 transition-all resize-none"
                />
              </div>

              <button
                type="submit"
                className="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-bold py-3 px-6 rounded-lg transition-all duration-300 transform hover:scale-105"
              >
                Submit Booking Request
              </button>
              
              <p className="text-sm opacity-75 text-center">* Required fields. We'll contact you shortly to confirm and discuss details.</p>
            </form>
          )}
        </div>
      </div>

      <div id="footer-booking" data-section="footer-booking" className="mx-auto px-4 md:px-6">
        <FooterSimple
          columns={footerColumns}
          bottomLeftText="© 2024 Paintasy Face and Body Art. All rights reserved."
          bottomRightText="Professional Event Entertainment | Creative Services"
          ariaLabel="Site footer with links"
          containerClassName="gap-12"
          columnsClassName="grid-cols-2 lg:grid-cols-4"
          columnTitleClassName="font-extrabold text-lg"
          columnItemClassName="hover:opacity-70 transition-opacity"
        />
      </div>
    </ThemeProvider>
  );
}
