"use client";

import { useState } from "react";
import { ChevronLeft, ChevronRight, Play } from "lucide-react";
import SafeImage from "@/components/ui/SafeImage";
import ProductPhoto from "@/components/ui/ProductPhoto";

type Props = {
  images: string[];
  alt: string;
  /** Rendered as the last thumbnail with a play badge. */
  videoPoster?: string;
};

const THUMBS_PER_VIEW = 4;

export default function ProductGallery({ images, alt, videoPoster }: Props) {
  const [active, setActive] = useState(0);
  const [offset, setOffset] = useState(0);

  const thumbs = videoPoster ? [...images, videoPoster] : images;
  const videoIndex = videoPoster ? thumbs.length - 1 : -1;
  const maxOffset = Math.max(0, thumbs.length - THUMBS_PER_VIEW);

  const visible = thumbs.slice(offset, offset + THUMBS_PER_VIEW);

  return (
    <div className="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
      <div className="relative w-full aspect-square overflow-hidden bg-white">
        <ProductPhoto
          src={images[active] || images[0]}
          alt={alt}
          sizes="(min-width: 1024px) 45vw, 100vw"
        />
      </div>

      {thumbs.length > 1 && (
        <div className="flex items-center gap-2 p-3">
          <button
            type="button"
            onClick={() => setOffset((o) => Math.max(0, o - 1))}
            disabled={offset === 0}
            aria-label="Previous images"
            className="shrink-0 w-7 h-7 rounded-full border border-gray-200 bg-white flex items-center justify-center text-gray-500 hover:text-[#CC1414] hover:border-[#CC1414] disabled:opacity-30 disabled:hover:text-gray-500 disabled:hover:border-gray-200 transition-colors"
          >
            <ChevronLeft size={14} />
          </button>

          <div className="flex gap-2 flex-1 overflow-hidden">
            {visible.map((img, i) => {
              const index = offset + i;
              const isVideo = index === videoIndex;
              return (
                <button
                  key={`${img}-${index}`}
                  type="button"
                  onClick={() => !isVideo && setActive(index)}
                  aria-label={isVideo ? "Product video" : `${alt} image ${index + 1}`}
                  className={`relative flex-1 aspect-square rounded-lg overflow-hidden border transition-colors ${
                    active === index && !isVideo
                      ? "border-[#CC1414]"
                      : "border-gray-100 hover:border-gray-300"
                  }`}
                >
                  <SafeImage
                    src={img || "/logo.png"}
                    alt=""
                    fill
                    sizes="120px"
                    className="object-contain"
                  />
                  {isVideo && (
                    <span className="absolute inset-0 flex items-center justify-center bg-black/40">
                      <span className="w-7 h-7 rounded-full bg-white flex items-center justify-center">
                        <Play size={12} className="text-gray-900 fill-gray-900 ml-0.5" />
                      </span>
                    </span>
                  )}
                </button>
              );
            })}
          </div>

          <button
            type="button"
            onClick={() => setOffset((o) => Math.min(maxOffset, o + 1))}
            disabled={offset >= maxOffset}
            aria-label="Next images"
            className="shrink-0 w-7 h-7 rounded-full border border-gray-200 bg-white flex items-center justify-center text-gray-500 hover:text-[#CC1414] hover:border-[#CC1414] disabled:opacity-30 disabled:hover:text-gray-500 disabled:hover:border-gray-200 transition-colors"
          >
            <ChevronRight size={14} />
          </button>
        </div>
      )}
    </div>
  );
}