"use client";

import { Input } from '@/components/ui/input';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Search } from 'lucide-react';
import { StatsOverview } from '@/lib/types';

interface AccountFiltersProps {
  filters: {
    platform: string;
    status: string[];
    ownerId: string;
    search: string;
  };
  stats: StatsOverview | null;
  onFilterChange: (key: string, value: any) => void;
}

export function AccountFilters({ filters, stats, onFilterChange }: AccountFiltersProps) {
  return (
    <div className="flex flex-wrap gap-4">
      <div className="flex items-center space-x-2">
        <Search className="h-4 w-4" />
        <Input
          placeholder="搜索账户..."
          value={filters.search}
          onChange={(e) => onFilterChange('search', e.target.value)}
          className="w-[200px]"
        />
      </div>
      
      <Select 
        value={filters.platform || 'all'} 
        onValueChange={(value) => onFilterChange('platform', value === 'all' ? '' : value)}
      >
        <SelectTrigger className="w-[150px]">
          <SelectValue placeholder="选择平台" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="all">所有平台</SelectItem>
          {stats && Object.keys(stats.platformSummary).map(platform => (
            <SelectItem key={platform} value={platform}>{platform}</SelectItem>
          ))}
        </SelectContent>
      </Select>
      
      <Select 
        value={filters.ownerId || 'all'} 
        onValueChange={(value) => onFilterChange('ownerId', value === 'all' ? '' : value)}
      >
        <SelectTrigger className="w-[150px]">
          <SelectValue placeholder="选择所有者" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="all">所有所有者</SelectItem>
          {stats && Object.keys(stats.ownerSummary).map(owner => (
            <SelectItem key={owner} value={owner}>{owner}</SelectItem>
          ))}
        </SelectContent>
      </Select>
      
      <Select 
        value={filters.status.length > 0 ? filters.status[0] : 'all'} 
        onValueChange={(value) => onFilterChange('status', value === 'all' ? [] : [value])}
      >
        <SelectTrigger className="w-[150px]">
          <SelectValue placeholder="选择状态" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="all">所有状态</SelectItem>
          <SelectItem value="available">可用</SelectItem>
          <SelectItem value="locked">已锁定</SelectItem>
          <SelectItem value="banned">已封禁</SelectItem>
        </SelectContent>
      </Select>
    </div>
  );
}