"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { ChevronDown, ArrowRight } from "lucide-react";
import { motion, AnimatePresence } from "framer-motion";
import { Reveal } from "@/components/shared/Reveal";

type PackageOption = {
  title: string;
  content: React.ReactNode;
  link?: {
    text: string;
    href: string;
  };
};

export type PackageSelectionSectionData = {
  title?: string;
  description?: React.ReactNode;
  packages: PackageOption[];
};

type Props = {
  section: PackageSelectionSectionData;
};

export default function PackageSelectionSection({ section }: Props) {
  const [openIndex, setOpenIndex] = useState<number | null>(null);
  const [isDesktop, setIsDesktop] = useState(false);

  /* =========================================================
      DETECT DEVICES THAT SUPPORT HOVER
  ========================================================= */
  useEffect(() => {
    const mediaQuery = window.matchMedia(
      "(hover: hover) and (pointer: fine)"
    );

    const handleChange = () => {
      setIsDesktop(mediaQuery.matches);
    };

    handleChange();

    mediaQuery.addEventListener("change", handleChange);

    return () => {
      mediaQuery.removeEventListener("change", handleChange);
    };
  }, []);

  /* =========================================================
      TOGGLE PACKAGE
  ========================================================= */
  const toggleItem = (index: number) => {
    setOpenIndex((current) => {
      if (current === index) {
        return null;
      }

      return index;
    });
  };

  const hasHeader = Boolean(section.title || section.description);

  return (
    <section className="px-6 py-12 md:px-12 md:py-16">
      <div className="mx-auto max-w-2xl">

        {/* =========================================================
            SECTION HEADER
        ========================================================= */}

        {hasHeader && (
          <Reveal>
            <div className="mx-auto mb-12 max-w-3xl text-center">

              {/* Title */}
              {section.title && (
                <h2 className="font-serif text-3xl italic text-espresso md:text-5xl">
                  {section.title}
                </h2>
              )}

              {/* Luxury Divider */}
              <div className="mt-6 flex items-center justify-center gap-4">
                <div className="h-0.5 w-20 bg-gradient-to-r from-transparent to-gold" />

                <div className="relative flex items-center justify-center">
                  <div className="h-4 w-4 rotate-45 border border-gold bg-gold/20" />

                  <div className="absolute h-2 w-2 rotate-45 bg-gold" />
                </div>

                <div className="h-0.5 w-20 bg-gradient-to-l from-transparent to-gold" />
              </div>

              {/* Description */}
              {section.description && (
                <div className="mt-5 text-base leading-7 text-mahogany md:text-lg">
                  {section.description}
                </div>
              )}
            </div>
          </Reveal>
        )}

        {/* =========================================================
            PACKAGE DROPDOWNS
        ========================================================= */}

        <Reveal>
          <div className="space-y-4">

            {section.packages.map((pkg, index) => {
              const isOpen = openIndex === index;

              return (
                <motion.div
                  key={pkg.title}
                  onMouseEnter={() => {
                    if (isDesktop) {
                      setOpenIndex(index);
                    }
                  }}
                  onMouseLeave={() => {
                    if (isDesktop) {
                      setOpenIndex(null);
                    }
                  }}
                  className="
                    group
                    overflow-hidden
                    rounded-[1rem]
                    border
                    border-espresso/10
                    bg-cream/60
                    px-6
                    shadow-sm
                    transition-all
                    duration-300
                    hover:border-gold
                    hover:shadow-md
                  "
                >

                  {/* =================================================
                      PACKAGE HEADER
                  ================================================= */}

                  <button
                    type="button"
                    onClick={(e) => {
                      e.preventDefault();
                      e.stopPropagation();
                      toggleItem(index);
                    }}
                    className="
                      flex
                      w-full
                      items-center
                      justify-between
                      gap-4
                      py-4
                      text-left
                    "
                  >
                    <span
                      className="
                        font-serif
                        text-[26px]
                        italic
                        text-espresso
                        will-change-transform
                        transition-colors
                        group-hover:text-gold-deep
                      "
                    >
                      {pkg.title}
                    </span>

                    <span
                      className={`
                        inline-flex
                        h-9
                        w-9
                        shrink-0
                        items-center
                        justify-center
                        rounded-full
                        border
                        border-gold/40
                        text-gold
                        transition-transform
                        duration-300
                        ${isOpen ? "rotate-180" : ""}
                      `}
                    >
                      <ChevronDown size={20} />
                    </span>
                  </button>

                  {/* =================================================
                      PACKAGE CONTENT
                  ================================================= */}

                  <AnimatePresence initial={false}>
                    {isOpen && (
                      <motion.div
                        initial={{
                          height: 0,
                          opacity: 0,
                        }}
                        animate={{
                          height: "auto",
                          opacity: 1,
                        }}
                        exit={{
                          height: 0,
                          opacity: 0,
                        }}
                        transition={{
                          height: {
                            duration: 0.35,
                            ease: [0.4, 0, 0.2, 1],
                          },
                          opacity: {
                            duration: 0.2,
                          },
                        }}
                        className="overflow-hidden"
                      >
                        <div
                          className="
                            border-t
                            border-espresso/10
                            pb-5
                            pt-2
                            font-sans
                            text-sm
                            font-light
                            leading-relaxed
                            text-mahogany
                          "
                        >

                          {/* Main Content */}
                          {pkg.content && (
                            <div className="mb-5">
                              {pkg.content}
                            </div>
                          )}

                          {/* Optional CTA */}
                          {pkg.link && (
                            <div className="mt-3">
                              <Link
                                href={pkg.link.href}
                                title={pkg.link.text}
                                className="
                                  inline-flex
                                  items-center
                                  gap-2
                                  rounded-full
                                  border
                                  border-gold
                                  bg-gold/10
                                  ml-4
                                  px-3
                                  py-1
                                  text-[10px]
                                  font-medium
                                  uppercase
                                  tracking-[0.3em]
                                  text-espresso
                                  will-change-transform
                                  transition-all
                                  duration-300
                                  hover:-translate-y-0.5
                                  hover:bg-cream
                                  hover:text-espresso
                                  hover:shadow-[0_12px_30px_rgba(0,0,0,.15)]
                                "
                              >
                                {pkg.link.text}

                                <ArrowRight
                                  size={14}
                                  strokeWidth={1.5}
                                />
                              </Link>
                            </div>
                          )}

                        </div>
                      </motion.div>
                    )}
                  </AnimatePresence>

                </motion.div>
              );
            })}

          </div>
        </Reveal>

      </div>
    </section>
  );
}