'use client';

import React, { useRef, useState, useEffect } from 'react';
import { ChevronLeft, ChevronRight } from 'lucide-react';
import { IconButton } from '@/ui/IconButton';
import { Box } from '@/ui/Box';
import { Heading } from '@/ui/Heading';
import { Text } from '@/ui/Text';

interface CarouselProps {
  children: React.ReactNode;
  title?: string;
  count?: number;
}

export function Carousel({ children, title, count }: CarouselProps) {
  const scrollRef = useRef<HTMLDivElement>(null);
  const [showLeft, setShowLeft] = useState(false);
  const [showRight, setShowRight] = useState(true);

  const checkScroll = () => {
    if (scrollRef.current) {
      const { scrollLeft, scrollWidth, clientWidth } = scrollRef.current;
      setShowLeft(scrollLeft > 10);
      setShowRight(scrollLeft < scrollWidth - clientWidth - 10);
    }
  };

  useEffect(() => {
    checkScroll();
    window.addEventListener('resize', checkScroll);
    return () => window.removeEventListener('resize', checkScroll);
  }, []);

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

  return (
    <Box position="relative">
      {/* Header with Title and Controls */}
      <Box display="flex" alignItems="center" justifyContent="between" marginBottom={6} paddingBottom={4} borderBottom="1px solid var(--ui-color-border-muted)">
        <Box display="flex" alignItems="center" gap={4}>
          {title && (
            <Heading level={2} weight="bold" uppercase size="sm" style={{ letterSpacing: '0.2em' }}>
              {title}
            </Heading>
          )}
          {count !== undefined && (
            <Box paddingX={2} paddingY={0.5} border="1px solid var(--ui-color-border-muted)" rounded="sm">
              <Text size="xs" mono variant="low">{count}</Text>
            </Box>
          )}
        </Box>

        <Box display="flex" gap={2}>
          <IconButton 
            icon={ChevronLeft} 
            onClick={() => scroll('left')}
            variant="secondary"
            size="sm"
            disabled={!showLeft}
            className={`transition-opacity duration-300 ${showLeft ? 'opacity-100' : 'opacity-30'}`}
          />
          <IconButton 
            icon={ChevronRight} 
            onClick={() => scroll('right')}
            variant="secondary"
            size="sm"
            disabled={!showRight}
            className={`transition-opacity duration-300 ${showRight ? 'opacity-100' : 'opacity-30'}`}
          />
        </Box>
      </Box>

      {/* Scroll Area with Fades */}
      <Box position="relative" group>
        {/* Left Fade */}
        <Box 
          position="absolute" 
          left={-4} 
          top={0} 
          bottom={0} 
          width={12} 
          zIndex={5}
          pointerEvents="none"
          style={{ 
            background: 'linear-gradient(to right, var(--ui-color-bg-base) 0%, transparent 100%)',
            opacity: showLeft ? 1 : 0,
            transition: 'opacity 0.3s'
          }}
        />

        {/* Scroll Container */}
        <Box 
          ref={scrollRef}
          onScroll={checkScroll}
          display="flex"
          alignItems="stretch"
          overflowX="auto"
          paddingBottom={6}
          paddingX={0}
          gap={6}
          className="scrollbar-hide snap-x snap-mandatory"
        >
          {React.Children.map(children, (child) => (
            <Box 
              display="flex"
              flexDirection="col"
              flex="none" 
              className="snap-start h-full" 
              style={{ width: '380px' }}
            >
              {child}
            </Box>
          ))}
        </Box>

        {/* Right Fade */}
        <Box 
          position="absolute" 
          right={-4} 
          top={0} 
          bottom={0} 
          width={12} 
          zIndex={5}
          pointerEvents="none"
          style={{ 
            background: 'linear-gradient(to left, var(--ui-color-bg-base) 0%, transparent 100%)',
            opacity: showRight ? 1 : 0,
            transition: 'opacity 0.3s'
          }}
        />
      </Box>
    </Box>
  );
}