"use client";

import Image from "next/image";
import { useEffect, useState } from "react";
import { Reveal } from "@/components/shared/Reveal";
import Link from "next/link";
import type { VenueLandingSection } from "@/constants/pages";

type Props = {
  section: VenueLandingSection["recommendation"];
};

export default function RecommendationSection({ section }: Props) {
  return (
    <section className="py-12 md:py-16 px-6 md:px-12">
      <div className="max-w-7xl mx-auto">

        <Reveal>
          <div className="text-center mb-10">
            <h2 className="font-serif italic text-3xl md:text-5xl font-light text-espresso leading-tight">
              {section?.title}
            </h2>

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

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

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

            {section?.description && (
              <div className="mx-auto mt-7 max-w-3xl font-sans text-sm font-light leading-7 text-mahogany md:text-base">
                {section.description}
              </div>
            )}
          </div>
        </Reveal>

        <div className="grid gap-8 md:grid-cols-2">
          {section?.venues.map((venue, index) => {
            const isLast = index === section.venues.length - 1;
            const isOdd = section.venues.length % 2 !== 0;

            const cardClassName = `
              group
              block
              h-full
              rounded-2xl
              relative
              overflow-hidden
              border
              border-[#E7DCCF]
              bg-gradient-to-tr
              from-white
              to-cream
              p-8
              lg:p-8
              will-change-transform
              transition-all
              duration-500
              hover:-translate-y-2
              hover:border-gold/50
              hover:shadow-[0_25px_60px_rgba(0,0,0,0.12)]
            `;

            const renderCardContent = (
              card: typeof venue
            ) => (
              <>
                {/* Luxury Light Sweep */}
                <div
                  className="
                    pointer-events-none
                    absolute
                    inset-0
                    overflow-hidden
                  "
                >
                  <div
                    className="
                      absolute
                      -left-1/2
                      top-0
                      h-full
                      w-1/3
                      rotate-12
                      bg-gradient-to-r
                      from-transparent
                      via-white/50
                      to-transparent
                      translate-x-[-200%]
                      transition-transform
                      duration-1000
                      ease-out
                      group-hover:translate-x-[500%]
                    "
                  />
                </div>

                {card.image && (
                  <div className="relative mb-5 w-full overflow-hidden rounded-[20px] aspect-[16/11]">
                    <Image
                      src={card.image}
                      alt={card.title ?? ""}
                      title={card.title ?? ""}
                      fill
                      sizes="(max-width: 767px) 100vw, 50vw"
                      className="
                        object-cover
                        transition-transform
                        duration-700
                        group-hover:scale-105
                      "
                    />

                    <div
                      className="
                        pointer-events-none
                        absolute
                        inset-0
                        bg-gradient-to-t
                        from-black/25
                        via-transparent
                        to-transparent
                        opacity-60
                      "
                    />

                    <div
                      className="
                        pointer-events-none
                        absolute
                        inset-3
                        rounded-[16px]
                        border
                        border-white/30
                        transition-all
                        duration-500
                        group-hover:border-gold/70
                      "
                    />
                  </div>
                )}

                <div className="relative z-10">

                  <h3 className="text-center font-serif italic text-2xl text-espresso mb-5 transition-colors duration-500 group-hover:text-gold">
                    {card.title}
                  </h3>

                  <div className="my-4 h-px w-full bg-gradient-to-r from-transparent via-gold/80 to-transparent" />

                  {card.venue && (
                    <h4 className="font-medium text-lg text-espresso mb-3">
                      {card.venue}
                    </h4>
                  )}

                  <div className="font-sans text-base leading-7 text-mahogany transition-colors duration-500 group-hover:text-espresso">
                    {card.description}
                  </div>

                  {card.cta && (
                    <Link
                      href={card.cta.href}
                      title={card.cta.text}
                      className="mt-3 inline-flex items-center gap-3 rounded-full border border-gold px-3 py-1 font-sans text-[10px] uppercase tracking-[0.25em] text-gold-deep transition-all hover:bg-gold/40 hover:text-black"
                    >
                      {card.cta.text}
                    </Link>
                  )}
                </div>
              </>
            );

            const FlippableRecommendationCard = () => {
              const [flipped, setFlipped] = useState(false);

              useEffect(() => {
                const interval = window.setInterval(() => {
                  setFlipped((current) => !current);
                }, 5000);

                return () => {
                  window.clearInterval(interval);
                };
              }, []);

              return (
                <div
                  className="relative grid h-full"
                  style={{ perspective: "1200px" }}
                  onClick={() => setFlipped((current) => !current)}
                  onMouseEnter={() => {
                    if (window.matchMedia("(hover: hover)").matches) {
                      setFlipped(true);
                    }
                  }}
                  onMouseLeave={() => {
                    if (window.matchMedia("(hover: hover)").matches) {
                      setFlipped(false);
                    }
                  }}
                >
                  <div
                    className="
                      col-start-1
                      row-start-1
                      grid
                      h-full
                      transition-transform
                      duration-700
                      [transform-style:preserve-3d]
                    "
                    style={{
                      transform: flipped
                        ? "rotateY(180deg)"
                        : "rotateY(0deg)",
                    }}
                  >
                    {/* FRONT */}
                    <div
                      className="
                        col-start-1
                        row-start-1
                        h-full
                        [backface-visibility:hidden]
                      "
                    >
                      {venue.cta ? (
                        <div className={cardClassName}>
                          {renderCardContent(venue)}
                        </div>
                      ) : venue.link ? (
                        <Link
                          href={venue.link}
                          title={venue.title}
                          className={cardClassName}
                          onClick={(e) => {
                            if (
                              !window.matchMedia("(hover: hover)").matches &&
                              !flipped
                            ) {
                              e.preventDefault();
                            }
                          }}
                        >
                          {renderCardContent(venue)}
                        </Link>
                      ) : (
                        <div className={cardClassName}>
                          {renderCardContent(venue)}
                        </div>
                      )}
                    </div>

                    {/* BACK */}
                    <div
                      className="
                        col-start-1
                        row-start-1
                        h-full
                        [backface-visibility:hidden]
                        [transform:rotateY(180deg)]
                      "
                    >
                      {venue.alternate?.link ? (
                        <Link
                          href={venue.alternate.link}
                          title={venue.alternate.title}
                          className={cardClassName}
                        >
                          {renderCardContent(venue.alternate)}
                        </Link>
                      ) : (
                        <div className={cardClassName}>
                          {venue.alternate &&
                            renderCardContent(venue.alternate)}
                        </div>
                      )}
                    </div>
                  </div>
                </div>
              );
            };

            return (
              <div
                key={venue.title}
                className={
                  isOdd && isLast
                    ? "md:col-span-2 flex justify-center"
                    : ""
                }
              >
                <div
                  className={
                    isOdd && isLast
                      ? "w-full md:max-w-[48%]"
                      : "w-full h-full"
                  }
                >
                  {venue.alternate ? (
                    <FlippableRecommendationCard />
                  ) : venue.cta ? (
                    <div className={cardClassName}>
                      {renderCardContent(venue)}
                    </div>
                  ) : venue.link ? (
                    <Link
                      href={venue.link}
                      title={venue.title}
                      className={cardClassName}
                    >
                      {renderCardContent(venue)}
                    </Link>
                  ) : (
                    <div className={cardClassName}>
                      {renderCardContent(venue)}
                    </div>
                  )}
                </div>
              </div>
            );
          })}
        </div>

      </div>
    </section>
  );
}