// =============================================================================
// 🏢 БЛОК ПОСТАВЩИКОВ
// =============================================================================
// ВНИМАНИЕ: Визуал остается ТОЧНО таким же как в монолитной версии!
// Все gradients, glassmorphism, анимации сохранены

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

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

import type { FulfillmentConsumableSupplier } from '../types'

import type { SuppliersBlockProps } from './types'

export function SuppliersBlock({
  suppliers,
  filteredSuppliers,
  selectedSupplier,
  searchQuery,
  loading,
  onSelectSupplier,
  onSearchChange,
}: SuppliersBlockProps) {
  return (
    <Card className="bg-gradient-to-r from-white/15 via-white/10 to-white/15 backdrop-blur-xl border border-white/30 shadow-2xl flex-shrink-0 sticky top-0 z-10 rounded-xl overflow-hidden">
      <div className="p-3 bg-gradient-to-r from-purple-500/10 to-pink-500/10">
        <div className="flex items-center justify-between gap-4">
          <h2 className="text-lg font-bold flex items-center flex-shrink-0 bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
            <Building2 className="h-5 w-5 mr-3 text-purple-400" />
            Поставщики расходников
          </h2>
          <div className="relative flex-1 max-w-sm">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-purple-300 h-4 w-4 z-10" />
            <Input
              placeholder="Найти поставщика..."
              value={searchQuery}
              onChange={(e) => onSearchChange(e.target.value)}
              className="bg-white/20 backdrop-blur border-white/30 text-white placeholder-white/50 pl-10 h-8 text-sm rounded-full shadow-inner focus:ring-2 focus:ring-purple-400/50 focus:border-purple-400/50 transition-all duration-300"
            />
          </div>
          {selectedSupplier && (
            <Button
              variant="ghost"
              size="sm"
              onClick={() => onSelectSupplier(null)}
              className="text-white/70 hover:text-white hover:bg-white/20 text-sm h-8 px-3 flex-shrink-0 rounded-full transition-all duration-300 hover:scale-105"
            >
              ✕ Сбросить
            </Button>
          )}
        </div>
      </div>

      <div className="px-3 pb-3 h-24 overflow-hidden">
        {loading ? (
          <div className="text-center py-4">
            <div className="animate-spin rounded-full h-6 w-6 border-2 border-purple-400 border-t-transparent mx-auto mb-2"></div>
            <p className="text-white/70 text-sm font-medium">Загружаем поставщиков...</p>
          </div>
        ) : filteredSuppliers.length === 0 ? (
          <div className="text-center py-4">
            <div className="bg-gradient-to-br from-purple-500/20 to-pink-500/20 rounded-full p-3 w-fit mx-auto mb-2">
              <Building2 className="h-6 w-6 text-purple-300" />
            </div>
            <p className="text-white/70 text-sm font-medium">
              {searchQuery ? 'Поставщики не найдены' : 'Добавьте поставщиков'}
            </p>
          </div>
        ) : (
          <div className="flex gap-2 h-full pt-1">
            {filteredSuppliers.slice(0, 7).map((supplier: FulfillmentConsumableSupplier, index: number) => (
              <Card
                key={supplier.id}
                className={`relative cursor-pointer transition-all duration-300 border flex-shrink-0 rounded-xl overflow-hidden group hover:scale-105 hover:shadow-xl ${
                  selectedSupplier?.id === supplier.id
                    ? 'bg-gradient-to-br from-orange-500/30 via-orange-400/20 to-orange-500/30 border-orange-400/60 shadow-lg shadow-orange-500/25'
                    : 'bg-gradient-to-br from-white/10 via-white/5 to-white/10 border-white/20 hover:from-white/20 hover:via-white/10 hover:to-white/20 hover:border-white/40'
                }`}
                style={{
                  width: 'calc((100% - 48px) / 7)', // 48px = 6 gaps * 8px each
                  animationDelay: `${index * 100}ms`,
                }}
                onClick={() => onSelectSupplier(supplier)}
              >
                <div className="flex flex-col items-center justify-center h-full p-2 space-y-1">
                  <div className="relative">
                    <OrganizationAvatar
                      organization={{
                        id: supplier.id,
                        name: supplier.name || supplier.fullName || 'Поставщик',
                        fullName: supplier.fullName,
                        users: (supplier.users || []).map((user) => ({
                          id: user.id,
                          avatar: user.avatar,
                        })),
                      }}
                      size="sm"
                    />
                    {selectedSupplier?.id === supplier.id && (
                      <div className="absolute -top-1 -right-1 bg-gradient-to-r from-orange-400 to-orange-500 rounded-full w-4 h-4 flex items-center justify-center shadow-lg animate-pulse">
                        <span className="text-white text-xs font-bold">✓</span>
                      </div>
                    )}
                  </div>
                  <div className="text-center w-full space-y-0.5">
                    <h3 className="text-white font-semibold text-xs truncate leading-tight group-hover:text-purple-200 transition-colors duration-300">
                      {(supplier.name || supplier.fullName || 'Поставщик').slice(0, 10)}
                    </h3>
                    <div className="flex items-center justify-center space-x-1">
                      <span className="text-yellow-400 text-sm animate-pulse">★</span>
                      <span className="text-white/80 text-xs font-medium">4.5</span>
                    </div>
                    <div className="w-full bg-white/10 rounded-full h-1 overflow-hidden">
                      <div
                        className="bg-gradient-to-r from-purple-400 to-pink-400 h-full rounded-full animate-pulse"
                        style={{ width: '90%' }}
                      ></div>
                    </div>
                  </div>
                </div>

                {/* Hover эффект */}
                <div className="absolute inset-0 bg-gradient-to-br from-purple-500/0 to-pink-500/0 group-hover:from-purple-500/10 group-hover:to-pink-500/10 transition-all duration-300 pointer-events-none"></div>
              </Card>
            ))}
            {filteredSuppliers.length > 7 && (
              <div
                className="flex-shrink-0 flex flex-col items-center justify-center bg-gradient-to-br from-white/10 to-white/5 rounded-xl border border-white/20 text-white/70 hover:text-white transition-all duration-300 hover:scale-105"
                style={{ width: 'calc((100% - 48px) / 7)' }}
              >
                <div className="text-lg font-bold text-purple-300">+{filteredSuppliers.length - 7}</div>
                <div className="text-xs">ещё</div>
              </div>
            )}
          </div>
        )}
      </div>
    </Card>
  )
}