"use client";

import { useState, useCallback } from "react";
import Image from "next/image";
import { FunZoneItem } from "@/lib/types";
import { Eye, Gamepad2 } from "lucide-react";

interface FunZoneCarouselProps {
  items: FunZoneItem[];
}

const FunZoneCarousel = ({ items }: FunZoneCarouselProps) => {
  const [activeIndex, setActiveIndex] = useState(0);
  const active = items[activeIndex];

  const handleTabKeyDown = useCallback(
    (e: React.KeyboardEvent) => {
      if (e.key === "ArrowRight") {
        e.preventDefault();
        setActiveIndex((i) => (i + 1) % items.length);
      } else if (e.key === "ArrowLeft") {
        e.preventDefault();
        setActiveIndex((i) => (i - 1 + items.length) % items.length);
      }
    },
    [items.length],
  );

  return (
    <div className="flex flex-col items-center gap-6 w-full max-w-2xl mx-auto">
      {/* Spotlight card */}
      <div
        role="tabpanel"
        aria-label={active.name}
        className="w-full glass-effect glossy-effect bottom rounded-2xl overflow-hidden transition-all duration-300"
      >
        {/* Screenshot area */}
        <div className="relative w-full h-64 sm:h-80 bg-gradient-to-br from-violet-600 via-indigo-600 to-blue-600 flex items-center justify-center">
          {active.thumbnail ? (
            <Image
              src={active.thumbnail}
              alt={active.name}
              fill
              className="object-cover"
            />
          ) : (
            <Gamepad2 size={80} className="text-white/30" aria-hidden="true" />
          )}
        </div>

        {/* Info bar */}
        <div className="flex items-center justify-between p-4 sm:p-5">
          <div>
            <h2 className="text-white text-xl font-bold">{active.name}</h2>
            <p className="text-white/50 text-sm">{active.tagline}</p>
          </div>
          <div className="flex gap-2">
            <a
              href={active.play_url}
              target="_blank"
              rel="noopener noreferrer"
              className="relative overflow-hidden flex items-center gap-1.5 bg-yellow-400 hover:bg-yellow-500 px-5 py-2 rounded-full text-black text-sm font-bold transition-colors gloss-highlight"
            >
              <Eye size={16} />
              Play
            </a>
          </div>
        </div>
      </div>

      {/* Dots */}
      <div className="flex gap-2">
        {items.map((item, index) => (
          <button
            key={index}
            onClick={() => setActiveIndex(index)}
            aria-label={`Show ${item.name}`}
            className={`w-2 h-2 rounded-full transition-colors ${
              index === activeIndex ? "bg-yellow-400" : "bg-white/25"
            }`}
          />
        ))}
      </div>

      {/* Tab bar */}
      <div
        role="tablist"
        aria-label="Fun Zone projects"
        className="flex gap-2 w-full"
        onKeyDown={handleTabKeyDown}
      >
        {items.map((item, index) => (
          <button
            key={item.id}
            role="tab"
            aria-selected={index === activeIndex}
            tabIndex={index === activeIndex ? 0 : -1}
            onClick={() => setActiveIndex(index)}
            className={`flex-1 py-2.5 px-2 rounded-xl text-xs sm:text-sm font-medium transition-all duration-200 ${
              index === activeIndex
                ? "glass-effect border-yellow-400 border-2 text-white"
                : "bg-white/5 border border-white/10 text-white/50 hover:text-white/70 hover:bg-white/10"
            }`}
          >
            {item.name}
          </button>
        ))}
      </div>
    </div>
  );
};

export default FunZoneCarousel;