"use client";

import { useState, useCallback } from "react";
import Image from "next/image";
import { RiArrowLeftLine, RiArrowRightLine } from "@remixicon/react";
import { useProduct } from "@/app/(users)/product/[slug]/product-page-client";

export default function ProductGallery() {
  const product = useProduct();
  const images =
    product.media.images.length > 0
      ? product.media.images.map((img) => img.url)
      : [product.media.featuredImage];
  const [activeIndex, setActiveIndex] = useState(0);

  const goTo = useCallback(
    (index: number) => {
      setActiveIndex((index + images.length) % images.length);
    },
    [images.length],
  );

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === "ArrowRight") goTo(activeIndex + 1);
    if (e.key === "ArrowLeft") goTo(activeIndex - 1);
  };

  return (
    <div className="lg:col-span-7">
      <div className="sticky top-32 flex flex-col items-center gap-4">
        {/* Main Image */}
        <div
          className="group relative flex w-full max-w-lg"
          role="group"
          aria-label="Product image viewer"
          aria-roledescription="carousel"
          tabIndex={0}
          onKeyDown={handleKeyDown}
        >
          <div className="flex w-full aspect-square overflow-hidden rounded-2xl border bg-surface-container-lowest">
            <Image
              key={activeIndex}
              src={images[activeIndex]}
              alt={`${product.name}, view ${activeIndex + 1}`}
              width={1200}
              height={1200}
              priority
            />
          </div>

          {/* Image counter */}
          <div className="absolute bottom-3 right-3 rounded-full bg-surface-container-highest/90 px-2.5 py-1 text-xs font-medium text-on-surface-variant backdrop-blur-sm">
            {activeIndex + 1} / {images.length}
          </div>

          {/* Prev/Next controls */}
          {images.length > 1 && (
            <>
              <button
                type="button"
                onClick={() => goTo(activeIndex - 1)}
                aria-label="Previous image"
                className="absolute left-2 top-1/2 flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-full bg-surface-container-highest/90 text-on-surface opacity-0 transition-opacity duration-200 hover:bg-surface-container-highest group-hover:opacity-100 text-white"
              >
                <RiArrowLeftLine />
              </button>
              <button
                type="button"
                onClick={() => goTo(activeIndex + 1)}
                aria-label="Next image"
                className="absolute right-2 top-1/2 flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-full bg-surface-container-highest/90 text-on-surface opacity-0 transition-opacity duration-200 hover:bg-surface-container-highest group-hover:opacity-100 text-white"
              >
                <RiArrowRightLine />
              </button>
            </>
          )}
        </div>

        {/* Thumbnails */}
        {images.length > 1 && (
          <div className="flex w-full max-w-lg justify-start gap-3">
            {images.map((src, index) => {
              const isActive = index === activeIndex;
              return (
                <button
                  key={index}
                  type="button"
                  onClick={() => goTo(index)}
                  aria-label={`View image ${index + 1}`}
                  aria-current={isActive}
                  className="flex flex-col items-center gap-1.5"
                >
                  <span
                    className={`flex h-16 w-16 overflow-hidden rounded-lg border transition-all duration-200 ${
                      isActive
                        ? "border-primary"
                        : "border-outline-variant opacity-60 hover:opacity-100"
                    }`}
                  >
                    <Image
                      src={src}
                      alt=""
                      width={96}
                      height={96}
                      className="h-full w-full object-cover"
                    />
                  </span>
                  <span
                    className={`h-0.5 w-5 rounded-full transition-colors duration-200 ${
                      isActive ? "bg-primary" : "bg-transparent"
                    }`}
                  />
                </button>
              );
            })}
          </div>
        )}
      </div>
    </div>
  );
}