import React, { useState } from 'react';
import { 
  MagnifyingGlassIcon,
  FunnelIcon,
  XMarkIcon,
} from '@heroicons/react/24/outline';
import {CustomMultiSelect, CustomSelect} from '../CustomSelect';

interface SearchFilters {
  categories?: string[];
  styles?: string[];
  occasions?: string[];
  seasons?: string[];
  colors?: string[];
  minScore?: number;
  confidenceLevel?: string;
  matchingTypes?: string[];
}

interface OutfitSearchPanelProps {
  filters: SearchFilters;
  onFiltersChange: (filters: SearchFilters) => void;
  onSearch: () => void;
}

const OutfitSearchPanel: React.FC<OutfitSearchPanelProps> = ({
  filters,
  onFiltersChange,
  onSearch
}) => {
  const [isExpanded, setIsExpanded] = useState(false);
  const [searchText, setSearchText] = useState('');

  // 预定义选项
  const categoryOptions = [
    { value: 'Top', label: '上装' },
    { value: 'Bottom', label: '下装' },
    { value: 'Dress', label: '连衣裙' },
    { value: 'Outerwear', label: '外套' },
    { value: 'Footwear', label: '鞋类' },
    { value: 'Accessory', label: '配饰' }
  ];

  const styleOptions = [
    { value: 'Casual', label: '休闲' },
    { value: 'Formal', label: '正式' },
    { value: 'Business', label: '商务' },
    { value: 'Sporty', label: '运动' },
    { value: 'Vintage', label: '复古' },
    { value: 'Bohemian', label: '波西米亚' },
    { value: 'Minimalist', label: '极简' },
    { value: 'Streetwear', label: '街头' },
    { value: 'Elegant', label: '优雅' },
    { value: 'Trendy', label: '时尚' }
  ];

  const occasionOptions = [
    { value: 'work', label: '工作' },
    { value: 'casual', label: '日常' },
    { value: 'party', label: '聚会' },
    { value: 'date', label: '约会' },
    { value: 'travel', label: '旅行' },
    { value: 'sport', label: '运动' },
    { value: 'formal', label: '正式场合' }
  ];

  const seasonOptions = [
    { value: 'spring', label: '春季' },
    { value: 'summer', label: '夏季' },
    { value: 'autumn', label: '秋季' },
    { value: 'winter', label: '冬季' }
  ];

  const colorOptions = [
    { value: 'red', label: '红色' },
    { value: 'blue', label: '蓝色' },
    { value: 'green', label: '绿色' },
    { value: 'yellow', label: '黄色' },
    { value: 'purple', label: '紫色' },
    { value: 'orange', label: '橙色' },
    { value: 'pink', label: '粉色' },
    { value: 'brown', label: '棕色' },
    { value: 'black', label: '黑色' },
    { value: 'white', label: '白色' },
    { value: 'gray', label: '灰色' }
  ];

  const confidenceLevelOptions = [
    { value: 'Low', label: '低' },
    { value: 'Medium', label: '中' },
    { value: 'High', label: '高' },
    { value: 'Excellent', label: '极佳' }
  ];

  const matchingTypeOptions = [
    { value: 'ColorHarmony', label: '颜色和谐' },
    { value: 'StyleConsistent', label: '风格一致' },
    { value: 'Complementary', label: '互补搭配' },
    { value: 'Seasonal', label: '季节搭配' },
    { value: 'Occasion', label: '场合搭配' },
    { value: 'Trendy', label: '时尚搭配' }
  ];

  const handleFilterChange = (key: keyof SearchFilters, value: any) => {
    onFiltersChange({
      ...filters,
      [key]: value
    });
  };

  const clearFilters = () => {
    onFiltersChange({});
    setSearchText('');
  };

  const hasActiveFilters = () => {
    return Object.keys(filters).some(key => {
      const value = filters[key as keyof SearchFilters];
      return Array.isArray(value) ? value.length > 0 : value !== undefined && value !== null;
    });
  };

  const getActiveFilterCount = () => {
    let count = 0;
    Object.keys(filters).forEach(key => {
      const value = filters[key as keyof SearchFilters];
      if (Array.isArray(value) && value.length > 0) {
        count += value.length;
      } else if (value !== undefined && value !== null) {
        count += 1;
      }
    });
    return count;
  };

  return (
    <div className="bg-white border border-gray-200 rounded-lg p-4 space-y-4">
      {/* 搜索栏和展开按钮 */}
      <div className="flex items-center space-x-3">
        <div className="flex-1 relative">
          <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
            <MagnifyingGlassIcon className="h-5 w-5 text-gray-400" />
          </div>
          <input
            type="text"
            value={searchText}
            onChange={(e) => setSearchText(e.target.value)}
            placeholder="搜索搭配..."
            className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
          />
        </div>
        
        <button
          onClick={() => setIsExpanded(!isExpanded)}
          className={`inline-flex items-center px-3 py-2 border border-gray-300 rounded-md text-sm font-medium ${
            hasActiveFilters() 
              ? 'text-indigo-700 bg-indigo-50 border-indigo-300' 
              : 'text-gray-700 bg-white hover:bg-gray-50'
          }`}
        >
          <FunnelIcon className="h-4 w-4 mr-1" />
          筛选
          {hasActiveFilters() && (
            <span className="ml-1 inline-flex items-center justify-center px-2 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">
              {getActiveFilterCount()}
            </span>
          )}
        </button>

        <button
          onClick={onSearch}
          className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"
        >
          搜索
        </button>
      </div>

      {/* 展开的筛选面板 */}
      {isExpanded && (
        <div className="border-t border-gray-200 pt-4 space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {/* 服装类别 */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                服装类别
              </label>
              <CustomMultiSelect
                options={categoryOptions}
                value={filters.categories || []}
                onChange={(value) => handleFilterChange('categories', value)}
                placeholder="选择类别"
              />
            </div>

            {/* 风格 */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                风格
              </label>
              <CustomMultiSelect
                options={styleOptions}
                value={filters.styles || []}
                onChange={(value) => handleFilterChange('styles', value)}
                placeholder="选择风格"
              />
            </div>

            {/* 场合 */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                适用场合
              </label>
              <CustomMultiSelect
                options={occasionOptions}
                value={filters.occasions || []}
                onChange={(value) => handleFilterChange('occasions', value)}
                placeholder="选择场合"
              />
            </div>

            {/* 季节 */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                适用季节
              </label>
              <CustomMultiSelect
                options={seasonOptions}
                value={filters.seasons || []}
                onChange={(value) => handleFilterChange('seasons', value)}
                placeholder="选择季节"
              />
            </div>

            {/* 颜色 */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                主要颜色
              </label>
              <CustomMultiSelect
                options={colorOptions}
                value={filters.colors || []}
                onChange={(value) => handleFilterChange('colors', value)}
                placeholder="选择颜色"
              />
            </div>

            {/* 搭配类型 */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                搭配类型
              </label>
              <CustomMultiSelect
                options={matchingTypeOptions}
                value={filters.matchingTypes || []}
                onChange={(value) => handleFilterChange('matchingTypes', value)}
                placeholder="选择搭配类型"
              />
            </div>
          </div>

          {/* 评分和置信度 */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {/* 最低评分 */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                最低评分
              </label>
              <input
                type="range"
                min="0"
                max="1"
                step="0.1"
                value={filters.minScore || 0}
                onChange={(e) => handleFilterChange('minScore', parseFloat(e.target.value))}
                className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
              />
              <div className="flex justify-between text-xs text-gray-500 mt-1">
                <span>0.0</span>
                <span className="font-medium">{(filters.minScore || 0).toFixed(1)}</span>
                <span>1.0</span>
              </div>
            </div>

            {/* 置信度等级 */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                置信度等级
              </label>
              <CustomSelect
                options={confidenceLevelOptions}
                value={filters.confidenceLevel || ''}
                onChange={(value) => handleFilterChange('confidenceLevel', value)}
                placeholder="选择置信度等级"
              />
            </div>
          </div>

          {/* 操作按钮 */}
          <div className="flex justify-between items-center pt-4 border-t border-gray-200">
            <button
              onClick={clearFilters}
              className="inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
              disabled={!hasActiveFilters()}
            >
              <XMarkIcon className="h-4 w-4 mr-1" />
              清空筛选
            </button>

            <div className="flex space-x-2">
              <button
                onClick={() => setIsExpanded(false)}
                className="inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
              >
                收起
              </button>
              <button
                onClick={onSearch}
                className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"
              >
                应用筛选
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default OutfitSearchPanel;