'use client';

import { Person, Tag } from '@prisma/client';
import { useSession } from 'next-auth/react';
import { PeopleFilter } from './PeopleFilter';
import { DateRangeFilter } from './DateRangeFilter';
import { TagFilter } from './TagFilter';
import { MediaTypeFilter } from './MediaTypeFilter';
import { FavoritesFilter } from './FavoritesFilter';
import { Button } from '@/components/ui/button';
import { X } from 'lucide-react';

export interface SearchFilters {
  people: number[];
  peopleMode?: 'any' | 'all';
  tags: number[];
  tagsMode?: 'any' | 'all';
  dateFrom?: Date;
  dateTo?: Date;
  mediaType?: 'all' | 'photos' | 'videos';
  favoritesOnly?: boolean;
}

interface FilterPanelProps {
  people: Person[];
  tags: Tag[];
  filters: SearchFilters;
  onFiltersChange: (filters: SearchFilters) => void;
}

export function FilterPanel({ people, tags, filters, onFiltersChange }: FilterPanelProps) {
  const { data: session } = useSession();
  const isLoggedIn = Boolean(session);

  const updateFilters = (updates: Partial<SearchFilters>) => {
    onFiltersChange({ ...filters, ...updates });
  };

  const clearAllFilters = () => {
    onFiltersChange({
      people: [],
      peopleMode: 'any',
      tags: [],
      tagsMode: 'any',
      dateFrom: undefined,
      dateTo: undefined,
      mediaType: 'all',
      favoritesOnly: false,
    });
  };

  const hasActiveFilters =
    filters.people.length > 0 ||
    filters.tags.length > 0 ||
    filters.dateFrom ||
    filters.dateTo ||
    (filters.mediaType && filters.mediaType !== 'all') ||
    filters.favoritesOnly === true;

  return (
    <div className="space-y-6 p-4">
      <div className="flex items-center justify-between">
        <h2 className="text-lg font-semibold text-secondary">Filters</h2>
        {hasActiveFilters && (
          <Button
            variant="ghost"
            size="sm"
            onClick={clearAllFilters}
            className="h-8"
          >
            <X className="mr-2 h-4 w-4" />
            Clear All
          </Button>
        )}
      </div>

      {isLoggedIn && (
        <PeopleFilter
          people={people}
          selected={filters.people}
          mode={filters.peopleMode || 'any'}
          onSelectionChange={(selected) => updateFilters({ people: selected })}
          onModeChange={(mode) => updateFilters({ peopleMode: mode })}
        />
      )}

      <MediaTypeFilter
        value={filters.mediaType || 'all'}
        onChange={(value) => updateFilters({ mediaType: value })}
      />

      {isLoggedIn && (
        <FavoritesFilter
          value={filters.favoritesOnly || false}
          onChange={(value) => updateFilters({ favoritesOnly: value })}
        />
      )}

      <DateRangeFilter
        dateFrom={filters.dateFrom}
        dateTo={filters.dateTo}
        onDateChange={(dateFrom, dateTo) => updateFilters({ dateFrom, dateTo })}
      />

      <TagFilter
        tags={tags}
        selected={filters.tags}
        mode={filters.tagsMode || 'any'}
        onSelectionChange={(selected) => updateFilters({ tags: selected })}
        onModeChange={(mode) => updateFilters({ tagsMode: mode })}
      />
    </div>
  );
}

