"use client";

import { 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";
import type { DetailsSection as DetailsSectionType } from "@/constants/pages";

type Props = {
  section: DetailsSectionType;
};

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

  const hasCards = Boolean(section.cards?.length);

  if (!hasCards) return null;

  const supportsHover = () => {
    return (
      typeof window !== "undefined" &&
      window.matchMedia("(hover: hover) and (pointer: fine)").matches
    );
  };

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

          {/* =========================================================
              SECTION HEADER
          ========================================================= */}
          {(section.title || section.description) && (
            <div className="mx-auto mb-12 max-w-3xl text-center">

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

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

              {/* 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>
            </div>
          )}

          {/* =========================================================
              DROPDOWN CARDS
          ========================================================= */}
          <div className="grid items-start gap-8 lg:grid-cols-2">
            {section.cards!.map((card, index) => {
              const open = openIndex === index;

              const isLast = index === section.cards!.length - 1;
              const isOdd = section.cards!.length % 2 !== 0;

              return (
                <motion.div
                  key={index}
                  onHoverStart={() => {
                    if (supportsHover()) {
                      setOpenIndex(index);
                    }
                  }}
                  onHoverEnd={() => {
                    if (supportsHover()) {
                      setOpenIndex(null);
                    }
                  }}
                  className={`
                    group
                    overflow-hidden
                    rounded-[22px]
                    border
                    border-gold/15
                    bg-ivory
                    will-change-transform
                    transition-all
                    duration-500
                    hover:border-gold
                    hover:shadow-[0_25px_60px_rgba(0,0,0,.08)]
                    ${
                      isOdd && isLast
                        ? "lg:col-span-2 lg:mx-auto lg:w-[calc(50%-1rem)]"
                        : ""
                    }
                  `}
                >
                  {/* Card Header */}
                  <button
                    type="button"
                    onClick={() =>
                      setOpenIndex(open ? null : index)
                    }
                    className="
                      flex
                      w-full
                      items-center
                      justify-between
                      px-7
                      py-4
                      text-left
                      will-change-transform
                      transition-colors
                      group-hover:bg-gold/5
                    "
                  >
                    <h3
                      className="
                        font-serif
                        text-[20px]
                        md:text-[26px]
                        italic
                        text-espresso
                        will-change-transform
                        transition-colors
                        group-hover:text-gold-deep
                      "
                    >
                      {card.title}
                    </h3>

                    <motion.div
                      animate={{
                        rotate: open ? 180 : 0,
                      }}
                      transition={{
                        duration: 0.25,
                      }}
                    >
                      <ChevronDown
                        size={24}
                        className="text-gold"
                      />
                    </motion.div>
                  </button>

                  {/* Card Content */}
                  <AnimatePresence initial={false}>
                    {open && (
                      <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="
                            px-8
                            pb-7
                            font-sans
                            text-sm
                            leading-6
                            text-mahogany
                          "
                        >
                          {/* Content */}
                          {card.content}

                          {/* Optional CTA */}
                          {card.link && (
                            <div className="mt-3">
                              <Link
                                href={card.link.href}
                                title={card.title}
                                className="
                                  inline-flex
                                  items-center
                                  gap-2
                                  rounded-full
                                  border
                                  border-gold
                                  bg-gold/10
                                  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)]
                                "
                              >
                                {card.link.text}

                                <ArrowRight
                                  size={14}
                                  strokeWidth={1.5}
                                />
                              </Link>
                            </div>
                          )}
                        </div>
                      </motion.div>
                    )}
                  </AnimatePresence>
                </motion.div>
              );
            })}
          </div>

        </div>
      </Reveal>
    </section>
  );
}