'use client';

import React from 'react';
import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Search } from 'lucide-react';
import { FilterOptions } from '../types';

interface AuditHistoryFiltersProps {
  filters: FilterOptions;
  onFiltersChange: (filters: FilterOptions) => void;
}

export function AuditHistoryFilters({ filters, onFiltersChange }: AuditHistoryFiltersProps) {
  const updateFilter = (key: keyof FilterOptions, value: string) => {
    onFiltersChange({
      ...filters,
      [key]: value
    });
  };

  return (
    <Card className="p-4">
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <div className="md:col-span-2">
          <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={filters.searchKeyword}
              onChange={(e) => updateFilter('searchKeyword', e.target.value)}
              className="pl-10"
            />
          </div>
        </div>
        <Select value={filters.typeFilter} onValueChange={(value) => updateFilter('typeFilter', value)}>
          <SelectTrigger>
            <SelectValue placeholder="审核类型" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">全部类型</SelectItem>
            <SelectItem value="register">注册审核</SelectItem>
            <SelectItem value="update">变更审核</SelectItem>
          </SelectContent>
        </Select>
        <Select value={filters.resultFilter} onValueChange={(value) => updateFilter('resultFilter', value)}>
          <SelectTrigger>
            <SelectValue placeholder="审核结果" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">全部结果</SelectItem>
            <SelectItem value="pending">待审核</SelectItem>
            <SelectItem value="approved">已通过</SelectItem>
            <SelectItem value="rejected">已驳回</SelectItem>
          </SelectContent>
        </Select>
      </div>
      <div className="mt-4">
        <Label className="text-sm text-muted-foreground mb-2 block">时间范围</Label>
        <div className="flex gap-2">
          {[
            { value: 'all', label: '全部' },
            { value: 'today', label: '今天' },
            { value: 'week', label: '近7天' },
            { value: 'month', label: '近30天' },
            { value: 'quarter', label: '近90天' },
          ].map((option) => (
            <Button
              key={option.value}
              variant={filters.dateRange === option.value ? 'default' : 'outline'}
              size="sm"
              onClick={() => updateFilter('dateRange', option.value)}
            >
              {option.label}
            </Button>
          ))}
        </div>
      </div>
    </Card>
  );
}