"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Calendar,
  Clock,
  User,
  Mail,
  Phone,
  MessageSquare,
  ArrowLeft,
  Heart,
  CheckCircle2,
} from "lucide-react";
import Link from "next/link";
import Image from "next/image";
import { useRouter } from "next/navigation";

export default function BookNowPage() {
  const router = useRouter();
  const [formData, setFormData] = useState({
    firstName: "",
    lastName: "",
    email: "",
    phone: "",
    appointmentType: "",
    preferredDate: "",
    preferredTime: "",
    message: "",
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // Handle form submission
    console.log("Form submitted:", formData);
    // You can add navigation or API call here
  };

  const handleChange = (field: string, value: string) => {
    setFormData((prev) => ({ ...prev, [field]: value }));
  };

  return (
    <div className="min-h-screen bg-white">
      {/* Main Content */}
      <main className="min-h-screen flex">
        {/* Left Side - Image (Fixed) */}
        <div className="hidden lg:block fixed top-0 left-0 h-screen w-1/2 overflow-hidden z-10 bg-gradient-to-br from-rose-100 via-pink-50 to-orange-50">
          <div className="absolute inset-0">
            <Image
              src="/doctors.png"
              alt="Therapy session"
              fill
              className="object-cover"
              priority
              sizes="50vw"
            />
            <div className="absolute inset-0 bg-black/50"></div>
          </div>
          
          {/* Logo at Top */}
          <div className="absolute top-0 left-0 right-0 z-20 flex items-center p-6">
            <Link href="/" className="flex items-center gap-2">
              <div className="bg-gradient-to-r from-rose-500 to-pink-600 p-2 rounded-xl">
                <Heart className="h-5 w-5 text-white fill-white" />
              </div>
              <span className="font-bold text-lg text-rose-500 drop-shadow-lg">
                Attune Heart Therapy
              </span>
            </Link>
          </div>
          
          {/* Overlay Content - Lower Position */}
          <div className="relative z-10 w-full h-full flex items-end justify-center px-12 pb-20">
            <div className="space-y-4 text-center max-w-sm">
              <h2 className="text-xl md:text-2xl font-bold leading-tight text-white drop-shadow-lg">
                Begin Your Journey to Wellness
              </h2>
              <p className="text-sm md:text-base text-white/95 leading-relaxed drop-shadow-md">
                Take the first step towards healing and growth. Our compassionate team is here to support you every step of the way.
              </p>
              
              {/* Features List */}
              <div className="space-y-2 pt-3">
                <div className="flex items-center justify-center gap-2">
                  <div className="w-7 h-7 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center flex-shrink-0 border border-white/30">
                    <CheckCircle2 className="w-3.5 h-3.5 text-white" />
                  </div>
                  <span className="text-white/95 text-xs md:text-sm">Safe and confidential environment</span>
                </div>
                <div className="flex items-center justify-center gap-2">
                  <div className="w-7 h-7 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center flex-shrink-0 border border-white/30">
                    <CheckCircle2 className="w-3.5 h-3.5 text-white" />
                  </div>
                  <span className="text-white/95 text-xs md:text-sm">Experienced licensed therapists</span>
                </div>
                <div className="flex items-center justify-center gap-2">
                  <div className="w-7 h-7 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center flex-shrink-0 border border-white/30">
                    <CheckCircle2 className="w-3.5 h-3.5 text-white" />
                  </div>
                  <span className="text-white/95 text-xs md:text-sm">Personalized treatment plans</span>
                </div>
                <div className="flex items-center justify-center gap-2">
                  <div className="w-7 h-7 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center flex-shrink-0 border border-white/30">
                    <CheckCircle2 className="w-3.5 h-3.5 text-white" />
                  </div>
                  <span className="text-white/95 text-xs md:text-sm">Flexible scheduling options</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Right Side - Form (Scrollable) */}
        <div className="w-full lg:w-1/2 lg:ml-auto fixed top-0 right-0 h-screen overflow-y-auto bg-white custom-scrollbar">
          <div className="flex items-start justify-center min-h-full">
            <div className="w-full max-w-2xl">
              {/* Page Header */}
              <div className="pt-4 sm:pt-6 lg:pt-8 px-6 sm:px-8 lg:px-12 pb-6">
                <Button
                  variant="ghost"
                  onClick={() => router.back()}
                  className="flex items-center gap-2 text-black hover:bg-gray-100 mb-4"
                >
                  <ArrowLeft className="w-5 h-5" />
                  <span className="hidden sm:inline">Back</span>
                </Button>
                <div>
                  <h1 className="text-2xl font-semibold text-gray-900 mb-1">
                    Book Your Appointment
                  </h1>
                  <p className="text-sm text-gray-500">
                    Fill out the form below and we'll get back to you to confirm your appointment
                  </p>
                </div>
              </div>

              {/* Booking Form */}
              <div className="px-6 sm:px-8 lg:px-12 pb-6 sm:pb-8 lg:pb-12">
                <div className="bg-white rounded-2xl shadow-lg p-6 sm:p-8 border border-gray-200">
                <form onSubmit={handleSubmit} className="space-y-6">
                  {/* Personal Information Section */}
                  <div className="space-y-4">
                    <h2 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
                      <User className="w-5 h-5 text-rose-600" />
                      Personal Information
                    </h2>

                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                      <div className="space-y-2">
                        <label
                          htmlFor="firstName"
                          className="text-sm font-medium text-gray-700"
                        >
                          First Name *
                        </label>
                        <Input
                          id="firstName"
                          type="text"
                          placeholder="John"
                          value={formData.firstName}
                          onChange={(e) =>
                            handleChange("firstName", e.target.value)
                          }
                          required
                          className="h-11"
                        />
                      </div>

                      <div className="space-y-2">
                        <label
                          htmlFor="lastName"
                          className="text-sm font-medium text-gray-700"
                        >
                          Last Name *
                        </label>
                        <Input
                          id="lastName"
                          type="text"
                          placeholder="Doe"
                          value={formData.lastName}
                          onChange={(e) =>
                            handleChange("lastName", e.target.value)
                          }
                          required
                          className="h-11"
                        />
                      </div>
                    </div>

                    <div className="space-y-2">
                      <label
                        htmlFor="email"
                        className="text-sm font-medium text-gray-700 flex items-center gap-2"
                      >
                        <Mail className="w-4 h-4 text-gray-500" />
                        Email Address *
                      </label>
                      <Input
                        id="email"
                        type="email"
                        placeholder="john.doe@example.com"
                        value={formData.email}
                        onChange={(e) => handleChange("email", e.target.value)}
                        required
                        className="h-11"
                      />
                    </div>

                    <div className="space-y-2">
                      <label
                        htmlFor="phone"
                        className="text-sm font-medium text-gray-700 flex items-center gap-2"
                      >
                        <Phone className="w-4 h-4 text-gray-500" />
                        Phone Number *
                      </label>
                      <Input
                        id="phone"
                        type="tel"
                        placeholder="+1 (555) 123-4567"
                        value={formData.phone}
                        onChange={(e) => handleChange("phone", e.target.value)}
                        required
                        className="h-11"
                      />
                    </div>
                  </div>

                  {/* Appointment Details Section */}
                  <div className="space-y-4 pt-6 border-t border-gray-200">
                    <h2 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
                      <Calendar className="w-5 h-5 text-rose-600" />
                      Appointment Details
                    </h2>

                    <div className="space-y-2">
                      <label
                        htmlFor="appointmentType"
                        className="text-sm font-medium text-gray-700"
                      >
                        Appointment Type *
                      </label>
                      <Select
                        value={formData.appointmentType}
                        onValueChange={(value) =>
                          handleChange("appointmentType", value)
                        }
                        required
                      >
                        <SelectTrigger id="appointmentType" className="h-11">
                          <SelectValue placeholder="Select appointment type" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="initial-consultation">
                            Initial Consultation
                          </SelectItem>
                          <SelectItem value="individual-therapy">
                            Individual Therapy
                          </SelectItem>
                          <SelectItem value="family-therapy">Family Therapy</SelectItem>
                          <SelectItem value="couples-therapy">
                            Couples Therapy
                          </SelectItem>
                          <SelectItem value="group-therapy">Group Therapy</SelectItem>
                          <SelectItem value="follow-up">Follow-up Session</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                      <div className="space-y-2">
                        <label
                          htmlFor="preferredDate"
                          className="text-sm font-medium text-gray-700 flex items-center gap-2"
                        >
                          <Calendar className="w-4 h-4 text-gray-500" />
                          Preferred Date *
                        </label>
                        <Input
                          id="preferredDate"
                          type="date"
                          value={formData.preferredDate}
                          onChange={(e) =>
                            handleChange("preferredDate", e.target.value)
                          }
                          required
                          min={new Date().toISOString().split("T")[0]}
                          className="h-11"
                        />
                      </div>

                      <div className="space-y-2">
                        <label
                          htmlFor="preferredTime"
                          className="text-sm font-medium text-gray-700 flex items-center gap-2"
                        >
                          <Clock className="w-4 h-4 text-gray-500" />
                          Preferred Time *
                        </label>
                        <Select
                          value={formData.preferredTime}
                          onValueChange={(value) =>
                            handleChange("preferredTime", value)
                          }
                          required
                        >
                          <SelectTrigger id="preferredTime" className="h-11">
                            <SelectValue placeholder="Select time" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="9:00 AM">9:00 AM</SelectItem>
                            <SelectItem value="10:00 AM">10:00 AM</SelectItem>
                            <SelectItem value="11:00 AM">11:00 AM</SelectItem>
                            <SelectItem value="12:00 PM">12:00 PM</SelectItem>
                            <SelectItem value="1:00 PM">1:00 PM</SelectItem>
                            <SelectItem value="2:00 PM">2:00 PM</SelectItem>
                            <SelectItem value="3:00 PM">3:00 PM</SelectItem>
                            <SelectItem value="4:00 PM">4:00 PM</SelectItem>
                            <SelectItem value="5:00 PM">5:00 PM</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                    </div>
                  </div>

                  {/* Additional Message Section */}
                  <div className="space-y-4 pt-6 border-t border-gray-200">
                    <label
                      htmlFor="message"
                      className="text-sm font-medium text-gray-700 flex items-center gap-2"
                    >
                      <MessageSquare className="w-4 h-4 text-gray-500" />
                      Additional Message (Optional)
                    </label>
                    <textarea
                      id="message"
                      rows={4}
                      placeholder="Tell us about any specific concerns or preferences..."
                      value={formData.message}
                      onChange={(e) => handleChange("message", e.target.value)}
                      className="w-full rounded-md border border-gray-300 bg-transparent px-3 py-2 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-rose-500 focus-visible:border-rose-500 disabled:cursor-not-allowed disabled:opacity-50"
                    />
                  </div>

                  {/* Submit Button */}
                  <div className="pt-6">
                    <Button
                      type="submit"
                      size="lg"
                      className="w-full bg-gradient-to-r from-rose-500 to-pink-600 hover:from-rose-600 hover:to-pink-700 text-white shadow-lg hover:shadow-xl transition-all h-12 text-base font-semibold"
                    >
                      Submit Booking Request
                    </Button>
                    <p className="text-xs text-gray-500 text-center mt-4">
                      We'll review your request and get back to you within 24 hours
                      to confirm your appointment.
                    </p>
                  </div>
                </form>
                </div>

                {/* Contact Information */}
                <div className="mt-6 text-center">
                  <p className="text-gray-600">
                    Prefer to book by phone?{" "}
                    <a
                      href="tel:+19548073027"
                      className="text-rose-600 hover:text-rose-700 font-medium underline"
                    >
                      Call us at (954) 807-3027
                    </a>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
  );
}