/**
 * БЛОК ПОИСКА ТОВАРОВ
 *
 * Выделен из direct-supply-creation.tsx
 * Компактный поиск с кнопкой и индикатором загрузки
 */

'use client'

import { Search } from 'lucide-react'
import React from 'react'

import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'

import type { ProductSearchBlockProps } from '../types/direct-supply.types'

export const ProductSearchBlock = React.memo(function ProductSearchBlock({
  searchTerm,
  loading,
  onSearchChange,
  onSearch,
}: ProductSearchBlockProps) {
  const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter') {
      onSearch()
    }
  }

  return (
    <div className="bg-gradient-to-br from-white/15 via-white/10 to-white/5 backdrop-blur-xl border border-white/20 rounded-2xl p-4 shadow-2xl">
      {/* Компактный заголовок с поиском */}
      <div className="flex items-center justify-between mb-2">
        <div className="flex items-center space-x-3">
          <div className="w-8 h-8 bg-gradient-to-r from-purple-500 to-blue-500 rounded-lg flex items-center justify-center shadow-lg">
            <Search className="h-4 w-4 text-white" />
          </div>
          <div>
            <h3 className="text-white font-semibold text-base">Каталог товаров</h3>
            <p className="text-white/60 text-xs">Поиск товаров Wildberries</p>
          </div>
        </div>

        {/* Поиск в заголовке */}
        <div className="flex items-center space-x-3 flex-1 max-w-md ml-4">
          <div className="relative flex-1">
            <Input
              placeholder="Поиск товаров..."
              value={searchTerm}
              onChange={(e) => onSearchChange(e.target.value)}
              onKeyPress={handleKeyPress}
              className="pl-3 pr-16 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:bg-white/15 focus:border-white/40 text-sm h-8"
            />
            <Button
              onClick={onSearch}
              disabled={loading}
              className="absolute right-1 top-1 h-6 px-2 bg-gradient-to-r from-purple-500 to-blue-500 hover:from-purple-600 hover:to-blue-600 text-white border-0 rounded text-xs"
            >
              {loading ? (
                <div className="animate-spin rounded-full h-3 w-3 border border-white/30 border-t-white"></div>
              ) : (
                'Найти'
              )}
            </Button>
          </div>
        </div>
      </div>

      {/* Подсказка */}
      <div className="mt-2 p-2 bg-blue-500/10 border border-blue-400/30 rounded-lg">
        <p className="text-blue-300 text-xs">
          💡 <strong>Подсказка:</strong> Введите название товара, артикул или бренд для поиска в каталоге Wildberries
        </p>
      </div>
    </div>
  )
})
