/**
 * БЛОК ДЕТАЛЬНОГО КАТАЛОГА С РЕЦЕПТУРОЙ
 *
 * Выделен из create-suppliers-supply-page.tsx
 * Детальный просмотр товаров с настройкой рецептуры и панелью управления
 */

'use client'

import { Package, Settings, Building2 } from 'lucide-react'
import Image from 'next/image'

import { Badge } from '@/components/ui/badge'
import { DatePicker } from '@/components/ui/date-picker'
import { Input } from '@/components/ui/input'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'

import type {
  DetailedCatalogBlockProps,
  GoodsProduct,
  ProductRecipe,
  FulfillmentService,
  FulfillmentConsumable,
  SellerConsumable,
} from '../types/supply-creation.types'

export function DetailedCatalogBlock({
  allSelectedProducts,
  productRecipes,
  fulfillmentServices,
  fulfillmentConsumables,
  sellerConsumables,
  deliveryDate,
  selectedFulfillment,
  allCounterparties,
  onQuantityChange,
  onRecipeChange,
  onDeliveryDateChange,
  onFulfillmentChange,
  onProductRemove,
}: DetailedCatalogBlockProps) {
  const fulfillmentCenters = allCounterparties?.filter((partner) => partner.type === 'FULFILLMENT') || []

  return (
    <div className="bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl">
      {/* Панель управления */}
      <div className="p-6 border-b border-white/10">
        <h3 className="text-white font-semibold text-lg mb-4 flex items-center">
          <Settings className="h-5 w-5 mr-2" />
          3. Настройки поставки
        </h3>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {/* Дата поставки */}
          <div>
            <label className="text-white/90 text-sm font-medium mb-2 block">Дата поставки*</label>
            <DatePicker
              selected={deliveryDate ? new Date(deliveryDate) : null}
              onSelect={(date) => {
                if (date) {
                  onDeliveryDateChange(date.toISOString().split('T')[0])
                }
              }}
              className="w-full"
            />
          </div>

          {/* Фулфилмент-центр */}
          <div>
            <label className="text-white/90 text-sm font-medium mb-2 block">Фулфилмент-центр*</label>
            <Select value={selectedFulfillment} onValueChange={onFulfillmentChange}>
              <SelectTrigger className="glass-input text-white">
                <SelectValue placeholder="Выберите фулфилмент-центр" />
              </SelectTrigger>
              <SelectContent>
                {fulfillmentCenters.map((center) => (
                  <SelectItem key={center.id} value={center.id}>
                    <div className="flex items-center gap-2">
                      <Building2 className="h-4 w-4" />
                      {center.name || center.fullName}
                    </div>
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
        </div>
      </div>

      {/* Каталог товаров с рецептурой */}
      <div className="p-6">
        <h4 className="text-white font-semibold text-md mb-4">Товары в поставке ({allSelectedProducts.length})</h4>

        {allSelectedProducts.length === 0 ? (
          <div className="text-center py-12">
            <div className="bg-gradient-to-br from-gray-500/20 to-gray-600/20 rounded-full p-6 w-fit mx-auto mb-4">
              <Package className="h-10 w-10 text-gray-300" />
            </div>
            <p className="text-white/60 text-sm font-medium mb-2">Товары не добавлены</p>
            <p className="text-white/40 text-xs">Выберите товары из каталога выше для настройки рецептуры</p>
          </div>
        ) : (
          <div className="space-y-6">
            {allSelectedProducts.map((product) => {
              const recipe = productRecipes[product.id]
              const selectedServicesIds = recipe?.selectedServices || []
              const selectedFFConsumablesIds = recipe?.selectedFFConsumables || []
              const selectedSellerConsumablesIds = recipe?.selectedSellerConsumables || []

              return (
                <ProductDetailCard
                  key={product.id}
                  product={product}
                  recipe={recipe}
                  fulfillmentServices={fulfillmentServices}
                  fulfillmentConsumables={fulfillmentConsumables}
                  sellerConsumables={sellerConsumables}
                  selectedServicesIds={selectedServicesIds}
                  selectedFFConsumablesIds={selectedFFConsumablesIds}
                  selectedSellerConsumablesIds={selectedSellerConsumablesIds}
                  onQuantityChange={onQuantityChange}
                  onRecipeChange={onRecipeChange}
                  onRemove={onProductRemove}
                />
              )
            })}
          </div>
        )}
      </div>
    </div>
  )
}

// Компонент детальной карточки товара с рецептурой
interface ProductDetailCardProps {
  product: GoodsProduct & { selectedQuantity: number }
  recipe?: ProductRecipe
  fulfillmentServices: FulfillmentService[]
  fulfillmentConsumables: FulfillmentConsumable[]
  sellerConsumables: SellerConsumable[]
  selectedServicesIds: string[]
  selectedFFConsumablesIds: string[]
  selectedSellerConsumablesIds: string[]
  onQuantityChange: (productId: string, quantity: number) => void
  onRecipeChange: (productId: string, recipe: ProductRecipe) => void
  onRemove: (productId: string) => void
}

function ProductDetailCard({
  product,
  selectedServicesIds,
  selectedFFConsumablesIds,
  selectedSellerConsumablesIds,
  fulfillmentServices,
  fulfillmentConsumables,
  sellerConsumables,
  onQuantityChange,
  onRemove,
}: ProductDetailCardProps) {
  return (
    <div className="glass-card border-white/10 hover:border-white/20 transition-all duration-300 group relative">
      <div className="flex gap-4">
        {/* 1. ИЗОБРАЖЕНИЕ ТОВАРА (фиксированная ширина) */}
        <div className="w-24 flex-shrink-0">
          <div className="relative w-24 h-24 rounded-lg overflow-hidden bg-white/5">
            {product.mainImage || (product.images && product.images[0]) ? (
              <Image src={product.mainImage || product.images[0]} alt={product.name} fill className="object-cover" />
            ) : (
              <div className="flex items-center justify-center h-full">
                <Package className="h-8 w-8 text-white/30" />
              </div>
            )}
          </div>
        </div>

        {/* 2. ОСНОВНАЯ ИНФОРМАЦИЯ (flex-1) */}
        <div className="flex-1 p-3 min-w-0">
          <div className="flex items-start justify-between mb-2">
            <div className="flex-1 min-w-0 mr-3">
              <h5 className="text-white font-medium text-sm leading-tight line-clamp-2">{product.name}</h5>
              {product.article && <p className="text-white/50 text-xs mt-1">Арт: {product.article}</p>}
            </div>
            <button
              onClick={() => onRemove(product.id)}
              className="text-white/40 hover:text-red-400 transition-colors opacity-0 group-hover:opacity-100"
            >
              ✕
            </button>
          </div>

          {product.category?.name && (
            <Badge variant="secondary" className="text-xs mb-2 bg-white/10 text-white/70">
              {product.category.name}
            </Badge>
          )}

          <div className="text-white/80 font-semibold text-sm">
            {product.price.toLocaleString('ru-RU')} ₽/{product.unit || 'шт'}
          </div>
        </div>

        {/* 3. КОЛИЧЕСТВО/СУММА/ОСТАТОК (flex-1) */}
        <div className="flex-1 p-3 flex flex-col justify-center">
          <div className="space-y-3">
            {product.quantity !== undefined && (
              <div className="flex items-center gap-2">
                <div className={`w-2 h-2 rounded-full ${product.quantity > 0 ? 'bg-green-400' : 'bg-red-400'}`} />
                <span className={`text-xs ${product.quantity > 0 ? 'text-green-400' : 'text-red-400'}`}>
                  {product.quantity > 0 ? `${product.quantity} шт` : 'Нет в наличии'}
                </span>
              </div>
            )}

            <div className="flex items-center gap-2">
              <Input
                type="number"
                min="0"
                max={product.quantity}
                value={product.selectedQuantity || ''}
                onChange={(e) => {
                  const inputValue = e.target.value
                  const newQuantity = inputValue === '' ? 0 : Math.max(0, parseInt(inputValue) || 0)
                  onQuantityChange(product.id, newQuantity)
                }}
                className="glass-input w-16 h-8 text-sm text-center text-white placeholder:text-white/50"
                placeholder="0"
              />
              <span className="text-white/60 text-sm">шт</span>
            </div>

            <div className="text-green-400 font-semibold text-sm">
              {(product.price * product.selectedQuantity).toLocaleString('ru-RU')} ₽
            </div>
          </div>
        </div>

        {/* 4-7. КОМПОНЕНТЫ РЕЦЕПТУРЫ */}
        <RecipeComponents
          productId={product.id}
          selectedQuantity={product.selectedQuantity}
          selectedServicesIds={selectedServicesIds}
          selectedFFConsumablesIds={selectedFFConsumablesIds}
          selectedSellerConsumablesIds={selectedSellerConsumablesIds}
          fulfillmentServices={fulfillmentServices}
          fulfillmentConsumables={fulfillmentConsumables}
          sellerConsumables={sellerConsumables}
        />
      </div>
    </div>
  )
}

// Компонент компонентов рецептуры (услуги + расходники + WB карточка)
interface RecipeComponentsProps {
  productId: string
  selectedQuantity: number
  selectedServicesIds: string[]
  selectedFFConsumablesIds: string[]
  selectedSellerConsumablesIds: string[]
  fulfillmentServices: FulfillmentService[]
  fulfillmentConsumables: FulfillmentConsumable[]
  sellerConsumables: SellerConsumable[]
}

function RecipeComponents({
  selectedServicesIds,
  selectedFFConsumablesIds,
  selectedSellerConsumablesIds,
  fulfillmentServices,
  fulfillmentConsumables,
  sellerConsumables,
}: RecipeComponentsProps) {
  return (
    <>
      {/* 4. УСЛУГИ ФФ (flex-1) */}
      <div className="flex-1 p-3 flex flex-col">
        <div className="text-center mb-2">
          <h6 className="text-purple-400 text-xs font-medium uppercase tracking-wider">🛠️ Услуги ФФ</h6>
        </div>
        <div className="flex-1 overflow-y-auto space-y-1" style={{ maxHeight: '75px' }}>
          {fulfillmentServices.length > 0 ? (
            fulfillmentServices.map((service) => {
              const isSelected = selectedServicesIds.includes(service.id)
              return (
                <label key={service.id} className="flex items-center text-xs cursor-pointer group">
                  <input
                    type="checkbox"
                    checked={isSelected}
                    className="w-3 h-3 rounded border-white/20 bg-white/10 text-purple-500 focus:ring-purple-500/50 mr-2"
                    readOnly // Пока только для отображения
                  />
                  <div className="flex-1">
                    <div className="text-white/80 group-hover:text-white transition-colors">{service.name}</div>
                    <div className="text-xs opacity-80 text-purple-300">
                      {service.price} ₽/{service.unit || 'шт'}
                    </div>
                  </div>
                </label>
              )
            })
          ) : (
            <div className="text-white/60 text-xs p-2 text-center bg-white/5 rounded-md">Нет услуг</div>
          )}
        </div>
      </div>

      {/* 5. РАСХОДНИКИ ФФ (flex-1) */}
      <div className="flex-1 p-3 flex flex-col">
        <div className="text-center mb-2">
          <h6 className="text-orange-400 text-xs font-medium uppercase tracking-wider">📦 Расходники ФФ</h6>
        </div>
        <div className="flex-1 overflow-y-auto space-y-1" style={{ maxHeight: '75px' }}>
          {fulfillmentConsumables.length > 0 ? (
            fulfillmentConsumables.map((consumable) => {
              const isSelected = selectedFFConsumablesIds.includes(consumable.id)
              return (
                <label key={consumable.id} className="flex items-center text-xs cursor-pointer group">
                  <input
                    type="checkbox"
                    checked={isSelected}
                    className="w-3 h-3 rounded border-white/20 bg-white/10 text-orange-500 focus:ring-orange-500/50 mr-2"
                    readOnly // Пока только для отображения
                  />
                  <div className="flex-1">
                    <div className="text-white/80 group-hover:text-white transition-colors">{consumable.name}</div>
                    <div className="text-xs opacity-80 text-orange-300">
                      {consumable.price} ₽/{consumable.unit || 'шт'}
                    </div>
                  </div>
                </label>
              )
            })
          ) : (
            <div className="text-white/60 text-xs p-2 text-center bg-white/5 rounded-md">Загрузка...</div>
          )}
        </div>
      </div>

      {/* 6. РАСХОДНИКИ СЕЛЛЕРА (flex-1) */}
      <div className="flex-1 p-3 flex flex-col">
        <div className="text-center mb-2">
          <h6 className="text-blue-400 text-xs font-medium uppercase tracking-wider">🏪 Расходники сел.</h6>
        </div>
        <div className="flex-1 overflow-y-auto space-y-1" style={{ maxHeight: '75px' }}>
          {sellerConsumables.length > 0 ? (
            sellerConsumables.map((consumable) => {
              const isSelected = selectedSellerConsumablesIds.includes(consumable.id)
              return (
                <label key={consumable.id} className="flex items-center text-xs cursor-pointer group">
                  <input
                    type="checkbox"
                    checked={isSelected}
                    className="w-3 h-3 rounded border-white/20 bg-white/10 text-blue-500 focus:ring-blue-500/50 mr-2"
                    readOnly // Пока только для отображения
                  />
                  <div className="flex-1">
                    <div className="text-white/80 group-hover:text-white transition-colors">{consumable.name}</div>
                    <div className="text-xs opacity-80 mt-1">
                      {consumable.pricePerUnit} ₽/{consumable.unit || 'шт'}
                    </div>
                  </div>
                </label>
              )
            })
          ) : (
            <div className="text-white/60 text-xs p-2 text-center bg-white/5 rounded-md">Загрузка...</div>
          )}
        </div>
      </div>

      {/* 7. МП + ИТОГО (flex-1) */}
      <div className="flex-1 p-3 flex flex-col justify-between">
        <div className="text-center">
          <div className="text-green-400 font-bold text-lg mb-3">{/* Здесь будет общая стоимость с рецептурой */}</div>
          <Select defaultValue="none">
            <SelectTrigger className="glass-input h-9 text-sm text-white">
              <SelectValue placeholder="Не выбрано" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="none">Не выбрано</SelectItem>
              <SelectItem value="card1">Карточка 1</SelectItem>
              <SelectItem value="card2">Карточка 2</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </div>
    </>
  )
}