"use client";

import { useEffect, useRef, useState } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import Image from "next/image";
import { useCart } from "@/context/CartContext";

if (typeof window !== "undefined") {
  gsap.registerPlugin(ScrollTrigger);
}

interface Product {
  id: string;
  name: string;
  description: string | null;
  price: string;
  type: string;
  imageUrl: string | null;
  brand_id?: string;
  brand_slug?: string;
  is_taxable?: boolean;
  pickup_type?: "scheduled_stop" | "shed";
}

interface CinematicShowcaseProps {
  products: Product[];
  brandSlug?: string;
  brandName?: string;
}

// Single product card — no scroll-driven morphing.
// The previous version scaled/rotated cards based on scroll position
// (rotateY ±5°, scale 0.95→1.02, image parallax). All of that is gone —
// cards now render statically and the active state is communicated by
// opacity only.
function MorphingProductCard({
  product,
  index: _index,
  isActive: _isActive,
}: {
  product: Product;
  index: number;
  isActive: boolean;
}) {
  const cardRef = useRef<HTMLDivElement>(null);
  const imageRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (typeof window === "undefined" || !cardRef.current) return;
    if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return;
    // Intentionally a no-op now — the parent controls layout/active state
    // via the wrapper, not the card. Keeping the useEffect shell so we
    // can reintroduce small motion later if needed.
    return;
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    void cardRef; void imageRef;
  }, []);

  return (
    <div
      ref={cardRef}
      className="relative flex-shrink-0 w-[85vw] sm:w-[70vw] md:w-[45vw] lg:w-[35vw]"
    >
      <div className="relative aspect-[4/5] rounded-3xl overflow-hidden bg-gradient-to-br from-stone-900 to-stone-950">
        {/* Image — no parallax, no scale change on active. */}
        <div ref={imageRef} className="absolute inset-0">
          {product.imageUrl && (
            <Image
              src={product.imageUrl}
              alt={product.name}
              fill
              className="object-cover"
            />
          )}
          {/* Gradient overlay */}
          <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" />
        </div>

        {/* Content */}
        <div className="absolute bottom-0 left-0 right-0 p-6 md:p-8">
          <p className="text-[10px] font-bold uppercase tracking-[0.2em] text-emerald-400/80 mb-2">
            {product.type}
          </p>
          <h3 className="text-xl md:text-2xl font-bold text-white mb-2">
            {product.name}
          </h3>
          {product.description && (
            <p className="text-sm text-white/60 line-clamp-2 mb-4">
              {product.description}
            </p>
          )}
          <p className="text-2xl font-black text-white">{product.price}</p>
        </div>

        {/* Shine effect */}
        <div
          className="absolute inset-0 opacity-0 pointer-events-none"
          style={{
            background:
              "linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%)",
          }}
        />
      </div>
    </div>
  );
}

export default function CinematicShowcase({
  products,
  brandSlug = "tuxedo",
  brandName = "Tuxedo Corn",
}: CinematicShowcaseProps) {
  const containerRef = useRef<HTMLDivElement>(null);
  const [activeIndex, setActiveIndex] = useState(0);
  const [scrollProgress, setScrollProgress] = useState(0);
  const [addedId, setAddedId] = useState<string | null>(null);
  const { addToCart } = useCart();

  const activeProduct = products[activeIndex];
  const isPickupOnly = activeProduct?.type === "Pickup";
  const isShippingOnly = activeProduct?.type === "Shipping";
  const isBoth = activeProduct?.type === "Pickup & Shipping";
  const canAdd = !!activeProduct && !!activeProduct.brand_id;

  function handleAddActive() {
    if (!activeProduct || !canAdd) return;
    const baseItem = {
      id: activeProduct.id,
      name: activeProduct.name,
      price: activeProduct.price,
      brand_id: activeProduct.brand_id ?? "",
      brand_slug: activeProduct.brand_slug ?? brandSlug,
      is_taxable: activeProduct.is_taxable ?? true,
      pickup_type: activeProduct.pickup_type ?? "scheduled_stop",
      description: activeProduct.description ?? "",
    };
    if (isPickupOnly) addToCart(baseItem, "pickup");
    else if (isShippingOnly) addToCart(baseItem, "ship");
    else addToCart(baseItem, "pickup");

    setAddedId(activeProduct.id);
    window.setTimeout(() => {
      setAddedId((cur) => (cur === activeProduct?.id ? null : cur));
    }, 1800);
  }

  useEffect(() => {
    if (typeof window === "undefined" || !containerRef.current) return;

    const prefersReducedMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === true;
    if (prefersReducedMotion) return;

    const ctx = gsap.context(() => {
      // Scroll-driven product switching — kept (it's the structure of this
      // section), but no positional movement of the cards themselves. The
      // active state is communicated by opacity only, computed in the
      // onUpdate and used to setActiveIndex.
      const productSwitchTrigger = ScrollTrigger.create({
        trigger: containerRef.current,
        start: "top top",
        end: "bottom bottom",
        scrub: 1,
        onUpdate: (self) => {
          setScrollProgress(self.progress);

          const progress = self.progress;
          const productCount = products.length;
          const segmentSize = 1 / productCount;

          let newIndex = Math.min(
            Math.floor(progress / segmentSize),
            productCount - 1
          );
          newIndex = Math.max(0, newIndex);

          setActiveIndex(newIndex);
        },
      });

      // Parallax for background text — removed. The HARVEST headline now
      // sits at a fixed Y so the eye doesn't chase it as the user scrolls.

      // Scale reveal for cards — replaced with a calm opacity-only fade.
      // No more back.out(1.4) overshoot, no 100px slide, no 0.9→1 scale.
      gsap.fromTo(
        ".product-card-wrapper",
        { opacity: 0, y: 8 },
        {
          opacity: 1,
          y: 0,
          duration: 0.32,
          stagger: 0.04,
          ease: "power1.out",
          scrollTrigger: {
            trigger: containerRef.current,
            start: "top 85%",
            toggleActions: "play none none none",
          },
        }
      );
    }, containerRef);

    return () => ctx.revert();
  }, [products.length]);

  if (products.length === 0) return null;

  return (
    <section
      ref={containerRef}
      className="relative bg-stone-950"
      style={{ height: `${products.length * 100}vh` }}
    >
      {/* Sticky container */}
      <div className="sticky top-0 h-screen overflow-hidden">
        {/* Background headline — fixed position, no scroll parallax. */}
        <div className="showcase-headline absolute inset-0 flex items-center justify-center pointer-events-none overflow-hidden">
          <h2
            className="text-[25vw] font-black text-white/5 leading-none select-none whitespace-nowrap"
          >
            HARVEST
          </h2>
        </div>

        {/* Progress dots — opacity + color only, no scale. */}
        <div className="absolute right-8 md:right-12 top-1/2 -translate-y-1/2 z-20 flex flex-col gap-3">
          {products.map((_, i) => (
            <div
              key={i}
              className={`w-2 h-2 rounded-full ${
                i === activeIndex
                  ? "bg-emerald-500"
                  : "bg-white/30"
              }`}
              style={{ transition: "background-color 200ms ease-out" }}
            />
          ))}
        </div>

        {/* Progress bar — width updates as scroll changes. No transition
         * (the scroll itself is the animation; an additional transition
         * makes the bar lag behind the user's scroll position). */}
        <div className="absolute bottom-0 left-0 right-0 h-1 bg-white/10">
          <div
            className="h-full bg-gradient-to-r from-emerald-600 to-amber-500"
            style={{ width: `${scrollProgress * 100}%` }}
          />
        </div>

        {/* Main content */}
        <div className="relative h-full flex flex-col justify-end pb-24 md:pb-32">
          {/* Section header */}
          <div className="absolute top-1/4 left-8 md:left-16 z-10">
            <p className="text-[11px] font-bold uppercase tracking-[0.3em] text-emerald-500/80 mb-4">
              This Season&apos;s Harvest
            </p>
            <h2 className="text-4xl md:text-5xl lg:text-6xl font-black text-white leading-[1.05] max-w-xl">
              Picked This
              <br />
              Morning
            </h2>
          </div>

          {/* Product showcase — cards sit in a flex row, all visible. The
           * active state is opacity only (no scale, no translate, no big
           * cubic-bezier). Switching is communicated by which card is
           * bright. */}
          <div className="relative w-full overflow-visible">
            <div className="flex gap-6 px-8 md:px-16">
              {products.map((product, i) => (
                <div
                  key={product.id}
                  className="product-card-wrapper"
                  style={{
                    opacity: i === activeIndex ? 1 : 0.4,
                    transition: "opacity 200ms ease-out",
                  }}
                >
                  <MorphingProductCard
                    product={product}
                    index={i}
                    isActive={i === activeIndex}
                  />
                </div>
              ))}
            </div>
          </div>

          {/* Active product info */}
          <div className="mt-8 px-8 md:px-16 max-w-xl">
            <div
              className="transition-all duration-500"
              style={{ opacity: 1, transform: "translateY(0)" }}
            >
              <p className="text-sm text-white/50 mb-2">
                {products[activeIndex]?.name}
              </p>
              <p className="text-xs text-white/30 max-w-md">
                {products[activeIndex]?.description}
              </p>
              {activeProduct && (
                <div className="mt-5 flex items-center gap-3">
                  <button
                    type="button"
                    onClick={handleAddActive}
                    disabled={!canAdd}
                    aria-label={`Add ${activeProduct.name} to cart`}
                    className={`inline-flex items-center gap-2 rounded-2xl px-6 py-3 text-sm font-bold tracking-wider transition-all duration-200 ${
                      !canAdd
                        ? "bg-white/10 text-white/40 cursor-not-allowed"
                        : addedId === activeProduct.id
                          ? "bg-emerald-500 text-white"
                          : "bg-white text-stone-950 hover:bg-stone-100 active:bg-stone-200"
                    }`}
                  >
                    {addedId === activeProduct.id ? (
                      <>
                        <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3} aria-hidden="true">
                          <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
                        </svg>
                        Added
                      </>
                    ) : isBoth ? (
                      "Add to Cart"
                    ) : isShippingOnly ? (
                      "Add — Ships"
                    ) : (
                      "Add to Cart"
                    )}
                  </button>
                  <span className="text-xs text-white/40 hidden sm:inline">
                    {isBoth
                      ? "Preorder for pickup or shipping"
                      : isShippingOnly
                        ? "Shipped after season"
                        : isPickupOnly
                          ? "Pickup at a scheduled stop"
                          : ""}
                  </span>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
