import { Card } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Search } from 'lucide-react'

interface OperationLogFiltersProps {
  searchKeyword: string
  onSearchChange: (value: string) => void
  moduleFilter: string
  onModuleFilterChange: (value: string) => void
  actionFilter: string
  onActionFilterChange: (value: string) => void
  statusFilter: string
  onStatusFilterChange: (value: string) => void
}

export function OperationLogFilters({
  searchKeyword,
  onSearchChange,
  moduleFilter,
  onModuleFilterChange,
  actionFilter,
  onActionFilterChange,
  statusFilter,
  onStatusFilterChange
}: OperationLogFiltersProps) {
  return (
    <Card className="p-4">
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <div className="relative">
          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
          <Input
            placeholder="搜索用户名、操作描述..."
            value={searchKeyword}
            onChange={(e) => onSearchChange(e.target.value)}
            className="pl-10"
          />
        </div>
        <Select value={moduleFilter} onValueChange={onModuleFilterChange}>
          <SelectTrigger>
            <SelectValue placeholder="操作模块" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">全部模块</SelectItem>
            <SelectItem value="user">用户管理</SelectItem>
            <SelectItem value="role">角色管理</SelectItem>
            <SelectItem value="permission">权限管理</SelectItem>
            <SelectItem value="machinery">农机管理</SelectItem>
            <SelectItem value="driver">驾驶员管理</SelectItem>
            <SelectItem value="task">任务管理</SelectItem>
            <SelectItem value="system">系统配置</SelectItem>
          </SelectContent>
        </Select>
        <Select value={actionFilter} onValueChange={onActionFilterChange}>
          <SelectTrigger>
            <SelectValue placeholder="操作类型" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">全部类型</SelectItem>
            <SelectItem value="create">新增</SelectItem>
            <SelectItem value="update">修改</SelectItem>
            <SelectItem value="delete">删除</SelectItem>
            <SelectItem value="view">查看</SelectItem>
            <SelectItem value="export">导出</SelectItem>
            <SelectItem value="import">导入</SelectItem>
          </SelectContent>
        </Select>
        <Select value={statusFilter} onValueChange={onStatusFilterChange}>
          <SelectTrigger>
            <SelectValue placeholder="操作状态" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">全部状态</SelectItem>
            <SelectItem value="success">成功</SelectItem>
            <SelectItem value="failed">失败</SelectItem>
          </SelectContent>
        </Select>
      </div>
    </Card>
  )
}