'use client'

import { useState } from 'react'
import { useTranslations } from 'next-intl'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { 
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import { Badge } from '@/components/ui/badge'
import { Search, Filter, X } from 'lucide-react'

interface Tag {
  id: string
  name: string
  color: string
  _count: {
    prompts: number
  }
}

interface PlazaFiltersProps {
  search: string
  onSearchChange: (value: string) => void
  selectedTag: string
  onTagChange: (value: string) => void
  tags: Tag[]
  sortBy: string
  onSortByChange: (value: string) => void
  sortOrder: string
  onSortOrderChange: (value: string) => void
  onClearFilters: () => void
}

export function PlazaFilters({
  search,
  onSearchChange,
  selectedTag,
  onTagChange,
  tags,
  sortBy,
  onSortByChange,
  sortOrder,
  onSortOrderChange,
  onClearFilters,
}: PlazaFiltersProps) {
  const t = useTranslations('plaza')
  const [showMobileFilters, setShowMobileFilters] = useState(false)

  const hasActiveFilters = search || selectedTag || sortBy !== 'createdAt' || sortOrder !== 'desc'

  return (
    <div className="mb-8">
      {/* Desktop Filters */}
      <div className="hidden md:flex items-center gap-4 mb-4">
        {/* Search */}
        <div className="relative flex-1 max-w-md">
          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
          <Input
            placeholder={t('searchPlaceholder')}
            value={search}
            onChange={(e) => onSearchChange(e.target.value)}
            className="pl-9"
          />
        </div>

        {/* Tag Filter */}
        <Select value={selectedTag} onValueChange={onTagChange}>
          <SelectTrigger className="w-[200px]">
            <SelectValue placeholder={t('filterByTag')} />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="">{t('allTags')}</SelectItem>
            {tags.map((tag) => (
              <SelectItem key={tag.id} value={tag.name}>
                <div className="flex items-center gap-2">
                  <div 
                    className="w-3 h-3 rounded-full" 
                    style={{ backgroundColor: tag.color }}
                  />
                  <span>{tag.name}</span>
                  <span className="text-xs text-muted-foreground">
                    ({tag._count.prompts})
                  </span>
                </div>
              </SelectItem>
            ))}
          </SelectContent>
        </Select>

        {/* Sort */}
        <Select value={sortBy} onValueChange={onSortByChange}>
          <SelectTrigger className="w-[160px]">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="createdAt">{t('sortByNewest')}</SelectItem>
            <SelectItem value="name">{t('sortByName')}</SelectItem>
          </SelectContent>
        </Select>

        {/* Clear Filters */}
        {hasActiveFilters && (
          <Button variant="outline" onClick={onClearFilters}>
            <X className="h-4 w-4 mr-2" />
            {t('clearFilters')}
          </Button>
        )}
      </div>

      {/* Mobile Filters */}
      <div className="md:hidden mb-4">
        {/* Search */}
        <div className="relative mb-4">
          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
          <Input
            placeholder={t('searchPlaceholder')}
            value={search}
            onChange={(e) => onSearchChange(e.target.value)}
            className="pl-9"
          />
        </div>

        {/* Filter Toggle */}
        <div className="flex items-center justify-between mb-4">
          <Button
            variant="outline"
            onClick={() => setShowMobileFilters(!showMobileFilters)}
          >
            <Filter className="h-4 w-4 mr-2" />
            {t('filter')}
          </Button>
          
          {hasActiveFilters && (
            <Button variant="ghost" size="sm" onClick={onClearFilters}>
              <X className="h-4 w-4 mr-1" />
              {t('clearFilters')}
            </Button>
          )}
        </div>

        {/* Mobile Filter Panel */}
        {showMobileFilters && (
          <div className="space-y-4 p-4 border rounded-lg bg-card">
            {/* Tag Filter */}
            <div>
              <label className="text-sm font-medium mb-2 block">
                {t('filterByTag')}
              </label>
              <Select value={selectedTag} onValueChange={onTagChange}>
                <SelectTrigger>
                  <SelectValue placeholder={t('allTags')} />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="">{t('allTags')}</SelectItem>
                  {tags.map((tag) => (
                    <SelectItem key={tag.id} value={tag.name}>
                      <div className="flex items-center gap-2">
                        <div 
                          className="w-3 h-3 rounded-full" 
                          style={{ backgroundColor: tag.color }}
                        />
                        <span>{tag.name}</span>
                        <span className="text-xs text-muted-foreground">
                          ({tag._count.prompts})
                        </span>
                      </div>
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            {/* Sort */}
            <div>
              <label className="text-sm font-medium mb-2 block">
                {t('sortBy')}
              </label>
              <Select value={sortBy} onValueChange={onSortByChange}>
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="createdAt">{t('sortByNewest')}</SelectItem>
                  <SelectItem value="name">{t('sortByName')}</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
        )}
      </div>

      {/* Active Filters Display */}
      {hasActiveFilters && (
        <div className="flex flex-wrap items-center gap-2">
          {search && (
            <Badge variant="secondary" className="gap-1">
              {search}
              <X 
                className="h-3 w-3 cursor-pointer" 
                onClick={() => onSearchChange('')}
              />
            </Badge>
          )}
          {selectedTag && (
            <Badge variant="secondary" className="gap-1">
              {selectedTag}
              <X 
                className="h-3 w-3 cursor-pointer" 
                onClick={() => onTagChange('')}
              />
            </Badge>
          )}
          {(sortBy !== 'createdAt' || sortOrder !== 'desc') && (
            <Badge variant="secondary" className="gap-1">
              {t(sortBy === 'name' ? 'sortByName' : 'sortByNewest')}
              <X 
                className="h-3 w-3 cursor-pointer" 
                onClick={() => {
                  onSortByChange('createdAt')
                  onSortOrderChange('desc')
                }}
              />
            </Badge>
          )}
        </div>
      )}
    </div>
  )
}