'use client';

import { LeagueCard } from '@/components/leagues/LeagueCardWrapper';
import { LeagueSummaryViewModel } from '@/lib/view-models/LeagueSummaryViewModel';
import { routes } from '@/lib/routing/RouteConfig';
import type { LeaguesViewData } from '@/lib/view-data/LeaguesViewData';
import { Button } from '@/ui/Button';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Link } from '@/ui/Link';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { ChevronLeft, ChevronRight, type LucideIcon } from 'lucide-react';
import { useCallback, useRef, useState } from 'react';

interface LeagueSliderProps {
  title: string;
  icon: LucideIcon;
  description: string;
  leagues: LeaguesViewData['leagues'];
  autoScroll?: boolean;
  iconColor?: string;
  scrollSpeedMultiplier?: number;
  scrollDirection?: 'left' | 'right';
}

export function LeagueSlider({
  title,
  icon: IconComp,
  description,
  leagues,
  iconColor = 'text-primary-blue',
}: LeagueSliderProps) {
  const scrollRef = useRef<HTMLDivElement>(null);
  const [canScrollLeft, setCanScrollLeft] = useState(false);
  const [canScrollRight, setCanScrollRight] = useState(true);

  const checkScrollButtons = useCallback(() => {
    if (scrollRef.current) {
      const { scrollLeft, scrollWidth, clientWidth } = scrollRef.current;
      setCanScrollLeft(scrollLeft > 0);
      setCanScrollRight(scrollLeft < scrollWidth - clientWidth - 10);
    }
  }, []);

  const scroll = useCallback((direction: 'left' | 'right') => {
    if (scrollRef.current) {
      const cardWidth = 340;
      const scrollAmount = direction === 'left' ? -cardWidth : cardWidth;
      scrollRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' });
    }
  }, []);

  if (leagues.length === 0) return null;

  return (
    <Stack mb={10}>
      {/* Section header */}
      <Stack display="flex" alignItems="center" justifyContent="between" mb={4}>
        <Stack direction="row" align="center" gap={3}>
          <Stack display="flex" h={10} w={10} alignItems="center" justifyContent="center" rounded="xl" bg="bg-iron-gray" border borderColor="border-charcoal-outline">
            <Icon icon={IconComp} size={5} color={iconColor} />
          </Stack>
          <Stack>
            <Heading level={2}>{title}</Heading>
            <Text size="xs" color="text-gray-500">{description}</Text>
          </Stack>
          <Stack as="span" ml={2} px={2} py={0.5} rounded="full" fontSize="0.75rem" bg="bg-charcoal-outline/50" color="text-gray-400">
            {leagues.length}
          </Stack>
        </Stack>

        {/* Navigation arrows */}
        <Stack direction="row" align="center" gap={2}>
          <Button
            variant="secondary"
            onClick={() => scroll('left')}
            disabled={!canScrollLeft}
            size="sm"
            w="2rem"
            h="2rem"
          >
            <Icon icon={ChevronLeft} size={4} />
          </Button>
          <Button
            variant="secondary"
            onClick={() => scroll('right')}
            disabled={!canScrollRight}
            size="sm"
            w="2rem"
            h="2rem"
          >
            <Icon icon={ChevronRight} size={4} />
          </Button>
        </Stack>
      </Stack>

      {/* Scrollable container with fade edges */}
      <Stack position="relative">
        <Stack 
          position="absolute" 
          top={0} 
          bottom={4} 
          left={0} 
          w="3rem" 
          bg="bg-gradient-to-r from-deep-graphite to-transparent" 
          zIndex={10} 
          pointerEvents="none" 
        />
        <Stack 
          position="absolute" 
          top={0} 
          bottom={4} 
          right={0} 
          w="3rem" 
          bg="bg-gradient-to-l from-deep-graphite to-transparent" 
          zIndex={10} 
          pointerEvents="none" 
        />
        
        <Stack
          ref={scrollRef}
          onScroll={checkScrollButtons}
          display="flex"
          gap={4}
          overflow="auto"
          pb={4}
          px={4}
          hideScrollbar
        >
          {leagues.map((league) => {
            const viewModel = new LeagueSummaryViewModel(league);

            return (
              <Stack key={league.id} flexShrink={0} w="320px">
                <Link href={routes.league.detail(league.id)} block>
                  <LeagueCard league={viewModel} />
                </Link>
              </Stack>
            );
          })}
        </Stack>
      </Stack>
    </Stack>
  );
}