import { ChevronDown, ChevronRight, Eye } from 'lucide-react'
import React from 'react'

import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { Button } from '@/components/ui/button'

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

/**
 * ⚠️ КРИТИЧНО ВАЖНЫЙ БЛОК - ОСНОВНАЯ ТАБЛИЦА ДАННЫХ СКЛАДА ⚠️
 * 
 * Содержит:
 * - Отображение данных магазинов с expand/collapse
 * - Детализацию по товарам каждого магазина  
 * - Информацию о местах хранения и количествах
 * - Интерактивные кнопки для просмотра деталей
 * - Адаптивную сетку для мобильных устройств
 */
export const StoreDataTableBlock = React.memo<StoreDataTableBlockProps>(({
  storeData,
  expandedStores,
  expandedItems,
  showAdditionalValues,
  onToggleStore,
  onToggleItem,
}) => {
  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'
  }

  if (storeData.length === 0) {
    return (
      <div className="bg-white/5 rounded-lg border border-white/10 p-8 text-center">
        <p className="text-white/60">Нет данных для отображения</p>
      </div>
    )
  }

  return (
    <div className="space-y-2">
      {storeData.map((store) => {
        const isExpanded = expandedStores.has(store.id)

        return (
          <div key={store.id} className="bg-white/5 rounded-lg border border-white/10">
            {/* Основная строка магазина */}
            <div className="grid grid-cols-8 gap-4 p-3 hover:bg-white/10 transition-colors">
              {/* Название магазина с аватаром */}
              <div className="col-span-2 flex items-center gap-3">
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={() => onToggleStore(store.id)}
                  className="h-6 w-6 p-0"
                >
                  {isExpanded ? (
                    <ChevronDown className="h-4 w-4" />
                  ) : (
                    <ChevronRight className="h-4 w-4" />
                  )}
                </Button>

                <Avatar className="h-8 w-8">
                  <AvatarImage src={store.logo || store.avatar} alt={store.name} />
                  <AvatarFallback>
                    {store.name.slice(0, 2).toUpperCase()}
                  </AvatarFallback>
                </Avatar>

                <div className="min-w-0 flex-1">
                  <p className="font-medium text-white truncate">{store.name}</p>
                  <p className="text-xs text-white/60">
                    {store.items.length} товаров
                  </p>
                </div>
              </div>

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

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

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

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

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

              {/* Действия */}
              <div className="text-center">
                <Button variant="ghost" size="sm">
                  <Eye className="h-4 w-4" />
                </Button>
              </div>
            </div>

            {/* Детализация товаров (если раскрыто) */}
            {isExpanded && (
              <div className="border-t bg-muted/20">
                <div className="p-4 space-y-2">
                  <p className="text-sm font-medium text-muted-foreground">
                    Детализация по товарам:
                  </p>

                  {store.items.map((item) => {
                    const isItemExpanded = expandedItems.has(item.id)

                    return (
                      <div key={item.id} className="bg-background rounded border p-3">
                        {/* Основная информация о товаре */}
                        <div className="flex items-center justify-between">
                          <div className="flex items-center gap-2 flex-1 min-w-0">
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => onToggleItem(item.id)}
                              className="h-5 w-5 p-0 flex-shrink-0"
                            >
                              {isItemExpanded ? (
                                <ChevronDown className="h-3 w-3" />
                              ) : (
                                <ChevronRight className="h-3 w-3" />
                              )}
                            </Button>

                            <div className="min-w-0 flex-1">
                              <p className="font-medium text-sm truncate">{item.name}</p>
                              <p className="text-xs text-muted-foreground">
                                Артикул: {item.article}
                              </p>
                            </div>
                          </div>

                          <div className="text-right flex-shrink-0">
                            <p className="text-sm font-medium">
                              {formatNumber(item.productQuantity)} шт.
                            </p>
                            {item.sellerSuppliesQuantity > 0 && (
                              <p className="text-xs text-muted-foreground">
                                +{formatNumber(item.sellerSuppliesQuantity)} расходников
                              </p>
                            )}
                          </div>
                        </div>

                        {/* Детальная информация о местах хранения (если раскрыто) */}
                        {isItemExpanded && (
                          <div className="mt-3 pt-3 border-t grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 text-xs">
                            {/* Товары */}
                            <div className="space-y-1">
                              <p className="font-medium text-muted-foreground">Товары:</p>
                              <p>Место: {item.productPlace}</p>
                              <p>Количество: {formatNumber(item.productQuantity)}</p>
                            </div>

                            {/* Готовые товары */}
                            <div className="space-y-1">
                              <p className="font-medium text-muted-foreground">Готовые:</p>
                              <p>Место: {item.goodsPlace}</p>
                              <p>Количество: {formatNumber(item.goodsQuantity)}</p>
                            </div>

                            {/* Брак */}
                            <div className="space-y-1">
                              <p className="font-medium text-muted-foreground">Брак:</p>
                              <p>Место: {item.defectsPlace}</p>
                              <p>Количество: {formatNumber(item.defectsQuantity)}</p>
                            </div>

                            {/* Расходники селлера */}
                            <div className="space-y-1">
                              <p className="font-medium text-muted-foreground">Расходники:</p>
                              <p>Место: {item.sellerSuppliesPlace}</p>
                              <p>Количество: {formatNumber(item.sellerSuppliesQuantity)}</p>
                              {item.sellerSuppliesOwners && item.sellerSuppliesOwners.length > 0 && (
                                <p className="text-muted-foreground">
                                  Владелец: {item.sellerSuppliesOwners.join(', ')}
                                </p>
                              )}
                            </div>

                            {/* Возвраты с ПВЗ */}
                            <div className="space-y-1">
                              <p className="font-medium text-muted-foreground">Возвраты ПВЗ:</p>
                              <p>Место: {item.pvzReturnsPlace}</p>
                              <p>Количество: {formatNumber(item.pvzReturnsQuantity)}</p>
                            </div>
                          </div>
                        )}
                      </div>
                    )
                  })}
                </div>
              </div>
            )}
          </div>
        )
      })}
    </div>
  )
})

StoreDataTableBlock.displayName = 'StoreDataTableBlock'