/**
 * БЛОК КОРЗИНЫ И НАСТРОЕК ПОСТАВКИ
 *
 * Выделен из create-suppliers-supply-page.tsx в рамках модульной архитектуры
 * 
 * КЛЮЧЕВЫЕ ФУНКЦИИ:
 * 1. Отображение товаров в корзине с детализацией рецептуры
 * 2. Расчет полной стоимости с учетом услуг и расходников ФФ/селлера
 * 3. Настройки поставки (дата, фулфилмент, логистика)
 * 4. Валидация и создание поставки
 *
 * БИЗНЕС-ЛОГИКА РАСЧЕТА ЦЕН:
 * - Базовая цена товара × количество
 * - + Услуги фулфилмента × количество
 * - + Расходники фулфилмента × количество  
 * - + Расходники селлера × количество
 * = Итоговая стоимость за товар
 *
 * АРХИТЕКТУРНЫЕ ОСОБЕННОСТИ:
 * - Получает данные рецептуры из родительского компонента
 * - Использует мемоизацию для оптимизации производительности
 * - Реактивные расчеты на основе изменений рецептуры
 */

'use client'

import { ShoppingCart, X } from 'lucide-react'
import React from 'react'

import { Button } from '@/components/ui/button'
import { DatePicker } from '@/components/ui/date-picker'

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

export const CartBlock = React.memo(function CartBlock({
  selectedGoods,
  selectedSupplier,
  deliveryDate,
  selectedFulfillment,
  selectedLogistics,
  allCounterparties,
  totalAmount,
  isFormValid,
  isCreatingSupply,
  // Новые данные для расчета с рецептурой
  allSelectedProducts,
  productRecipes,
  fulfillmentServices,
  fulfillmentConsumables,
  sellerConsumables,
  onLogisticsChange,
  onCreateSupply,
  onItemRemove,
}: CartBlockProps) {
  return (
    <div className="w-72 flex-shrink-0 h-full">
      {/* Корзина в потоке документа */}
      <div className="bg-white/10 backdrop-blur border-white/20 p-4 rounded-2xl h-full flex flex-col">
        <div className="flex items-center justify-between mb-4">
          <h3 className="text-white font-semibold flex items-center text-sm">
            <ShoppingCart className="h-4 w-4 mr-2" />
            Корзина
          </h3>
          <div className="bg-white/10 px-2 py-1 rounded-full">
            <span className="text-white/80 text-xs font-medium">{selectedGoods.length} шт</span>
          </div>
        </div>

        {selectedGoods.length === 0 ? (
          <div className="text-center py-8 flex-1 flex flex-col justify-center">
            <div className="bg-gradient-to-br from-purple-500/20 to-pink-500/20 rounded-full p-6 w-fit mx-auto mb-4">
              <ShoppingCart className="h-10 w-10 text-purple-300" />
            </div>
            <p className="text-white/60 text-sm font-medium mb-2">Корзина пуста</p>
            <p className="text-white/40 text-xs leading-relaxed">
              Добавьте товары из каталога<br />
              для создания поставки
            </p>
          </div>
        ) : (
          <>
            {/* Список товаров в корзине - компактная область */}
            <div className="mb-4">
              <div className="space-y-2"> {/* Уменьшили отступы между товарами */}
                {selectedGoods.map((item) => {
                  /**
                   * АЛГОРИТМ РАСЧЕТА ПОЛНОЙ СТОИМОСТИ ТОВАРА
                   * 
                   * 1. Базовая стоимость = цена товара × количество
                   * 2. Услуги ФФ = сумма всех выбранных услуг × количество товара
                   * 3. Расходники ФФ = сумма всех выбранных расходников × количество
                   * 4. Расходники селлера = сумма расходников селлера × количество
                   * 5. Итого = базовая + услуги + расходники ФФ + расходники селлера
                   */
                  const recipe = productRecipes[item.id]
                  const baseCost = item.price * item.selectedQuantity
                  
                  // РАСЧЕТ УСЛУГ ФУЛФИЛМЕНТА
                  // Каждая услуга применяется к каждой единице товара
                  const servicesCost = (recipe?.selectedServices || []).reduce((sum, serviceId) => {
                    const service = fulfillmentServices.find(s => s.id === serviceId)
                    return sum + (service ? service.price * item.selectedQuantity : 0)
                  }, 0)
                  
                  // РАСЧЕТ РАСХОДНИКОВ ФУЛФИЛМЕНТА  
                  // Расходники ФФ тоже масштабируются по количеству товара
                  const ffConsumablesCost = (recipe?.selectedFFConsumables || []).reduce((sum, consumableId) => {
                    const consumable = fulfillmentConsumables.find(c => c.id === consumableId)
                    return sum + (consumable ? consumable.price * item.selectedQuantity : 0)
                  }, 0)
                  
                  // РАСЧЕТ РАСХОДНИКОВ СЕЛЛЕРА
                  // Используется pricePerUnit как цена за единицу расходника
                  const sellerConsumablesCost = (recipe?.selectedSellerConsumables || []).reduce((sum, consumableId) => {
                    const consumable = sellerConsumables.find(c => c.id === consumableId)
                    return sum + (consumable ? (consumable.pricePerUnit || 0) * item.selectedQuantity : 0)
                  }, 0)
                  
                  const totalItemCost = baseCost + servicesCost + ffConsumablesCost + sellerConsumablesCost
                  const hasRecipe = servicesCost > 0 || ffConsumablesCost > 0 || sellerConsumablesCost > 0

                  return (
                    <div key={item.id} className="bg-white/5 rounded-lg p-3 space-y-2">
                      {/* Основная информация о товаре */}
                      <div className="flex items-center justify-between">
                        <div className="flex-1 min-w-0">
                          <h4 className="text-white text-sm font-medium truncate">{item.name}</h4>
                          <div className="flex items-center gap-2 text-xs text-white/60">
                            <span>{item.price.toLocaleString('ru-RU')} ₽</span>
                            <span>×</span>
                            <span>{item.selectedQuantity}</span>
                            <span>=</span>
                            <span className="text-white/80">{baseCost.toLocaleString('ru-RU')} ₽</span>
                          </div>
                        </div>
                        <button
                          onClick={() => onItemRemove(item.id)}
                          className="text-white/40 hover:text-red-400 ml-2 transition-colors"
                        >
                          <X className="h-3 w-3" />
                        </button>
                      </div>
                      
                      {/* Детализация рецептуры */}
                      {hasRecipe && (
                        <div className="space-y-1 text-xs">
                          {servicesCost > 0 && (
                            <div className="flex justify-between text-purple-300">
                              <span>+ Услуги ФФ:</span>
                              <span>{servicesCost.toLocaleString('ru-RU')} ₽</span>
                            </div>
                          )}
                          {ffConsumablesCost > 0 && (
                            <div className="flex justify-between text-orange-300">
                              <span>+ Расходники ФФ:</span>
                              <span>{ffConsumablesCost.toLocaleString('ru-RU')} ₽</span>
                            </div>
                          )}
                          {sellerConsumablesCost > 0 && (
                            <div className="flex justify-between text-blue-300">
                              <span>+ Расходники сел.:</span>
                              <span>{sellerConsumablesCost.toLocaleString('ru-RU')} ₽</span>
                            </div>
                          )}
                          <div className="border-t border-white/10 pt-1 mt-1">
                            <div className="flex justify-between font-medium text-green-400">
                              <span>Итого за товар:</span>
                              <span>{totalItemCost.toLocaleString('ru-RU')} ₽</span>
                            </div>
                          </div>
                        </div>
                      )}
                    </div>
                  )
                })}
              </div>
            </div>

            {/* Настройки поставки - фиксированная область */}
            <div className="bg-white/5 rounded-xl p-3 space-y-3 mb-4 border border-white/10">
              <div>
                <p className="text-white/60 text-xs">Дата поставки:</p>
                <p className="text-white text-sm font-medium">
                  {deliveryDate && deliveryDate.trim() ? new Date(deliveryDate).toLocaleDateString('ru-RU') : 'Не выбрана'}
                </p>
              </div>

              {selectedSupplier && (
                <div className="mb-2">
                  <p className="text-white/60 text-xs">Поставщик:</p>
                  <p className="text-white text-xs font-medium">{selectedSupplier.name || selectedSupplier.fullName}</p>
                </div>
              )}

              {selectedFulfillment && (
                <div className="mb-2">
                  <p className="text-white/60 text-xs">Фулфилмент-центр:</p>
                  <p className="text-white text-xs font-medium">
                    {allCounterparties?.find((c) => c.id === selectedFulfillment)?.name ||
                      allCounterparties?.find((c) => c.id === selectedFulfillment)?.fullName ||
                      'Выбранный центр'}
                  </p>
                </div>
              )}

              {/* Выбор логистической компании */}
              <div className="mb-3">
                <p className="text-white/60 text-xs mb-1">Логистическая компания:</p>
                <select
                  value={selectedLogistics}
                  onChange={(e) => onLogisticsChange(e.target.value)}
                  className="w-full bg-white/5 border-white/10 text-white h-7 text-xs rounded hover:border-white/30 focus:border-purple-400/50 transition-all duration-200"
                >
                  <option value="auto" className="bg-gray-800 text-white">
                    Выбрать автоматически
                  </option>
                  {allCounterparties
                    ?.filter((partner) => partner.type === 'LOGIST')
                    .map((logisticsPartner) => (
                      <option key={logisticsPartner.id} value={logisticsPartner.id} className="bg-gray-800 text-white">
                        {logisticsPartner.name || logisticsPartner.fullName}
                      </option>
                    ))}
                </select>
              </div>
            </div>

            {/* Итоговая сумма и кнопка создания */}
            <div className="pt-3 border-t border-white/10 mb-3">
              {/* Детализация общей суммы */}
              <div className="space-y-1 text-xs mb-2">
                {(() => {
                  /**
                   * АЛГОРИТМ РАСЧЕТА ОБЩЕЙ СУММЫ КОРЗИНЫ
                   * 
                   * Агрегируем стоимости всех товаров в корзине по категориям:
                   * 1. Базовая стоимость всех товаров
                   * 2. Общая стоимость всех услуг ФФ
                   * 3. Общая стоимость всех расходников ФФ
                   * 4. Общая стоимость всех расходников селлера
                   * 
                   * Этот расчет дублирует логику выше для консистентности
                   * и позволяет показать пользователю детализацию итоговой суммы
                   */
                  const totals = selectedGoods.reduce((acc, item) => {
                    const recipe = productRecipes[item.id]
                    const baseCost = item.price * item.selectedQuantity
                    
                    // Те же формулы расчета, что и выше
                    const servicesCost = (recipe?.selectedServices || []).reduce((sum, serviceId) => {
                      const service = fulfillmentServices.find(s => s.id === serviceId)
                      return sum + (service ? service.price * item.selectedQuantity : 0)
                    }, 0)
                    
                    const ffConsumablesCost = (recipe?.selectedFFConsumables || []).reduce((sum, consumableId) => {
                      const consumable = fulfillmentConsumables.find(c => c.id === consumableId)
                      return sum + (consumable ? consumable.price * item.selectedQuantity : 0)
                    }, 0)
                    
                    const sellerConsumablesCost = (recipe?.selectedSellerConsumables || []).reduce((sum, consumableId) => {
                      const consumable = sellerConsumables.find(c => c.id === consumableId)
                      return sum + (consumable ? (consumable.pricePerUnit || 0) * item.selectedQuantity : 0)
                    }, 0)
                    
                    // Аккумулируем суммы по категориям
                    return {
                      base: acc.base + baseCost,
                      services: acc.services + servicesCost,
                      ffConsumables: acc.ffConsumables + ffConsumablesCost,
                      sellerConsumables: acc.sellerConsumables + sellerConsumablesCost,
                    }
                  }, { base: 0, services: 0, ffConsumables: 0, sellerConsumables: 0 })
                  
                  const grandTotal = totals.base + totals.services + totals.ffConsumables + totals.sellerConsumables
                  
                  return (
                    <>
                      <div className="flex justify-between text-white/80">
                        <span>Товары:</span>
                        <span>{totals.base.toLocaleString('ru-RU')} ₽</span>
                      </div>
                      {totals.services > 0 && (
                        <div className="flex justify-between text-purple-300">
                          <span>Услуги ФФ:</span>
                          <span>{totals.services.toLocaleString('ru-RU')} ₽</span>
                        </div>
                      )}
                      {totals.ffConsumables > 0 && (
                        <div className="flex justify-between text-orange-300">
                          <span>Расходники ФФ:</span>
                          <span>{totals.ffConsumables.toLocaleString('ru-RU')} ₽</span>
                        </div>
                      )}
                      {totals.sellerConsumables > 0 && (
                        <div className="flex justify-between text-blue-300">
                          <span>Расходники сел.:</span>
                          <span>{totals.sellerConsumables.toLocaleString('ru-RU')} ₽</span>
                        </div>
                      )}
                      <div className="border-t border-white/10 pt-2 mt-2">
                        <div className="flex justify-between font-semibold text-green-400 text-base">
                          <span>Итого:</span>
                          <span>{grandTotal.toLocaleString('ru-RU')} ₽</span>
                        </div>
                      </div>
                    </>
                  )
                })()} 
              </div>
            </div>

            <Button
              onClick={() => {
                console.warn('🔘 НАЖАТА КНОПКА "Создать поставку"')
                console.warn('🔍 Состояние кнопки:', { isFormValid, isCreatingSupply, onCreateSupply: typeof onCreateSupply })
                onCreateSupply()
              }}
              disabled={!isFormValid || isCreatingSupply}
              className="w-full bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white disabled:opacity-50 h-8 text-sm"
            >
              {isCreatingSupply ? 'Создание...' : 'Создать поставку'}
            </Button>

            {/* Подсказка о валидации */}
            {!isFormValid && selectedGoods.length > 0 && (
              <div className="mt-2 text-xs text-yellow-400/80 text-center">
                Заполните все поля и добавьте услуги к товарам
              </div>
            )}
          </>
        )}
      </div>
    </div>
  )
})
