// =============================================================================
// 🏪 БЛОК ВЫБОРА ПОСТАВЩИКОВ И ФУЛФИЛМЕНТ-ЦЕНТРОВ ДЛЯ СЕЛЛЕРА
// =============================================================================
// ВНИМАНИЕ: Визуал остается ТОЧНО таким же как в оригинале!
// Отличие только в логике - селлер выбирает и поставщика, и фулфилмент-центр

import { Building2, Search } from 'lucide-react'

import { OrganizationAvatar } from '@/components/market/organization-avatar'
import { Card } from '@/components/ui/card'
import { Input } from '@/components/ui/input'

import type { SellerSuppliersBlockProps } from '../types/seller-types'

export function SellerSuppliersBlock({
  suppliers,
  fulfillmentCenters,
  filteredSuppliers,
  filteredFulfillmentCenters,
  selectedSupplier,
  selectedFulfillment,
  searchQuery,
  loading,
  onSelectSupplier,
  onSelectFulfillment,
  onSearchChange,
}: SellerSuppliersBlockProps) {
  
  return (
    <Card className="bg-white/10 backdrop-blur border-white/20 p-3 flex-shrink-0">
      <h3 className="text-white font-semibold mb-3 flex items-center text-sm">
        <Building2 className="h-4 w-4 mr-2" />
        Партнеры ({suppliers.length + fulfillmentCenters.length})
      </h3>
      
      {/* 🔍 Поиск партнеров */}
      <div className="relative mb-3">
        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/40 h-4 w-4" />
        <Input
          placeholder="Поиск поставщиков и фулфилмент-центров..."
          value={searchQuery}
          onChange={(e) => onSearchChange(e.target.value)}
          className="pl-10 bg-white/10 border-white/20 text-white placeholder-white/40 h-8 text-sm"
        />
      </div>

      {loading ? (
        <div className="flex justify-center py-4">
          <div className="animate-pulse text-white/60 text-sm">Загрузка партнеров...</div>
        </div>
      ) : (
        <div className="space-y-3">
          
          {/* 🏪 СЕКЦИЯ ПОСТАВЩИКОВ */}
          <div>
            <h4 className="text-white/80 font-medium text-xs mb-2 uppercase tracking-wide">
              Поставщики расходников ({filteredSuppliers.length})
            </h4>
            
            <div className="grid gap-2 max-h-48 overflow-y-auto">
              {filteredSuppliers.length === 0 ? (
                <div className="text-center py-4">
                  <Building2 className="h-8 w-8 text-white/20 mx-auto mb-2" />
                  <p className="text-white/40 text-xs">
                    {searchQuery ? 'Поставщики не найдены' : 'Нет поставщиков'}
                  </p>
                </div>
              ) : (
                filteredSuppliers.map((supplier, index) => (
                  <div
                    key={supplier.id}
                    onClick={() => onSelectSupplier(supplier)}
                    className={`
                      p-3 rounded-lg cursor-pointer transition-all duration-200 border
                      ${
                        selectedSupplier?.id === supplier.id
                          ? 'bg-gradient-to-br from-blue-500/30 to-purple-500/30 border-blue-400/50 shadow-lg'
                          : 'bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20'
                      }
                    `}
                    style={{
                      animationDelay: `${index * 50}ms`,
                    }}
                  >
                    <div className="flex items-center space-x-3">
                      <OrganizationAvatar
                        organization={supplier}
                        size="sm"
                        className={
                          selectedSupplier?.id === supplier.id
                            ? 'ring-2 ring-blue-400/50'
                            : ''
                        }
                      />
                      <div className="flex-1 min-w-0">
                        <p className="text-white font-medium text-sm truncate">
                          {supplier.name || supplier.fullName || supplier.inn}
                        </p>
                        <p className="text-white/60 text-xs">ИНН: {supplier.inn}</p>
                        {supplier.address && (
                          <p className="text-white/40 text-xs truncate">{supplier.address}</p>
                        )}
                      </div>
                      {selectedSupplier?.id === supplier.id && (
                        <div className="bg-blue-500/20 rounded-full p-1">
                          <div className="h-2 w-2 bg-blue-400 rounded-full"></div>
                        </div>
                      )}
                    </div>
                  </div>
                ))
              )}
            </div>
          </div>

          {/* 🏢 СЕКЦИЯ ФУЛФИЛМЕНТ-ЦЕНТРОВ */}
          <div>
            <h4 className="text-white/80 font-medium text-xs mb-2 uppercase tracking-wide">
              Фулфилмент-центры ({filteredFulfillmentCenters.length})
            </h4>
            
            <div className="grid gap-2 max-h-48 overflow-y-auto">
              {filteredFulfillmentCenters.length === 0 ? (
                <div className="text-center py-4">
                  <Building2 className="h-8 w-8 text-white/20 mx-auto mb-2" />
                  <p className="text-white/40 text-xs">
                    {searchQuery ? 'Фулфилмент-центры не найдены' : 'Нет фулфилмент-центров'}
                  </p>
                </div>
              ) : (
                filteredFulfillmentCenters.map((fulfillment, index) => (
                  <div
                    key={fulfillment.id}
                    onClick={() => onSelectFulfillment(fulfillment)}
                    className={`
                      p-3 rounded-lg cursor-pointer transition-all duration-200 border
                      ${
                        selectedFulfillment?.id === fulfillment.id
                          ? 'bg-gradient-to-br from-green-500/30 to-emerald-500/30 border-green-400/50 shadow-lg'
                          : 'bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20'
                      }
                    `}
                    style={{
                      animationDelay: `${(index + filteredSuppliers.length) * 50}ms`,
                    }}
                  >
                    <div className="flex items-center space-x-3">
                      <OrganizationAvatar
                        organization={fulfillment}
                        size="sm"
                        className={
                          selectedFulfillment?.id === fulfillment.id
                            ? 'ring-2 ring-green-400/50'
                            : ''
                        }
                      />
                      <div className="flex-1 min-w-0">
                        <p className="text-white font-medium text-sm truncate">
                          {fulfillment.name || fulfillment.fullName || fulfillment.inn}
                        </p>
                        <p className="text-white/60 text-xs">ИНН: {fulfillment.inn}</p>
                        {fulfillment.address && (
                          <p className="text-white/40 text-xs truncate">{fulfillment.address}</p>
                        )}
                      </div>
                      {selectedFulfillment?.id === fulfillment.id && (
                        <div className="bg-green-500/20 rounded-full p-1">
                          <div className="h-2 w-2 bg-green-400 rounded-full"></div>
                        </div>
                      )}
                    </div>
                  </div>
                ))
              )}
            </div>
          </div>
        </div>
      )}
    </Card>
  )
}