import { useState } from "react";
import { motion } from "framer-motion";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Calendar, Clock, User, Phone, Mail, PawPrint, MessageCircle } from "lucide-react";
import { toast } from "sonner";
import surgeryImage from "@/assets/surgery.jpg";

const AppointmentSection = () => {
  const [formData, setFormData] = useState({
    ownerName: "",
    petName: "",
    petType: "",
    phone: "",
    email: "",
    date: "",
    time: "",
    reason: "",
  });

  const [isSubmitting, setIsSubmitting] = useState(false);

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

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);

    // Validate form
    if (!formData.ownerName || !formData.petName || !formData.phone || !formData.date) {
      toast.error("Please fill in all required fields");
      setIsSubmitting(false);
      return;
    }

    // Construct WhatsApp message
    const message = `🐾 *New Appointment Request*

*Owner:* ${formData.ownerName}
*Pet Name:* ${formData.petName}
*Pet Type:* ${formData.petType || "Not specified"}
*Phone:* ${formData.phone}
*Email:* ${formData.email || "Not provided"}
*Preferred Date:* ${formData.date}
*Preferred Time:* ${formData.time || "Any time"}
*Reason:* ${formData.reason || "General checkup"}

_Sent from Westlands Paws Website_`;

    // Open WhatsApp with pre-filled message
    const whatsappNumber = "254700000000"; // Replace with actual number
    const whatsappUrl = `https://wa.me/${whatsappNumber}?text=${encodeURIComponent(message)}`;
    
    window.open(whatsappUrl, "_blank");

    toast.success("Redirecting to WhatsApp to confirm your appointment!");
    setIsSubmitting(false);
    
    // Reset form
    setFormData({
      ownerName: "",
      petName: "",
      petType: "",
      phone: "",
      email: "",
      date: "",
      time: "",
      reason: "",
    });
  };

  return (
    <section id="appointment" className="py-24 bg-ice relative overflow-hidden">
      {/* Decorative elements */}
      <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-primary/20 to-transparent" />
      <div className="absolute inset-0 pointer-events-none">
        <div className="absolute top-1/4 left-0 w-96 h-96 bg-primary/5 rounded-full blur-3xl" />
        <div className="absolute bottom-1/4 right-0 w-80 h-80 bg-teal/5 rounded-full blur-3xl" />
      </div>

      <div className="container mx-auto px-4 relative z-10">
        {/* Section Header */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          viewport={{ once: true }}
          className="text-center max-w-2xl mx-auto mb-16"
        >
          <span className="inline-block px-4 py-1.5 rounded-full bg-primary/10 text-primary text-sm font-medium mb-4">
            Book Now
          </span>
          <h2 className="text-3xl md:text-4xl font-display font-bold text-foreground mb-4">
            Schedule an{" "}
            <span className="text-gradient">Appointment</span>
          </h2>
          <p className="text-muted-foreground text-lg">
            Book a visit for your furry friend. We'll confirm your appointment 
            via WhatsApp within minutes.
          </p>
        </motion.div>

        <div className="grid lg:grid-cols-2 gap-12 items-start max-w-5xl mx-auto">
          {/* Form */}
          <motion.div
            initial={{ opacity: 0, x: -40 }}
            whileInView={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.6 }}
            viewport={{ once: true }}
          >
            <Card variant="glass" className="overflow-hidden">
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Calendar className="w-5 h-5 text-primary" />
                  Book Your Visit
                </CardTitle>
                <CardDescription>
                  Fill in the details below and we'll get back to you shortly.
                </CardDescription>
              </CardHeader>
              <CardContent>
                <form onSubmit={handleSubmit} className="space-y-5">
                  <div className="grid sm:grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="ownerName" className="flex items-center gap-1.5">
                        <User className="w-3.5 h-3.5" />
                        Your Name *
                      </Label>
                      <Input
                        id="ownerName"
                        name="ownerName"
                        value={formData.ownerName}
                        onChange={handleInputChange}
                        placeholder="John Doe"
                        required
                        className="bg-background/50"
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="petName" className="flex items-center gap-1.5">
                        <PawPrint className="w-3.5 h-3.5" />
                        Pet's Name *
                      </Label>
                      <Input
                        id="petName"
                        name="petName"
                        value={formData.petName}
                        onChange={handleInputChange}
                        placeholder="Buddy"
                        required
                        className="bg-background/50"
                      />
                    </div>
                  </div>

                  <div className="grid sm:grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="petType">Pet Type</Label>
                      <select
                        id="petType"
                        name="petType"
                        value={formData.petType}
                        onChange={handleInputChange}
                        className="flex h-10 w-full rounded-lg border border-input bg-background/50 px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                      >
                        <option value="">Select type</option>
                        <option value="dog">Dog</option>
                        <option value="cat">Cat</option>
                        <option value="bird">Bird</option>
                        <option value="rabbit">Rabbit</option>
                        <option value="other">Other</option>
                      </select>
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="phone" className="flex items-center gap-1.5">
                        <Phone className="w-3.5 h-3.5" />
                        Phone Number *
                      </Label>
                      <Input
                        id="phone"
                        name="phone"
                        type="tel"
                        value={formData.phone}
                        onChange={handleInputChange}
                        placeholder="0712 345 678"
                        required
                        className="bg-background/50"
                      />
                    </div>
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="email" className="flex items-center gap-1.5">
                      <Mail className="w-3.5 h-3.5" />
                      Email Address
                    </Label>
                    <Input
                      id="email"
                      name="email"
                      type="email"
                      value={formData.email}
                      onChange={handleInputChange}
                      placeholder="john@example.com"
                      className="bg-background/50"
                    />
                  </div>

                  <div className="grid sm:grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="date" className="flex items-center gap-1.5">
                        <Calendar className="w-3.5 h-3.5" />
                        Preferred Date *
                      </Label>
                      <Input
                        id="date"
                        name="date"
                        type="date"
                        value={formData.date}
                        onChange={handleInputChange}
                        required
                        className="bg-background/50"
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="time" className="flex items-center gap-1.5">
                        <Clock className="w-3.5 h-3.5" />
                        Preferred Time
                      </Label>
                      <Input
                        id="time"
                        name="time"
                        type="time"
                        value={formData.time}
                        onChange={handleInputChange}
                        className="bg-background/50"
                      />
                    </div>
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="reason">Reason for Visit</Label>
                    <Textarea
                      id="reason"
                      name="reason"
                      value={formData.reason}
                      onChange={handleInputChange}
                      placeholder="Describe the reason for your visit or any symptoms your pet is experiencing..."
                      rows={3}
                      className="bg-background/50 resize-none"
                    />
                  </div>

                  <Button
                    type="submit"
                    variant="hero"
                    size="lg"
                    className="w-full"
                    disabled={isSubmitting}
                  >
                    {isSubmitting ? (
                      "Processing..."
                    ) : (
                      <>
                        <MessageCircle className="w-5 h-5" />
                        Book via WhatsApp
                      </>
                    )}
                  </Button>
                </form>
              </CardContent>
            </Card>
          </motion.div>

          {/* Side Content */}
          <motion.div
            initial={{ opacity: 0, x: 40 }}
            whileInView={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.6 }}
            viewport={{ once: true }}
            className="space-y-6"
          >
            {/* Image */}
            <div className="rounded-2xl overflow-hidden shadow-glass">
              <img
                src={surgeryImage}
                alt="Veterinary surgery"
                className="w-full h-56 object-cover"
              />
            </div>

            {/* Info Cards */}
            <Card variant="glass">
              <CardContent className="pt-6">
                <h3 className="font-display font-semibold text-lg text-foreground mb-4">
                  What to Expect
                </h3>
                <ul className="space-y-3">
                  {[
                    "Confirmation within 30 minutes",
                    "Reminder sent before your appointment",
                    "Free parking available",
                    "Bring any previous medical records",
                  ].map((item, index) => (
                    <motion.li
                      key={item}
                      initial={{ opacity: 0, x: 20 }}
                      whileInView={{ opacity: 1, x: 0 }}
                      transition={{ delay: index * 0.1 }}
                      viewport={{ once: true }}
                      className="flex items-center gap-3 text-sm text-muted-foreground"
                    >
                      <div className="w-2 h-2 rounded-full bg-primary" />
                      {item}
                    </motion.li>
                  ))}
                </ul>
              </CardContent>
            </Card>

            <Card variant="glass" className="border-primary/20">
              <CardContent className="pt-6">
                <div className="flex items-start gap-4">
                  <div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
                    <Phone className="w-6 h-6 text-primary" />
                  </div>
                  <div>
                    <h4 className="font-semibold text-foreground mb-1">
                      Emergency?
                    </h4>
                    <p className="text-sm text-muted-foreground mb-2">
                      For urgent cases, call us directly:
                    </p>
                    <a
                      href="tel:+254700000000"
                      className="text-lg font-bold text-primary hover:underline"
                    >
                      +254 700 000 000
                    </a>
                  </div>
                </div>
              </CardContent>
            </Card>
          </motion.div>
        </div>
      </div>
    </section>
  );
};

export default AppointmentSection;