'use client';

import { Text } from '@/ui/Text';
import { MediaCard } from '@/ui/MediaCard';
import { MediaFiltersBar } from './MediaFiltersBar';
import { Grid } from '@/ui/Grid';
import { Stack } from '@/ui/Stack';
import { MediaViewerModal } from './MediaViewerModal';
import { SectionHeader } from '@/ui/SectionHeader';
import { EmptyState } from '@/ui/EmptyState';
import { Search } from 'lucide-react';
import React, { useState } from 'react';

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 (
    <Stack gap={6}>
      <SectionHeader
        title={title}
        description={description}
      />

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

      {filteredAssets.length > 0 ? (
        <Grid cols={viewMode === 'grid' ? { base: 1, sm: 2, md: 3, lg: 4 } : 1} gap={4}>
          {filteredAssets.map((asset) => (
            <MediaCard
              key={asset.id}
              src={asset.src}
              title={asset.title}
              subtitle={`${asset.category}${asset.dimensions ? ` • ${asset.dimensions}` : ''}`}
              onClick={() => setViewerAsset(asset)}
            />
          ))}
        </Grid>
      ) : (
        <EmptyState
          icon={Search}
          title="No media assets found"
          description="Try adjusting your search or filters"
          variant="minimal"
        />
      )}

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