/**
 * БЛОК КОРЗИНЫ И НАСТРОЕК ПОСТАВКИ
 *
 * Выделен из create-suppliers-supply-page.tsx
 * Отображение корзины, настроек доставки и создание поставки
 */

'use client'

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

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

import type { CartBlockProps } from '../types/supply-creation.types'

export function CartBlock({
  selectedGoods,
  selectedSupplier,
  deliveryDate,
  selectedFulfillment,
  selectedLogistics,
  allCounterparties,
  totalAmount,
  isFormValid,
  isCreatingSupply,
  onLogisticsChange,
  onCreateSupply,
  onItemRemove,
}: CartBlockProps) {
  return (
    <div className="w-72 flex-shrink-0">
      <div className="bg-white/10 backdrop-blur border-white/20 p-3 sticky top-0 rounded-2xl">
        <h3 className="text-white font-semibold mb-3 flex items-center text-sm">
          <ShoppingCart className="h-4 w-4 mr-2" />
          Корзина ({selectedGoods.length} шт)
        </h3>

        {selectedGoods.length === 0 ? (
          <div className="text-center py-6">
            <div className="bg-gradient-to-br from-purple-500/20 to-pink-500/20 rounded-full p-4 w-fit mx-auto mb-3">
              <ShoppingCart className="h-8 w-8 text-purple-300" />
            </div>
            <p className="text-white/60 text-sm font-medium mb-2">Корзина пуста</p>
            <p className="text-white/40 text-xs mb-3">Добавьте товары из каталога для создания поставки</p>
          </div>
        ) : (
          <>
            {/* Список товаров в корзине */}
            <div className="space-y-2 mb-4">
              {selectedGoods.map((item) => {
                const priceWithRecipe = item.price // Здесь будет расчет с рецептурой

                return (
                  <div key={item.id} className="flex items-center justify-between bg-white/5 rounded-lg p-2">
                    <div className="flex-1 min-w-0">
                      <h4 className="text-white text-sm font-medium truncate">{item.name}</h4>
                      <p className="text-white/60 text-xs">
                        {priceWithRecipe.toLocaleString('ru-RU')} ₽ × {item.selectedQuantity}
                      </p>
                    </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>
                )
              })}
            </div>

            {/* Настройки поставки */}
            <div className="space-y-3 mb-4">
              <div>
                <p className="text-white/60 text-xs mb-1">Дата поставки:</p>
                <DatePicker
                  selected={deliveryDate ? new Date(deliveryDate) : null}
                  onSelect={(_date) => {
                    // Логика установки даты будет в родительском компоненте
                  }}
                  className="w-full"
                />
              </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>
              )}

              {deliveryDate && (
                <div className="mb-2">
                  <p className="text-white/60 text-xs">Дата поставки:</p>
                  <p className="text-white text-xs font-medium">{new Date(deliveryDate).toLocaleDateString('ru-RU')}</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="flex items-center justify-between mb-3 pt-2 border-t border-white/10">
              <span className="text-white font-semibold text-sm">Итого:</span>
              <span className="text-green-400 font-bold text-lg">{totalAmount.toLocaleString('ru-RU')} ₽</span>
            </div>

            <Button
              onClick={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>
  )
}
