import React from 'react';
import { Card, Row, Col, Select, Input, RangePicker, Button, Space, SearchOutlined, FilterOutlined } from '@/imports';
import type { OperationLogQuery } from '@/services/operationLogDataSource';
import { LOOP_OPTIONS, STAGE_OPTIONS, ACTOR_OPTIONS, ACTION_OPTIONS } from '@/services/operationLogDataSource';

interface FilterPanelProps {
  filters: Partial<OperationLogQuery>;
  onFilterChange: (filters: Partial<OperationLogQuery>) => void;
  onSearch: () => void;
  onReset: () => void;
}

const FilterPanel: React.FC<FilterPanelProps> = ({ filters, onFilterChange, onSearch, onReset }) => {
  return (
    <Card style={{ marginBottom: 16 }}>
      <Row gutter={16}>
        <Col span={4}>
          <label>闭环:</label>
          <Select
            allowClear
            placeholder="选择闭环"
            style={{ width: '100%', marginTop: 4 }}
            value={filters.loop}
            onChange={value => onFilterChange({ ...filters, loop: value })}
            options={LOOP_OPTIONS}
          />
        </Col>
        <Col span={4}>
          <label>阶段:</label>
          <Select
            allowClear
            placeholder="选择阶段"
            style={{ width: '100%', marginTop: 4 }}
            value={filters.stage}
            onChange={value => onFilterChange({ ...filters, stage: value })}
            options={filters.loop ? STAGE_OPTIONS[filters.loop] || [] : []}
          />
        </Col>
        <Col span={3}>
          <label>执行者:</label>
          <Select
            allowClear
            placeholder="执行者"
            style={{ width: '100%', marginTop: 4 }}
            value={filters.actor}
            onChange={value => onFilterChange({ ...filters, actor: value })}
            options={ACTOR_OPTIONS}
          />
        </Col>
        <Col span={4}>
          <label>操作类型:</label>
          <Select
            allowClear
            placeholder="操作类型"
            style={{ width: '100%', marginTop: 4 }}
            value={filters.action}
            onChange={value => onFilterChange({ ...filters, action: value })}
            options={ACTION_OPTIONS}
          />
        </Col>
        <Col span={6}>
          <label>时间范围:</label>
          <RangePicker
            style={{ width: '100%', marginTop: 4 }}
            onChange={(dates) => {
              if (dates && dates[0] && dates[1]) {
                const startDate = dates[0];
                const endDate = dates[1];
                onFilterChange({
                  ...filters,
                  startDate: startDate.startOf('day').toISOString(),
                  endDate: endDate.endOf('day').toISOString(),
                });
              } else {
                onFilterChange({ ...filters, startDate: undefined, endDate: undefined });
              }
            }}
          />
        </Col>
        <Col span={4}>
          <label>用户ID:</label>
          <Input
            style={{ width: '100%', marginTop: 4 }}
            placeholder="输入用户ID"
            value={filters.user_id || ''}
            onChange={(e) => onFilterChange({ ...filters, user_id: e.target.value })}
          />
        </Col>
        <Col span={4}>
          <label>执行者ID:</label>
          <Input
            style={{ width: '100%', marginTop: 4 }}
            placeholder="输入执行者ID"
            value={filters.actor_id || ''}
            onChange={(e) => onFilterChange({ ...filters, actor_id: e.target.value })}
          />
        </Col>
        <Col span={4}>
          <label>TraceID:</label>
          <Input
            style={{ width: '100%', marginTop: 4 }}
            placeholder="输入TraceID"
            value={filters.trace_id || ''}
            onChange={(e) => onFilterChange({ ...filters, trace_id: e.target.value })}
          />
        </Col>
        <Col span={4}>
          <label>模块:</label>
          <Input
            style={{ width: '100%', marginTop: 4 }}
            placeholder="输入模块名称"
            value={filters.module || ''}
            onChange={(e) => onFilterChange({ ...filters, module: e.target.value })}
          />
        </Col>
        <Col span={4}>
          <label>商户ID:</label>
          <Input
            style={{ width: '100%', marginTop: 4 }}
            placeholder="输入商户ID"
            value={filters.tenant_id || ''}
            onChange={(e) => onFilterChange({ ...filters, tenant_id: e.target.value })}
          />
        </Col>
        <Col span={4}>
          <label>店铺ID:</label>
          <Input
            style={{ width: '100%', marginTop: 4 }}
            placeholder="输入店铺ID"
            value={filters.shop_id || ''}
            onChange={(e) => onFilterChange({ ...filters, shop_id: e.target.value })}
          />
        </Col>
        <Col span={6}>
          <label>关键词搜索:</label>
          <Input
            style={{ width: '100%', marginTop: 4 }}
            placeholder="搜索模块、操作、操作人等"
            value={filters.keyword || ''}
            onChange={(e) => onFilterChange({ ...filters, keyword: e.target.value })}
            prefix={<SearchOutlined />}
          />
        </Col>
        <Col span={3} style={{ display: 'flex', alignItems: 'flex-end' }}>
          <Space>
            <Button type="primary" icon={<SearchOutlined />} onClick={onSearch}>搜索</Button>
            <Button icon={<FilterOutlined />} onClick={onReset}>重置</Button>
          </Space>
        </Col>
      </Row>
    </Card>
  );
};

export default FilterPanel;