"use client";
import Image from "next/image";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";
import { Button } from "@/components/ui/button";
import { motion } from "framer-motion";
import Link from "next/link";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "../ui/dialog";
import { Input } from "../ui/input";
import { Textarea } from "../ui/textarea";
import { useState } from "react";
import Autoplay from "embla-carousel-autoplay"; // ✅ Import plugin autoplay
import { useRef } from "react";

const heroImages = ["/Hero.png", "/hero-bdg2.png", "/hero-bdg3.png"];

export default function Header() {
  const [open, setOpen] = useState(false);

  // ✅ Gunakan useRef untuk plugin autoplay
  const plugin = useRef(Autoplay({ delay: 4000, stopOnInteraction: false }));

  return (
    <section className="relative w-full overflow-hidden bg-white">
      <Carousel
        className="w-full relative"
        plugins={[plugin.current]} // ✅ Tambahkan plugin di sini
      >
        <CarouselContent>
          {heroImages.map((img, index) => (
            <CarouselItem key={index}>
              <div className="relative w-full h-[400px] sm:h-[500px] md:h-[810px]">
                <Image
                  src={img}
                  alt={`JAECOO Image ${index + 1}`}
                  width={1400}
                  height={810}
                  className="object-cover w-full h-full"
                />

                {index === 0 && (
                  <div className="absolute inset-0 flex flex-col justify-center items-start px-4 sm:px-8 md:px-28 z-10">
                    <motion.h1
                      initial={{ opacity: 0, y: 40 }}
                      animate={{ opacity: 1, y: 0 }}
                      transition={{ duration: 0.8, ease: "easeOut" }}
                      className="text-2xl sm:text-3xl md:text-5xl font-bold text-black mb-4"
                    >
                      JAECOO J7 SHS-P
                    </motion.h1>

                    <motion.p
                      initial={{ opacity: 0, y: 40 }}
                      animate={{ opacity: 1, y: 0 }}
                      transition={{
                        duration: 0.9,
                        ease: "easeOut",
                        delay: 0.2,
                      }}
                      className="text-sm sm:text-base md:text-lg text-black mb-6"
                    >
                      DELICATE OFF-ROAD SUV
                    </motion.p>

                    <motion.div
                      className="flex flex-col sm:flex-row items-start sm:items-center gap-3 sm:gap-4"
                      initial={{ opacity: 0, y: 40 }}
                      animate={{ opacity: 1, y: 0 }}
                      transition={{ duration: 1, ease: "easeOut", delay: 0.4 }}
                    >
                      <motion.div
                        className="flex items-center gap-4"
                        initial={{ opacity: 0, y: 40 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{
                          duration: 1,
                          ease: "easeOut",
                          delay: 0.4,
                        }}
                      >
                        <Dialog open={open} onOpenChange={setOpen}>
                          <DialogTrigger asChild>
                            <Button className="bg-[#1F6779] text-white h-[30px] md:h-[40px] rounded-full hover:cursor-pointer">
                              TEST DRIVE
                            </Button>
                          </DialogTrigger>
                          <DialogContent className="sm:max-w-[1400px] h-[600px]">
                            <div className="flex items-center gap-4">
                              <Image
                                src="/masjaecoonav.png"
                                alt="MAS JAECOO Logo"
                                width={300}
                                height={30}
                                className=" object-fill"
                              />
                            </div>
                            <DialogHeader>
                              <DialogTitle className="text-2xl text-center mb-4">
                                FORM TEST DRIVE
                              </DialogTitle>
                            </DialogHeader>

                            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 px-10">
                              <Input placeholder="Nama" />
                              <Input placeholder="Email" />
                              <Input placeholder="Mobile Number" />
                              <Input placeholder="Location" />
                            </div>

                            <div className="mt-3 px-10">
                              <Textarea placeholder="Full Message" rows={4} />
                            </div>

                            <div className="mt-6 text-left ml-10">
                              <Button
                                onClick={() => setOpen(false)}
                                className="bg-[#1F6779] text-white rounded-full"
                              >
                                SEND INQUIRY
                              </Button>
                            </div>
                          </DialogContent>
                        </Dialog>
                        <Link href={"/product"}>
                          <Button
                            variant="outline"
                            className="rounded-full border-black text-black px-6 py-2 hover:cursor-pointer hover:bg-amber-50"
                          >
                            EXPLORE
                          </Button>
                        </Link>
                      </motion.div>
                    </motion.div>
                  </div>
                )}
              </div>
            </CarouselItem>
          ))}
        </CarouselContent>
      </Carousel>
    </section>
  );
}