import React from 'react'

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

/**
 * Блок строки итогов дашборда склада
 * 
 * Отображает сводные суммы по всем магазинам:
 * - Общее количество товаров, готовых товаров, брака и т.д.
 * - Изменения за 24 часа (если включены)
 * - Выделенный стиль для визуального выделения итогов
 */
export const SummaryRowBlock = React.memo<SummaryRowBlockProps>(({
  totals,
  showAdditionalValues,
}) => {
  const formatNumber = (num: number): string => {
    return new Intl.NumberFormat('ru-RU').format(num)
  }

  const formatChange = (change: number): string => {
    const sign = change > 0 ? '+' : ''
    return `${sign}${formatNumber(change)}`
  }

  const getChangeColor = (change: number): string => {
    if (change > 0) return 'text-green-400'
    if (change < 0) return 'text-red-400'
    return 'text-white/40'
  }

  return (
    <div className="bg-blue-500/10 rounded-lg border border-blue-500/30 mt-2">
      <div className="grid grid-cols-8 gap-4 p-3 font-semibold">
        {/* Название */}
        <div className="col-span-2 flex items-center">
          <span className="text-blue-200 text-sm font-bold">ИТОГО</span>
        </div>

        {/* Товары */}
        <div className="text-center">
          <div className="text-white font-bold">{formatNumber(totals.products)}</div>
          {showAdditionalValues && (
            <div className={`text-xs ${getChangeColor(totals.productsChange)}`}>
              {formatChange(totals.productsChange)}
            </div>
          )}
        </div>

        {/* Готовые товары */}
        <div className="text-center">
          <div className="text-white font-bold">{formatNumber(totals.goods)}</div>
          {showAdditionalValues && (
            <div className={`text-xs ${getChangeColor(totals.goodsChange)}`}>
              {formatChange(totals.goodsChange)}
            </div>
          )}
        </div>

        {/* Брак */}
        <div className="text-center">
          <div className="text-white font-bold">{formatNumber(totals.defects)}</div>
          {showAdditionalValues && (
            <div className={`text-xs ${getChangeColor(totals.defectsChange)}`}>
              {formatChange(totals.defectsChange)}
            </div>
          )}
        </div>

        {/* Расходники селлера */}
        <div className="text-center">
          <div className="text-white font-bold">{formatNumber(totals.sellerSupplies)}</div>
          {showAdditionalValues && (
            <div className={`text-xs ${getChangeColor(totals.sellerSuppliesChange)}`}>
              {formatChange(totals.sellerSuppliesChange)}
            </div>
          )}
        </div>

        {/* Возвраты с ПВЗ */}
        <div className="text-center">
          <div className="text-white font-bold">{formatNumber(totals.pvzReturns)}</div>
          {showAdditionalValues && (
            <div className={`text-xs ${getChangeColor(totals.pvzReturnsChange)}`}>
              {formatChange(totals.pvzReturnsChange)}
            </div>
          )}
        </div>

        {/* Действия - пустая колонка для выравнивания */}
        <div className="text-center">
          {/* Пустое место для выравнивания с таблицей */}
        </div>
      </div>
    </div>
  )
})

SummaryRowBlock.displayName = 'SummaryRowBlock'