import { memo, useEffect } from 'react'

import { EmptyStateBlock } from './blocks/EmptyStateBlock'
import { ErrorDisplayBlock } from './blocks/ErrorDisplayBlock'
import { useDataProcessing } from './hooks/useDataProcessing'
import { useProductPhotos } from './hooks/useProductPhotos'
import { useUIState } from './hooks/useUIState'
import type { CampaignStatsProps } from './types'

/**
 * Компонент рекламной статистики с модульной архитектурой
 * 
 * Особенности модульной архитектуры:
 * - Разделение на логические блоки (Campaign Selector, Chart, Table, Errors)
 * - Переиспользуемые хуки для управления состоянием
 * - Типизированные пропсы для каждого блока
 * - React.memo для оптимизации производительности
 * - Централизованное управление состоянием через кастомные хуки
 */
export const AdvertisingTab = memo<CampaignStatsProps>(function AdvertisingTab({
  selectedPeriod,
  useCustomDates,
  startDate: _startDate,
  endDate: _endDate,
  getCachedData: _getCachedData,
  setCachedData: _setCachedData,
  isLoadingData,
  setIsLoadingData: _setIsLoadingData,
}) {
  // Хуки для управления состоянием
  const uiState = useUIState()
  const { productPhotos, loadProductPhotos } = useProductPhotos()
  const { dailyData, convertCampaignDataToDailyData, getDateRange } = useDataProcessing()

  // Временные заглушки для отсутствующих хуков
  const campaignStats: any[] = []
  const loading = false
  const error = null

  // Загрузка фотографий товаров при изменении данных
  useEffect(() => {
    const nmIds = dailyData.flatMap(day => 
      day.products.map(product => product.nmId),
    )
    
    if (nmIds.length > 0) {
      loadProductPhotos(nmIds)
    }
  }, [dailyData, loadProductPhotos])

  // Временная обработка данных (заглушка)
  useEffect(() => {
    if (campaignStats.length > 0) {
      convertCampaignDataToDailyData(campaignStats, undefined)
    }
  }, [campaignStats, convertCampaignDataToDailyData])

  const hasData = dailyData.length > 0
  const isLoading = loading || (isLoadingData ?? false)

  return (
    <div className="space-y-6">
      {/* Блок ошибок */}
      <ErrorDisplayBlock error={error || undefined} />

      {/* Статистика рекламы - в разработке */}
      <div className="bg-card/50 p-8 rounded-lg border">
        <div className="text-center space-y-4">
          <div className="w-16 h-16 mx-auto bg-muted rounded-full flex items-center justify-center">
            <span className="text-2xl">📈</span>
          </div>
          <h3 className="text-lg font-medium">Статистика рекламы</h3>
          <p className="text-sm text-muted-foreground max-w-md mx-auto">
            Раздел рекламной статистики находится в разработке. 
            Здесь будут отображаться данные о кампаниях, расходах и эффективности рекламы.
          </p>
        </div>
      </div>

      {/* Состояние загрузки/пустых данных */}
      <EmptyStateBlock 
        isLoading={isLoading} 
        hasData={hasData} 
      />

      {/* Временно скрываем отладочную информацию */}
      {process.env.NODE_ENV === 'development' && false && (
        <div className="text-xs text-muted-foreground p-2 bg-muted/5 rounded">
          <div>Период: {selectedPeriod}</div>
          <div>Кастомные даты: {useCustomDates ? 'Да' : 'Нет'}</div>
          <div>Данных: {dailyData.length} дней</div>
          <div>Фотографий: {productPhotos.size}</div>
          <div>UI состояние: {JSON.stringify({
            expandedDays: uiState.expandedDays.size,
            expandedProducts: uiState.expandedProducts.size,
            showWbAds: uiState.showWbAds,
            showExternalAds: uiState.showExternalAds,
          })}</div>
        </div>
      )}
    </div>
  )
})

AdvertisingTab.displayName = 'AdvertisingTab'