"use client";

import Image from "next/image";
import { useState } from "react";
import Link from "next/link";
import { ChevronDown } from "lucide-react";
import { motion, AnimatePresence } from "framer-motion";
import { Reveal } from "./Reveal";
import type { RoomDetailsSection as RoomDetailsSectionType } from "@/constants/pages";

type Props = {
  section: RoomDetailsSectionType;
};

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

  const hasCards = Boolean(section.cards?.length);
  const hasHeader = Boolean(section.title || section.description);
  const hasPoints = Boolean(section.booking?.points?.length);

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

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

          {hasHeader && (
            <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>
              )}

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

          {hasCards && (
            <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/80 will-change-transform transition-all duration-500 hover:border-gold hover:shadow-[0_25px_60px_rgba(0,0,0,.08)]
                      ${
                        isLast && isOdd
                          ? "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-[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 p-2 font-sans text-sm leading-6 text-mahogany">
                            {card.content}

                            {card.items && card.items.length > 0 && (
                              <div className="space-y-4">
                                {card.items.map((item, itemIndex) => (
                                  <div key={itemIndex}>

                                    <h4 className="font-serif text-xl italic text-espresso">
                                      {item.title}
                                    </h4>

                                    <div>
                                      {item.description}
                                    </div>

                                    {item.links && item.links.length > 0 && (
                                      <div className="flex flex-wrap gap-3">
                                        {item.links.map((link) => (
                                          <Link
                                            key={link.href}
                                            href={link.href}
                                            title={link.text}
                                            className="inline-flex items-center gap-3 mt-2 rounded-full border border-gold px-3 py-1 font-sans text-[10px] uppercase tracking-[0.25em] text-gold-deep transition-all duration-500 hover:bg-gold/40 hover:text-black">
                                            {link.text}
                                            <span className="text-sm">
                                              →
                                            </span>
                                          </Link>
                                        ))}
                                      </div>
                                    )}
                                  </div>
                                ))}
                              </div>
                            )}
                          </div>
                        </motion.div>
                      )}
                    </AnimatePresence>
                  </motion.div>
                );
              })}
            </div>
          )}

          {section.booking && (
            <div
              className={
                hasCards
                  ? "mt-24"
                  : hasHeader
                    ? "mt-16"
                    : "mt-0"
              }
            >
              <div
                className="group relative mx-auto max-w-5xl overflow-hidden rounded-[32px] border border-gold bg-gradient-to-br from-gold/30 via-cream to-gold/30 p-10 text-center will-change-transform transition-all duration-1000 ease-out hover:scale-[1.02] hover:border-[#d9b15d] hover:from-gold/50 hover:via-cream/80 hover:to-gold/50 hover:shadow-[0_40px_90px_rgba(0,0,0,0.18)] md:p-10">

                {/*   BACKGROUND LOGO */}
                <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
                  <Image
                    src="https://pub-b0bc1a7c71a54576bbf43595e30e6188.r2.dev/images/hero/the-grand-heritage-resorts-logo.png"
                    alt="The Grand Heritage Resorts Logo"
                    title="The Grand Heritage Resorts"
                    width={380}
                    height={380}
                    className="object-contain opacity-[0.10]"
                  />
                </div>

                <div className="absolute left-6 top-6 h-10 w-10 border-l border-t border-gold" />

                <div className="absolute right-6 top-6 h-10 w-10 border-r border-t border-gold/70" />

                <div className="absolute bottom-6 left-6 h-10 w-10 border-b border-l border-gold/70" />

                <div className="absolute bottom-6 right-6 h-10 w-10 border-b border-r border-gold/70" />

                <div
                  className="relative font-sans text-[10px] will-change-transform uppercase tracking-[0.35em] text-gold-deep">
                  Plan Your Experience
                </div>

                <h2
                  className="relative mt-5 font-serif text-3xl italic text-espresso/80 will-change-transform transition-all md:text-5xl group-hover:text-espresso">
                  {section.booking.title}
                </h2>

                <div className="relative my-4 flex items-center justify-center gap-5">
                  <div className="h-px w-20 bg-gradient-to-r from-transparent to-espresso/60 will-change-transform transition-all group-hover:to-espresso"/>

                  <div className="h-2 w-2 rotate-45 border border-espresso/40 bg-gold will-change-transform transition-all group-hover:border-espresso/80"/>

                  <div className="h-px w-20 bg-gradient-to-l from-transparent to-espresso/60 will-change-transform transition-all group-hover:to-espresso"/>
                </div>

                <div className="relative mx-auto max-w-4xl text-lg leading-8 text-espresso">
                  {section.booking.description}
                </div>

                {hasPoints && (
                  <div className="relative mx-auto mt-8">

                    {section.booking.pointsTitle && (
                      <h3 className="mb-5 text-center font-serif text-2xl italic text-espresso md:text-3xl">
                        {section.booking.pointsTitle}
                      </h3>
                    )}

                    <div className="mx-auto flex w-fit max-w-full flex-col items-start gap-2">
                      {section.booking.points!.map((point, index) => (
                        <div
                          key={index}
                          className="flex items-center gap-2 text-left text-sm leading-6 text-espresso md:text-base">

                          <span className="h-2 w-2 shrink-0 rounded-full bg-gold"/>

                          <span>{point}</span>
                        </div>
                      ))}
                    </div>
                  </div>
                )}

                <Link
                  href={section.booking.buttonHref}
                  title={section.booking.title}
                  className="relative mt-7 inline-flex rounded-full border border-espresso/40 bg-gold/80 px-10 py-4 text-[11px] uppercase tracking-[0.35em] text-espresso will-change-transform transition-all duration-300 hover:-translate-y-1 hover:bg-gold hover:text-ivory hover:shadow-[0_20px_50px_rgba(0,0,0,.25)]">
                  {section.booking.buttonText}
                </Link>
              </div>
            </div>
          )}
        </div>
      </Reveal>
    </section>
  );
}