"use client"

import { useState } from "react"
import Image from "next/image"
import { GamingSidebar } from "@/components/games/gaming-sidebar"
import { GameRow } from "@/components/games/game-row"
import { GameCard } from "@/components/games/game-card"
import { Search, Heart, Clock, Star, Zap } from "lucide-react"

// Dummy data
const DUMMY_GAMES = [
  { id: "s1", title: "Safari Hot 20", image: "https://images.unsplash.com/photo-1546182990-dffeafbe841d?w=400&h=300&fit=crop", provider: "Pragmatic Play" },
  { id: "s2", title: "Phoenix Hot 20", image: "https://images.unsplash.com/photo-1535223289827-42f1e9919769?w=400&h=300&fit=crop", provider: "Gamzix" },
  { id: "s3", title: "Habesha Fortune 5", image: "https://images.unsplash.com/photo-1511512578047-dfb367046420?w=400&h=300&fit=crop", provider: "Smartsoft" },
  { id: "s4", title: "Chicken Road 2.0", image: "https://images.unsplash.com/photo-1518717758536-85ae29035b6d?w=400&h=300&fit=crop", provider: "Smartsoft" },
  { id: "s5", title: "Hot to Burn", image: "https://images.unsplash.com/photo-1553775282-20af807d920c?w=400&h=300&fit=crop", provider: "Pragmatic Play" },
  { id: "s6", title: "HydroPlane", image: "https://images.unsplash.com/photo-1567620905732-2d1ec7bb7445?w=400&h=300&fit=crop", provider: "Smartsoft" },
  { id: "s7", title: "Maneki Win Hard", image: "https://images.unsplash.com/photo-1569154941061-e231b4725ef1?w=400&h=300&fit=crop", provider: "Scribe" },
]

const CATEGORIES = [
  { id: "search", name: "Search", icon: Search },
  { id: "popular", name: "Popular Games", icon: Star },
  { id: "favourites", name: "Favourites", icon: Heart },
  { id: "recently-played", name: "Recently Played", icon: Clock },
  { id: "evoplay", name: "Evoplay", icon: Star },
  { id: "betsoft", name: "Betsoft", icon: Star },
  { id: "inout", name: "InOUT Games", icon: Star },
  { id: "scribe", name: "Scribe Games", icon: Star },
  { id: "pragmatic", name: "Pragmatic", icon: Star },
  { id: "mancala", name: "Mancala", icon: Star },
  { id: "spinomenal", name: "Spinomenal", icon: Star },
  { id: "abracadabra", name: "Abracadabra", icon: Star },
  { id: "turbo", name: "Turbo Games", icon: Star },
]

const CATEGORIES_DATA = [
  { id: "popular", title: "Popular Games", games: [...DUMMY_GAMES, ...DUMMY_GAMES, ...DUMMY_GAMES].slice(0, 18) },
  { id: "evoplay", title: "Evoplay", games: [...DUMMY_GAMES].reverse() },
  { id: "betsoft", title: "Betsoft", games: DUMMY_GAMES.slice(0, 4) },
]

export default function SpecialGamesPage() {
  const [activeCategory, setActiveCategory] = useState("all")

  const activeCategoryData = CATEGORIES_DATA.find(c => c.id === activeCategory)

  return (
    <div className="flex h-[calc(100vh-140px)] overflow-hidden bg-brand-bg">
      <GamingSidebar 
        title="Special Games"
        subtitle="Check out our games!"
        activeCategory={activeCategory} 
        onCategoryChange={setActiveCategory} 
        categories={CATEGORIES}
      />

      <main className="flex-1 overflow-y-auto scrollbar-none pb-12">
        <div className="relative w-full aspect-[4/1] md:aspect-[5/1] overflow-hidden">
          <Image
            src="/aviator-bannsser.jpg"
            alt="Special Games Banner"
            fill
            className="object-cover"
            priority
          />
        </div>

        <div className="mt-0">
          {activeCategory === "all" ? (
            <div className="flex flex-col">
              {CATEGORIES_DATA.map((category) => (
                <GameRow 
                  key={category.id} 
                  title={category.title} 
                  games={category.games} 
                  rows={category.id === "popular" ? 3 : 1}
                />
              ))}
            </div>
          ) : (
            <div className="p-4">
              <div className="flex items-center justify-between mb-6">
                <h2 className="text-lg font-bold text-white uppercase border-l-4 border-brand-primary pl-4">
                  {activeCategoryData?.title || activeCategory.replace("-", " ")}
                </h2>
                <button 
                  onClick={() => setActiveCategory("all")}
                  className="text-xs text-white/40 hover:text-white uppercase font-bold"
                >
                  Back to Special Games
                </button>
              </div>
              
              <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-6">
                {(activeCategoryData?.games || DUMMY_GAMES).map((game, idx) => (
                  <GameCard key={idx} {...game} />
                ))}
              </div>
            </div>
          )}
        </div>
      </main>
    </div>
  )
}