"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 { User, Mail, Phone, Sparkles, ChevronLeft } from 'lucide-react';

export default function BookingPage() {
  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: "ניתוח עור ופנייה", duration: "30 דקות", price: "$50" },
    { id: "makeup", name: "הנחת איפור", duration: "45 דקות", price: "$75" },
    { id: "facial", name: "פנים פרימיום", duration: "60 דקות", price: "$100" },
    { id: "brow", name: "עיצוב גבה", duration: "20 דקות", price: "$30" },
    { id: "lash", name: "הרחבת ריסים", duration: "90 דקות", price: "$120" },
    { id: "nails", name: "ציור ציפורניים", duration: "45 דקות", price: "$60" }
  ];

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (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: "גלריה", id: "#gallery" },
            { name: "שירותים", id: "#services" },
            { name: "תור", id: "/appointments" },
            { name: "יצירת קשר", id: "#appointment" }
          ]}
          button={{ text: "חזור לבית", 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" />
              חזור לבית
            </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" />
              בחר את שירותך
            </h1>
            <p className="text-lg text-foreground/70">בחר שירות ופרטיך האישיים. בחר תאריך וזמן בעמוד התורים.</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">הזמנה אושרה!</h2>
              <p className="text-foreground/70 mb-4">תודה על הזמנה עם סטודיו הגמל רדיאנס. שלחנו דוא&quot;ל אישור אל {email}</p>
              <p className="text-sm text-foreground/60">הצוות שלנו יצור קשר איתך תוך 24 שעות כדי לאשר את הפגישה שלך.</p>
              <p className="text-sm text-foreground/60 mt-4">הפניית לעמוד הבית...</p>
            </div>
          ) : (
            <form onSubmit={handleSubmit} className="space-y-8">
              {/* Service Selection */}
              <div className="space-y-4">
                <label className="block text-lg font-medium">בחר שירות *</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>

              {/* User Details */}
              <div className="space-y-4">
                <h3 className="text-lg font-medium">המידע שלך</h3>
                
                <div>
                  <label className="block text-sm font-medium mb-2 flex items-center gap-2">
                    <User className="w-4 h-4" />
                    שם מלא *
                  </label>
                  <input
                    type="text"
                    value={fullName}
                    onChange={(e) => setFullName(e.target.value)}
                    placeholder="הזן את שמך המלא"
                    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" />
                    כתובת דוא&quot;ל *
                  </label>
                  <input
                    type="email"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    placeholder="הזן את הדוא&quot;ל שלך"
                    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" />
                    מספר טלפון *
                  </label>
                  <input
                    type="tel"
                    value={phoneNumber}
                    onChange={(e) => setPhoneNumber(e.target.value)}
                    placeholder="הזן את מספר הטלפון שלך"
                    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>

              {/* Service Summary */}
              <div className="bg-card rounded-xl p-6 border border-foreground/10">
                <h3 className="font-medium mb-4">סיכום בחירתך</h3>
                <div className="space-y-2 text-sm">
                  <div className="flex justify-between">
                    <span className="text-foreground/70">שירות:</span>
                    <span className="font-medium">
                      {selectedService ? services.find(s => s.id === selectedService)?.name : "לא נבחר"}
                    </span>
                  </div>
                  <div className="flex justify-between text-foreground/60 text-xs mt-2 pt-2 border-t border-foreground/10">
                    <span>בחר תאריך וזמן בעמוד התורים</span>
                  </div>
                </div>
              </div>

              {/* Next Button */}
              <button
                type="submit"
                disabled={!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"
              >
                המשך לבחירת תאריך וזמן
              </button>

              <p className="text-xs text-foreground/60 text-center">
                אנחנו מכבדים את הפרטיות שלך. פרטי הפגישה שלך יישמרו בסודיות ויהיו בשימוש רק לצורך לוח זמנים.
              </p>
            </form>
          )}
        </div>
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="Radiance Beauty"
          leftLink={{ text: "מדיניות פרטיות", href: "#" }}
          rightLink={{ text: "תנאים ותביעות", href: "#" }}
        />
      </div>
    </ThemeProvider>
  );
}