'use client'

import { Search, Filter, Calendar, DollarSign, X } from 'lucide-react'

import { Button } from '@/components/ui/button'
import { Card } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'

interface SupplierOrdersSearchProps {
  searchQuery: string
  onSearchChange: (value: string) => void
  priceRange: { min: string; max: string }
  onPriceRangeChange: (range: { min: string; max: string }) => void
  dateFilter: string
  onDateFilterChange: (value: string) => void
}

export function SupplierOrdersSearch({
  searchQuery,
  onSearchChange,
  priceRange,
  onPriceRangeChange,
  dateFilter,
  onDateFilterChange,
}: SupplierOrdersSearchProps) {
  const hasActiveFilters = priceRange.min || priceRange.max || dateFilter

  const clearFilters = () => {
    onPriceRangeChange({ min: '', max: '' })
    onDateFilterChange('')
  }

  return (
    <Card className="glass-card border-white/10 p-4">
      <div className="flex flex-col md:flex-row gap-4">
        {/* Поисковая строка */}
        <div className="flex-1 relative">
          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-white/60" />
          <Input
            placeholder="Поиск по номеру заявки, заказчику, товарам, ИНН..."
            value={searchQuery}
            onChange={(e) => onSearchChange(e.target.value)}
            className="glass-input text-white placeholder:text-white/50 pl-10"
          />
        </div>

        {/* Фильтры */}
        <div className="flex items-center space-x-2">
          <Popover>
            <PopoverTrigger asChild>
              <Button
                variant="ghost"
                className={`glass-secondary border-white/20 ${
                  hasActiveFilters ? 'border-blue-400/50 bg-blue-500/10' : ''
                }`}
              >
                <Filter className="h-4 w-4 mr-2" />
                Фильтры
                {hasActiveFilters && (
                  <span className="ml-2 bg-blue-500/20 text-blue-300 px-2 py-1 rounded text-xs">Активны</span>
                )}
              </Button>
            </PopoverTrigger>
            <PopoverContent className="glass-card border-white/20 w-80">
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <h4 className="text-white font-semibold">Фильтры поиска</h4>
                  {hasActiveFilters && (
                    <Button variant="ghost" size="sm" onClick={clearFilters} className="text-white/60 hover:text-white">
                      <X className="h-4 w-4 mr-1" />
                      Очистить
                    </Button>
                  )}
                </div>

                {/* Фильтр по дате */}
                <div className="space-y-2">
                  <Label className="text-white/90 flex items-center">
                    <Calendar className="h-4 w-4 mr-2" />
                    Период создания заявки
                  </Label>
                  <Input
                    type="date"
                    value={dateFilter}
                    onChange={(e) => onDateFilterChange(e.target.value)}
                    className="glass-input text-white"
                  />
                </div>

                {/* Фильтр по стоимости */}
                <div className="space-y-2">
                  <Label className="text-white/90 flex items-center">
                    <DollarSign className="h-4 w-4 mr-2" />
                    Диапазон стоимости (₽)
                  </Label>
                  <div className="flex space-x-2">
                    <Input
                      type="number"
                      placeholder="От"
                      value={priceRange.min}
                      onChange={(e) =>
                        onPriceRangeChange({
                          ...priceRange,
                          min: e.target.value,
                        })
                      }
                      className="glass-input text-white placeholder:text-white/50 w-24"
                    />
                    <span className="text-white/60 self-center">—</span>
                    <Input
                      type="number"
                      placeholder="До"
                      value={priceRange.max}
                      onChange={(e) =>
                        onPriceRangeChange({
                          ...priceRange,
                          max: e.target.value,
                        })
                      }
                      className="glass-input text-white placeholder:text-white/50 w-24"
                    />
                  </div>
                </div>

                {/* Информация о поиске */}
                <div className="pt-2 border-t border-white/10">
                  <p className="text-white/60 text-xs">
                    💡 <strong>Поиск работает по:</strong>
                  </p>
                  <ul className="text-white/60 text-xs mt-1 space-y-1">
                    <li>• Номеру заявки (СФ-2024-XXX)</li>
                    <li>• Названию заказчика</li>
                    <li>• Названию товаров</li>
                    <li>• ИНН заказчика</li>
                  </ul>
                </div>
              </div>
            </PopoverContent>
          </Popover>

          {/* Быстрые фильтры */}
          <div className="hidden lg:flex items-center space-x-2 text-white/60 text-sm">
            <span>Быстро:</span>
            <Button
              variant="ghost"
              size="sm"
              onClick={() => onDateFilterChange(new Date().toISOString().split('T')[0])}
              className="text-xs h-7 px-2"
            >
              Сегодня
            </Button>
            <Button
              variant="ghost"
              size="sm"
              onClick={() => {
                const weekAgo = new Date()
                weekAgo.setDate(weekAgo.getDate() - 7)
                onDateFilterChange(weekAgo.toISOString().split('T')[0])
              }}
              className="text-xs h-7 px-2"
            >
              Неделя
            </Button>
          </div>
        </div>
      </div>

      {/* Активные фильтры */}
      {hasActiveFilters && (
        <div className="mt-3 pt-3 border-t border-white/10">
          <div className="flex items-center space-x-2 text-sm">
            <span className="text-white/60">Активные фильтры:</span>
            {dateFilter && (
              <span className="bg-blue-500/20 text-blue-300 px-2 py-1 rounded border border-blue-400/30">
                📅 {new Date(dateFilter).toLocaleDateString('ru-RU')}
              </span>
            )}
            {(priceRange.min || priceRange.max) && (
              <span className="bg-green-500/20 text-green-300 px-2 py-1 rounded border border-green-400/30">
                💰 {priceRange.min || '0'}₽ — {priceRange.max || '∞'}₽
              </span>
            )}
          </div>
        </div>
      )}
    </Card>
  )
}
