'use client';

import { Box } from '@/ui/primitives/Box';
import { Text } from '@/ui/Text';
import { useState } from 'react';
import { MediaCard } from './MediaCard';
import { MediaFiltersBar } from './MediaFiltersBar';
import { MediaGrid } from './MediaGrid';
import { MediaViewerModal } from './MediaViewerModal';

export interface MediaAsset {
  id: string;
  src: string;
  title: string;
  category: string;
  date?: string;
  dimensions?: string;
}

export interface MediaGalleryProps {
  assets: MediaAsset[];
  categories: { label: string; value: string }[];
  title?: string;
  description?: string;
}

export function MediaGallery({
  assets,
  categories,
  title = 'Media Gallery',
  description,
}: MediaGalleryProps) {
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedCategory, setSelectedCategory] = useState('all');
  const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
  const [viewerAsset, setViewerAsset] = useState<MediaAsset | null>(null);

  const filteredAssets = assets.filter((asset) => {
    const matchesSearch = asset.title.toLowerCase().includes(searchQuery.toLowerCase());
    const matchesCategory = selectedCategory === 'all' || asset.category === selectedCategory;
    return matchesSearch && matchesCategory;
  });

  const handleNext = () => {
    if (!viewerAsset) return;
    const currentIndex = filteredAssets.findIndex((a) => a.id === viewerAsset.id);
    if (currentIndex < filteredAssets.length - 1) {
      const nextAsset = filteredAssets[currentIndex + 1];
      if (nextAsset) setViewerAsset(nextAsset);
    }
  };

  const handlePrev = () => {
    if (!viewerAsset) return;
    const currentIndex = filteredAssets.findIndex((a) => a.id === viewerAsset.id);
    if (currentIndex > 0) {
      const prevAsset = filteredAssets[currentIndex - 1];
      if (prevAsset) setViewerAsset(prevAsset);
    }
  };

  return (
    <Box display="flex" flexDirection="col" gap={6}>
      <Box>
        <Text as="h1" size="3xl" weight="bold" color="text-white">
          {title}
        </Text>
        {description && (
          <Text block size="sm" color="text-gray-400" mt={1}>
            {description}
          </Text>
        )}
      </Box>

      <MediaFiltersBar
        searchQuery={searchQuery}
        onSearchChange={setSearchQuery}
        category={selectedCategory}
        onCategoryChange={setSelectedCategory}
        categories={categories}
        viewMode={viewMode}
        onViewModeChange={setViewMode}
      />

      {filteredAssets.length > 0 ? (
        <MediaGrid columns={viewMode === 'grid' ? { base: 1, sm: 2, md: 3, lg: 4 } : { base: 1 }}>
          {filteredAssets.map((asset) => (
            <MediaCard
              key={asset.id}
              src={asset.src}
              title={asset.title}
              subtitle={`${asset.category}${asset.dimensions ? ` • ${asset.dimensions}` : ''}`}
              onClick={() => setViewerAsset(asset)}
            />
          ))}
        </MediaGrid>
      ) : (
        <Box py={20} center bg="bg-charcoal/10" rounded="xl" border borderStyle="dashed" borderColor="border-charcoal-outline/20">
          <Text color="text-gray-500">No media assets found matching your criteria.</Text>
        </Box>
      )}

      <MediaViewerModal
        isOpen={!!viewerAsset}
        onClose={() => setViewerAsset(null)}
        src={viewerAsset?.src}
        alt={viewerAsset?.title}
        title={viewerAsset?.title}
        onNext={handleNext}
        onPrev={handlePrev}
      />
    </Box>
  );
}