'use client'

import { Package, TrendingUp, DollarSign, Truck, AlertTriangle, BarChart, ShoppingCart, Undo2 } from 'lucide-react'
import React from 'react'

import { Card } from '@/components/ui/card'
import { formatCurrency } from '@/lib/utils'

interface StatisticCardProps {
  title: string
  value: string | number
  icon: React.ReactNode
  trend?: {
    value: number
    isPositive: boolean
  }
  loading?: boolean
}

function StatisticCard({ title, value, icon, trend, loading }: StatisticCardProps) {
  if (loading) {
    return (
      <Card className="bg-white/5 backdrop-blur border-white/10 p-4">
        <div className="animate-pulse">
          <div className="h-3 bg-white/10 rounded w-24 mb-2"></div>
          <div className="h-6 bg-white/10 rounded w-32"></div>
        </div>
      </Card>
    )
  }

  return (
    <Card className="bg-white/5 backdrop-blur border-white/10 p-4 hover:border-white/20 transition-all">
      <div className="flex items-start justify-between">
        <div className="flex-1">
          <p className="text-xs text-white/60 mb-1">{title}</p>
          <p className="text-xl font-semibold text-white">
            {typeof value === 'number' && title.includes('Сумма') ? formatCurrency(value) : value}
          </p>
          {trend && (
            <div className={`flex items-center mt-1 text-xs ${trend.isPositive ? 'text-green-400' : 'text-red-400'}`}>
              <TrendingUp className={`h-3 w-3 mr-1 ${!trend.isPositive && 'rotate-180'}`} />
              <span>{Math.abs(trend.value)}%</span>
            </div>
          )}
        </div>
        <div className="text-white/40">{icon}</div>
      </div>
    </Card>
  )
}

interface SuppliesStatisticsProps {
  activeTab: string
  activeSubTab: string
  activeThirdTab?: string
  data?: any // Данные будут приходить из родительского компонента
  loading?: boolean
}

export function SuppliesStatistics({
  activeTab,
  activeSubTab,
  activeThirdTab,
  data,
  loading = false,
}: SuppliesStatisticsProps) {
  // Определяем какие метрики показывать в зависимости от активных табов
  const getStatistics = () => {
    // ✅ Фулфилмент → Товар → Карточки/Поставщики - ОБЩИЕ МЕТРИКИ согласно rules2.md 9.5.2
    if (activeTab === 'fulfillment' && activeSubTab === 'goods') {
      return [
        {
          title: 'Всего поставок товаров',
          value: data?.totalGoodsSupplies || 0,
          icon: <Package className="h-5 w-5" />,
        },
        {
          title: 'Активных поставок',
          value: data?.activeGoodsSupplies || 0,
          icon: <TrendingUp className="h-5 w-5" />,
          trend: data?.activeGoodsSuppliesTrend,
        },
        {
          title: 'Сумма активных',
          value: data?.activeGoodsSuppliesSum || 0,
          icon: <DollarSign className="h-5 w-5" />,
        },
        {
          title: 'Товаров в пути',
          value: data?.goodsInTransit || 0,
          icon: <Truck className="h-5 w-5" />,
        },
      ]
    }

    // Фулфилмент → Расходники селлера
    if (activeTab === 'fulfillment' && activeSubTab === 'consumables') {
      return [
        {
          title: 'Всего поставок',
          value: data?.totalSupplies || 0,
          icon: <Package className="h-5 w-5" />,
        },
        {
          title: 'Активных поставок',
          value: data?.activeSupplies || 0,
          icon: <TrendingUp className="h-5 w-5" />,
        },
        {
          title: 'Видов расходников',
          value: data?.consumableTypes || 0,
          icon: <BarChart className="h-5 w-5" />,
        },
        {
          title: 'Критические остатки',
          value: data?.criticalStock || 0,
          icon: <AlertTriangle className="h-5 w-5" />,
        },
      ]
    }

    // Маркетплейсы → Wildberries
    if (activeTab === 'marketplace' && activeSubTab === 'wildberries') {
      return [
        {
          title: 'Поставок на WB',
          value: data?.totalWbSupplies || 0,
          icon: <ShoppingCart className="h-5 w-5" />,
        },
        {
          title: 'Товаров отправлено',
          value: data?.sentProducts || 0,
          icon: <Package className="h-5 w-5" />,
        },
        {
          title: 'Возвраты за неделю',
          value: data?.weeklyReturns || 0,
          icon: <Undo2 className="h-5 w-5" />,
        },
        {
          title: 'Эффективность',
          value: `${data?.efficiency || 0}%`,
          icon: <TrendingUp className="h-5 w-5" />,
        },
      ]
    }

    // Маркетплейсы → Ozon
    if (activeTab === 'marketplace' && activeSubTab === 'ozon') {
      return [
        {
          title: 'Поставок на Ozon',
          value: data?.totalOzonSupplies || 0,
          icon: <ShoppingCart className="h-5 w-5" />,
        },
        {
          title: 'Товаров отправлено',
          value: data?.sentProducts || 0,
          icon: <Package className="h-5 w-5" />,
        },
        {
          title: 'Возвраты за неделю',
          value: data?.weeklyReturns || 0,
          icon: <Undo2 className="h-5 w-5" />,
        },
        {
          title: 'Эффективность',
          value: `${data?.efficiency || 0}%`,
          icon: <TrendingUp className="h-5 w-5" />,
        },
      ]
    }

    return []
  }

  const statistics = getStatistics()

  return (
    <div className="w-full">
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        {statistics.map((stat, index) => (
          <StatisticCard
            key={index}
            title={stat.title}
            value={stat.value}
            icon={stat.icon}
            trend={stat.trend}
            loading={loading}
          />
        ))}
      </div>
    </div>
  )
}
