'use client';

import { useState } from 'react';

export default function KnowledgeFilters() {
  const [activeCategory, setActiveCategory] = useState('all');
  const [activeStatus, setActiveStatus] = useState('all');
  const [searchTerm, setSearchTerm] = useState('');
  const [sortBy, setSortBy] = useState('lastUpdated');

  const categories = [
    { key: 'all', label: '全部分类', count: 6 },
    { key: 'general', label: '通用', count: 1 },
    { key: 'tech', label: '技术', count: 1 },
    { key: 'product', label: '产品', count: 1 },
    { key: 'service', label: '客服', count: 1 },
    { key: 'legal', label: '法务', count: 1 },
    { key: 'sales', label: '销售', count: 1 }
  ];

  const statuses = [
    { key: 'all', label: '全部状态' },
    { key: 'active', label: '运行中' },
    { key: 'inactive', label: '已停用' },
    { key: 'updating', label: '更新中' }
  ];

  const sortOptions = [
    { key: 'lastUpdated', label: '最后更新' },
    { key: 'name', label: '名称' },
    { key: 'items', label: '内容数量' },
    { key: 'usage', label: '使用次数' },
    { key: 'size', label: '文件大小' }
  ];

  return (
    <div className="bg-white border border-gray-200 rounded-lg p-6 mb-6">
      <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
        {/* 搜索 */}
        <div className="lg:col-span-1">
          <div className="relative">
            <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <div className="w-4 h-4 flex items-center justify-center">
                <i className="ri-search-line text-gray-400"></i>
              </div>
            </div>
            <input
              type="text"
              placeholder="搜索知识库..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
            />
          </div>
        </div>

        {/* 分类筛选 */}
        <div className="lg:col-span-1">
          <select
            value={activeCategory}
            onChange={(e) => setActiveCategory(e.target.value)}
            className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm bg-white pr-8"
          >
            {categories.map((category) => (
              <option key={category.key} value={category.key}>
                {category.label} ({category.count})
              </option>
            ))}
          </select>
        </div>

        {/* 状态筛选 */}
        <div className="lg:col-span-1">
          <select
            value={activeStatus}
            onChange={(e) => setActiveStatus(e.target.value)}
            className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm bg-white pr-8"
          >
            {statuses.map((status) => (
              <option key={status.key} value={status.key}>
                {status.label}
              </option>
            ))}
          </select>
        </div>

        {/* 排序 */}
        <div className="lg:col-span-1">
          <select
            value={sortBy}
            onChange={(e) => setSortBy(e.target.value)}
            className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm bg-white pr-8"
          >
            {sortOptions.map((option) => (
              <option key={option.key} value={option.key}>
                按{option.label}排序
              </option>
            ))}
          </select>
        </div>
      </div>

      {/* 快速标签 */}
      <div className="mt-4 pt-4 border-t border-gray-200">
        <div className="flex items-center space-x-2">
          <span className="text-sm text-gray-600">快速筛选：</span>
          <div className="flex flex-wrap gap-2">
            {['默认知识库', '高使用率', '最近更新', '大容量', '技术相关'].map((tag) => (
              <button
                key={tag}
                className="px-3 py-1 bg-gray-100 text-gray-700 text-sm rounded-full hover:bg-gray-200 transition-colors cursor-pointer whitespace-nowrap"
              >
                {tag}
              </button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}