"use client";

import Image from "next/image";
import { Button } from "../ui/button";
import { Input } from "../ui/input";
import { Textarea } from "../ui/textarea";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "../ui/dialog";
import { motion } from "framer-motion";
import { useState } from "react";
import { Download } from "lucide-react";

export default function HeaderProductJ7Awd() {
  const [open, setOpen] = useState(false);
  const [selectedColorIndex, setSelectedColorIndex] = useState(0);
  const [openBrosur, setOpenBrosur] = useState(false);
  const fileId = "1Nici3bdjUG524sUYQgHfbeO63xW6f1_o";
  const fileLink = `https://drive.google.com/file/d/${fileId}/view`;
  const embedLink = `https://drive.google.com/file/d/${fileId}/preview`;
  const downloadLink = `https://drive.google.com/uc?export=download&id=${fileId}`;

  const images = [
    "/j5-putih.png",
    "/j5-hitam.png",
    "/j5-silver.png",
    "/j5-biru.png",
    "/j5-hijau.png",
  ];

  const gradients = [
    "linear-gradient(to bottom, #FFFFFF, #FFFFFF)",
    "linear-gradient(to bottom, #1A1A1A, #3A3A3A)",
    "linear-gradient(to bottom, #B0B5C2, #B0B5C2)",
    "linear-gradient(to bottom, #233a77, #233a77)",
    "linear-gradient(to bottom, #5D6B4F, #5D6B4F)",
  ];
  return (
    <>
      <section className="py-10 px-4 sm:px-6 md:px-10 bg-white">
        <motion.div
          initial={{ opacity: 0, y: 50 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          className="flex flex-col items-center gap-6"
        >
          <div className="relative w-full h-[300px] sm:h-[400px] md:h-[640px] overflow-hidden">
            <Image
              src="/j5-ev.jpg"
              alt="about-header"
              fill
              className="object-cover"
              sizes="(max-width: 768px) 100vw, 640px"
              priority
            />

            <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex items-center gap-3">
              <Dialog open={openBrosur} onOpenChange={setOpenBrosur}>
                <DialogTrigger asChild>
                  <Button className="bg-white text-black border w-[100px] h-[30px] md:w-[200px] md:h-[40px] rounded-xl hover:bg-amber-50 hover:cursor-pointer">
                    BROSUR
                  </Button>
                </DialogTrigger>

                <DialogContent className=" w-full p-0 overflow-hidden">
                  <div className="flex justify-end p-4 bg-white z-50">
                    <a
                      href={downloadLink}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="absolute top-2 right-3 z-50 bg-black text-white p-2 rounded hover:bg-gray-800 mb-3"
                    >
                      <Download size={18} />
                    </a>
                  </div>

                  <iframe
                    src={embedLink}
                    className="w-full h-[70vh] border-t"
                    allow="autoplay"
                  ></iframe>
                </DialogContent>
              </Dialog>

              <Dialog open={open} onOpenChange={setOpen}>
                <DialogTrigger asChild>
                  <Button className="bg-[#1F6779] text-white h-[30px] md:w-[200px] md:h-[40px] rounded-xl 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-4xl text-center mb-4 font-bold">
                      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>
            </div>
          </div>
        </motion.div>
      </section>

      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ delay: 0.5, duration: 0.8 }}
        className="relative w-full h-[200px] sm:h-[400px] md:h-[740px] overflow-hidden"
      >
        <div className="relative w-full h-[200px] sm:h-[300px] md:h-[740px] lg:h-[740px]">
          <Image
            src={images[selectedColorIndex]}
            alt="about-header"
            fill
            className="object-cover"
            sizes="(max-width: 640px) 100vw, (max-width: 1024px) 100vw, 1400px"
            priority
          />
        </div>

        <motion.div
          initial={{ opacity: 0, x: -40 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ delay: 0.8, duration: 0.6 }}
          className="absolute top-32 md:top-1/2 left-14 md:left-56 transform -translate-y-1/2 flex flex-col gap-4 z-10"
        >
          {gradients.map((bg, index) => (
            <motion.button
              key={index}
              onClick={() => setSelectedColorIndex(index)}
              whileHover={{ scale: 1.1 }}
              whileTap={{ scale: 0.95 }}
              className={`w-4 h-4 md:w-6 md:h-6 rounded-full border-2 ${
                selectedColorIndex === index ? "border-black" : "border-white"
              } shadow-md hover:cursor-pointer`}
              style={{ background: bg }}
              aria-label={`Pilih warna ${index + 1}`}
            />
          ))}
        </motion.div>
      </motion.div>
    </>
  );
}