/**
 * 产品选择器组件
 * 作者: 阿瑞
 * 功能: 提供产品搜索和选择功能
 * 版本: 1.0.0
 */

'use client';

import React, { useState } from 'react';
import { MdSearch } from 'react-icons/md';
import { useTheme } from '@/hooks';

// 产品接口类型
export interface Product {
  id: number;
  name: string;
  price: number;
  image?: string;
  description?: string;
}

interface ProductSelectorProps {
  selectedProduct: Product | null;
  onSelectProduct: (product: Product) => void;
  productPrice: number;
  onPriceChange: (price: number) => void;
  productQuantity: number;
  onQuantityChange: (quantity: number) => void;
}

/**
 * 产品选择器组件
 * 用于搜索和选择产品
 */
const ProductSelector: React.FC<ProductSelectorProps> = ({
  selectedProduct,
  onSelectProduct,
  productPrice,
  onPriceChange,
  productQuantity,
  onQuantityChange
}) => {
  const { isDarkMode } = useTheme();
  const [searchQuery, setSearchQuery] = useState('');
  
  // 模拟一些产品数据
  const [products] = useState<Product[]>([
    { id: 1, name: "产品A", price: 199.99, description: "这是产品A的描述" },
    { id: 2, name: "产品B", price: 299.99, description: "这是产品B的描述" },
    { id: 3, name: "产品C", price: 99.99, description: "这是产品C的描述" }
  ]);
  
  // 过滤后的产品列表
  const filteredProducts = searchQuery.trim() === '' 
    ? products 
    : products.filter(product => 
        product.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
        product.description?.toLowerCase().includes(searchQuery.toLowerCase())
      );
  
  // 处理搜索输入变化
  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearchQuery(e.target.value);
  };
  
  return (
    <div className="grid grid-cols-1 gap-3">
      <div className="relative">
        <input
          type="text"
          placeholder="搜索产品..."
          value={searchQuery}
          onChange={handleSearchChange}
          className={`
            w-full px-3 py-2 pl-10 rounded-lg
            ${isDarkMode ? 'bg-slate-800/50' : 'bg-white/50'}
            backdrop-blur-sm border border-white/20 dark:border-white/10
            focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
            text-gray-800 dark:text-white
          `}
        />
        <MdSearch className="absolute left-3 top-2.5 text-gray-500 dark:text-gray-400" size={20} />
      </div>

      <div className="max-h-60 overflow-y-auto">
        {filteredProducts.length > 0 ? (
          filteredProducts.map(product => (
            <div 
              key={product.id}
              onClick={() => onSelectProduct(product)}
              className={`
                p-2 mb-2 rounded-lg cursor-pointer
                ${selectedProduct?.id === product.id 
                  ? (isDarkMode ? 'bg-blue-900/30 border-blue-500' : 'bg-blue-50 border-blue-200')
                  : (isDarkMode ? 'bg-slate-800/30 hover:bg-slate-700/30' : 'bg-white hover:bg-gray-50')}
                border border-transparent
                ${selectedProduct?.id === product.id ? 'border-opacity-100' : 'hover:border-gray-200 dark:hover:border-gray-700'}
                transition-colors duration-150
              `}
            >
              <div className="font-medium">{product.name}</div>
              <div className="text-sm text-gray-500 dark:text-gray-400">¥{product.price.toFixed(2)}</div>
              {product.description && (
                <div className="text-xs text-gray-500 dark:text-gray-500 mt-1 truncate">{product.description}</div>
              )}
            </div>
          ))
        ) : (
          <div className={`p-3 text-center ${isDarkMode ? 'text-gray-400' : 'text-gray-500'}`}>
            没有找到匹配的产品
          </div>
        )}
      </div>

      <div className="grid grid-cols-2 gap-3 mt-2">
        <div>
          <input
            type="number"
            placeholder="数量"
            value={productQuantity}
            onChange={(e) => onQuantityChange(parseInt(e.target.value) || 1)}
            min="1"
            className={`
              w-full px-3 py-2 rounded-lg
              ${isDarkMode ? 'bg-slate-800/50' : 'bg-white/50'}
              backdrop-blur-sm border border-white/20 dark:border-white/10
              focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
              text-gray-800 dark:text-white
              transition-all duration-200
            `}
          />
        </div>
        <div>
          <input
            type="number"
            placeholder="单价"
            value={productPrice}
            onChange={(e) => onPriceChange(parseFloat(e.target.value) || 0)}
            step="0.01"
            min="0"
            className={`
              w-full px-3 py-2 rounded-lg
              ${isDarkMode ? 'bg-slate-800/50' : 'bg-white/50'}
              backdrop-blur-sm border border-white/20 dark:border-white/10
              focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
              text-gray-800 dark:text-white
              transition-all duration-200
            `}
          />
        </div>
      </div>
    </div>
  );
};

export default ProductSelector; 