import { useRef } from 'react';
import { useQueries } from '@tanstack/react-query';
import { FocusContext, useFocusable } from '@noriginmedia/norigin-spatial-navigation';
import { useFocusableAutoScroll } from '../hooks/useFocusableAutoScroll';
import { rommApiClient, Game } from '../api/client';
import { GameCard } from './GameCard';
import { CollectionCard } from './CollectionCard';
import { FeaturedHero } from './FeaturedHero';

const ScrollBumper = ({ children }: { children: React.ReactNode }) => (
  <div className="snap-start shrink-0 px-3 py-6">
    {children}
  </div>
);

const ScrollableSection = ({ title, children, showViewAll }: { title: string, children: React.ReactNode, showViewAll?: boolean }) => {
  const scrollRef = useRef<HTMLDivElement>(null);

  const scroll = (direction: 'left' | 'right') => {
    if (scrollRef.current) {
      const { current } = scrollRef;
      const scrollAmount = direction === 'left' ? -current.offsetWidth * 0.75 : current.offsetWidth * 0.75;
      current.scrollBy({ left: scrollAmount, behavior: 'smooth' });
    }
  };

  return (
    <section className="relative group/section">
      <div className="flex items-center justify-between mb-8 border-l-4 border-[#2563eb] pl-4">
        <div className="flex items-center gap-4">
          <h3 className="text-xl font-black text-white uppercase tracking-tighter geist-mono">{title}</h3>
          <div className="flex items-center gap-1 opacity-60 hover:opacity-100 transition-opacity duration-300">
            <button onClick={() => scroll('left')} className="hover:text-white text-[#c3c6d7] transition-all h-6 w-6 flex items-center justify-center rounded-full hover:bg-white/10 active:scale-95 border border-transparent hover:border-white/20">
              <span className="material-symbols-outlined text-[20px]" style={{ fontVariationSettings: "'wght' 300" }}>chevron_left</span>
            </button>
            <button onClick={() => scroll('right')} className="hover:text-white text-[#c3c6d7] transition-all h-6 w-6 flex items-center justify-center rounded-full hover:bg-white/10 active:scale-95 border border-transparent hover:border-white/20">
              <span className="material-symbols-outlined text-[20px]" style={{ fontVariationSettings: "'wght' 300" }}>chevron_right</span>
            </button>
          </div>
        </div>
        {showViewAll && <a className="text-[10px] font-black text-[#2563eb] hover:underline uppercase geist-mono tracking-[0.3em]" href="#">View All</a>}
      </div>
      <div ref={scrollRef} className="flex overflow-x-auto no-scrollbar -mx-3 scroll-smooth relative pt-2 pb-4 px-4">
        {children}
      </div>
    </section>
  );
};

const FocusableContinueCard = ({ game }: { game: Game }) => {
  const { ref, focused } = useFocusableAutoScroll({ onEnterPress: () => console.log("Continue Game", game.id) });
  return (
    <ScrollBumper>
      <div ref={ref} className={`bg-[#1c1f2c] p-6 flex gap-6 hover:bg-[#272937] transition-all duration-300 cursor-pointer group rounded-[12px] ring-1 w-[420px] shrink-0 shadow-[0_10px_30px_rgba(0,0,0,0.2)] ${focused ? 'scale-105 ring-2 ring-[#2563eb] bg-[#272937] z-10 shadow-2xl' : 'ring-white/5 hover:ring-[#2563eb]/50'}`}>
        <div className="w-28 aspect-square bg-white/5 overflow-hidden shrink-0 rounded-[8px] border border-white/5 shadow-inner">
        <img className={`w-full h-full object-cover transition-transform duration-700 ${focused ? 'scale-105' : 'group-hover:scale-105'}`} src={game.coverUrl} alt="Cover" />
      </div>
      <div className="flex-1 flex flex-col justify-center min-w-0">
        <h4 className="text-sm font-black text-white mb-3 geist-mono uppercase line-clamp-2 truncate whitespace-normal">{game.title}</h4>
        <div className="flex items-center justify-between text-[10px] text-[#c3c6d7] uppercase geist-mono mb-2 font-bold tracking-widest">
          <span>84% Complete</span>
          <span className="text-[#2563eb]">Active</span>
        </div>
        <div className="h-1 bg-white/5 overflow-hidden rounded-full mt-auto">
          <div className="h-full bg-[#2563eb] w-[84%] shadow-[0_0_10px_rgba(37,99,235,0.8)]"></div>
        </div>
      </div>
    </div>
    </ScrollBumper>
  );
};

const LibraryGrid = () => {
  const { ref: gridRef, focusKey: gridFocusKey } = useFocusable();

  const results = useQueries({
    queries: [
      { queryKey: ['recentGames'], queryFn: () => rommApiClient.fetchRecentGames() },
      { queryKey: ['collections'], queryFn: () => rommApiClient.fetchCollections() },
      { queryKey: ['favorites'], queryFn: () => rommApiClient.fetchFavorites() },
      { queryKey: ['playing'], queryFn: () => rommApiClient.fetchGames() }
    ]
  });

  const isLoading = results.some(r => r.isLoading);
  const error = results.some(r => r.error);

  if (isLoading) return <div className="text-center py-20 text-white/50 animate-pulse col-span-full geist-mono uppercase">Loading vault data...</div>;
  if (error) return <div className="text-red-500 col-span-full geist-mono uppercase">Failed to load vault data</div>;

  const recentGames = results[0].data || [];
  const collections = results[1].data || [];
  const favorites = results[2].data || [];
  const continuePlaying = results[3].data || [];

  const featuredCollections = collections.filter((c) => c.name.toLowerCase() === 'featured');
  const combinedFeaturedGames = Array.from(new Map(featuredCollections.flatMap(c => c.games).map(g => [g.id, g])).values());

  const hasFeatured = combinedFeaturedGames.length > 0;
  const heroGames = hasFeatured ? combinedFeaturedGames : recentGames;
  const showRecentSection = hasFeatured;
  const standardCollections = collections.filter(c => c.name.toLowerCase() !== 'featured');

  return (
    <FocusContext.Provider value={gridFocusKey}>
      <div ref={gridRef} className="flex flex-col relative w-full h-full">
        {heroGames.length > 0 && <FeaturedHero games={heroGames} isFallback={!hasFeatured} />}

        <div className="px-12 py-16 space-y-20 pb-24">

          {showRecentSection && recentGames.length > 0 && (
            <ScrollableSection title="Recently Added" showViewAll>
              {recentGames.map((game) => (
                <ScrollBumper key={game.id + "-recent"}>
                  <GameCard game={game} />
                </ScrollBumper>
              ))}
            </ScrollableSection>
          )}

          {continuePlaying.length > 0 && (
            <ScrollableSection title="Continue Playing">
              {continuePlaying.slice(0, 5).map((game) => (
                <FocusableContinueCard key={game.id + "-continue"} game={game} />
              ))}
            </ScrollableSection>
          )}

          {favorites.length > 0 && (
            <ScrollableSection title="Favorites" showViewAll>
              {favorites.map((game) => (
                <ScrollBumper key={game.id + "-fav"}>
                  <GameCard game={game} />
                </ScrollBumper>
              ))}
            </ScrollableSection>
          )}

          {standardCollections.length > 0 && (
            <ScrollableSection title="Collections" showViewAll>
              {standardCollections.map((col) => {
                const cover = col.games?.[0]?.coverUrl || '';
                const gamesCount = col.games?.length || 0;
                const caption = gamesCount > 0 ? `${gamesCount} Game${gamesCount === 1 ? '' : 's'}` : (col.ownerRole === 'admin' ? 'Public' : 'Private');

                return (
                  <ScrollBumper key={col.id}>
                    <CollectionCard
                      name={col.name}
                      caption={caption}
                      coverUrl={cover}
                    />
                  </ScrollBumper>
                );
              })}
            </ScrollableSection>
          )}

          {/* Autogenerated Collections */}
          <ScrollableSection title="Autogenerated Collections">
            {[
              { id: 'auto-1', name: 'All Games', icon: 'apps' },
              { id: 'auto-2', name: 'Favorites', icon: 'star' },
              { id: 'auto-3', name: 'Recently Added', icon: 'schedule' },
              { id: 'auto-4', name: 'Recently Played', icon: 'history' },
              { id: 'auto-5', name: 'Most Played', icon: 'leaderboard' },
              { id: 'auto-6', name: 'Never Played', icon: 'videogame_asset_off' },
            ].map((col) => (
              <ScrollBumper key={col.id}>
                <CollectionCard
                  name={col.name}
                  caption="Smart Collection"
                  icon={col.icon}
                />
              </ScrollBumper>
            ))}
          </ScrollableSection>

        </div>
      </div>
    </FocusContext.Provider>
  );
};

export default LibraryGrid;