'use client'

import { Package, TrendingUp, TrendingDown, DollarSign, Activity } from 'lucide-react'
import React, { useMemo } from 'react'

import { Card } from '@/components/ui/card'

import { SuppliesStatsProps } from './types'

export function SuppliesStats({ supplies }: SuppliesStatsProps) {
  const stats = useMemo(() => {
    const total = supplies.length
    const available = supplies.filter((s) => s.status === 'available').length
    const lowStock = supplies.filter((s) => s.status === 'low-stock').length
    const outOfStock = supplies.filter((s) => s.status === 'out-of-stock').length
    const inTransit = supplies.filter((s) => s.status === 'in-transit').length

    const totalValue = supplies.reduce((sum, s) => sum + (s.totalCost || s.price * s.quantity), 0)
    const totalStock = supplies.reduce((sum, s) => sum + s.currentStock, 0)

    const categories = [...new Set(supplies.map((s) => s.category))].length
    const suppliers = [...new Set(supplies.map((s) => s.supplier))].length

    return {
      total,
      available,
      lowStock,
      outOfStock,
      inTransit,
      totalValue,
      totalStock,
      categories,
      suppliers,
    }
  }, [supplies])

  const formatCurrency = (amount: number) => {
    return new Intl.NumberFormat('ru-RU', {
      style: 'currency',
      currency: 'RUB',
      minimumFractionDigits: 0,
    }).format(amount)
  }

  const formatNumber = (num: number) => {
    return new Intl.NumberFormat('ru-RU').format(num)
  }

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6 gap-4">
      {/* Общее количество */}
      <Card className="glass-card p-4">
        <div className="flex items-center justify-between">
          <div>
            <p className="text-xs font-medium text-white/60 uppercase tracking-wider">Всего позиций</p>
            <p className="text-2xl font-bold text-white mt-1">{formatNumber(stats.total)}</p>
          </div>
          <div className="p-2 bg-blue-500/20 rounded-lg">
            <Package className="h-5 w-5 text-blue-300" />
          </div>
        </div>
      </Card>

      {/* Доступно */}
      <Card className="glass-card p-4">
        <div className="flex items-center justify-between">
          <div>
            <p className="text-xs font-medium text-white/60 uppercase tracking-wider">Доступно</p>
            <p className="text-2xl font-bold text-green-300 mt-1">{formatNumber(stats.available)}</p>
          </div>
          <div className="p-2 bg-green-500/20 rounded-lg">
            <TrendingUp className="h-5 w-5 text-green-300" />
          </div>
        </div>
      </Card>

      {/* Остаток */}
      <Card className="glass-card p-4">
        <div className="flex items-center justify-between">
          <div>
            <p className="text-xs font-medium text-white/60 uppercase tracking-wider">Остаток</p>
            <p className="text-2xl font-bold text-blue-300 mt-1">{formatNumber(stats.totalStock)} шт</p>
          </div>
          <div className="p-2 bg-blue-500/20 rounded-lg">
            <Package className="h-5 w-5 text-blue-300" />
          </div>
        </div>
      </Card>

      {/* Нет в наличии */}
      <Card className="glass-card p-4">
        <div className="flex items-center justify-between">
          <div>
            <p className="text-xs font-medium text-white/60 uppercase tracking-wider">Нет в наличии</p>
            <p className="text-2xl font-bold text-red-300 mt-1">{formatNumber(stats.outOfStock)}</p>
          </div>
          <div className="p-2 bg-red-500/20 rounded-lg">
            <TrendingDown className="h-5 w-5 text-red-300" />
          </div>
        </div>
      </Card>

      {/* Общая стоимость */}
      <Card className="glass-card p-4">
        <div className="flex items-center justify-between">
          <div>
            <p className="text-xs font-medium text-white/60 uppercase tracking-wider">Общая стоимость</p>
            <p className="text-lg font-bold text-white mt-1">{formatCurrency(stats.totalValue)}</p>
          </div>
          <div className="p-2 bg-purple-500/20 rounded-lg">
            <DollarSign className="h-5 w-5 text-purple-300" />
          </div>
        </div>
      </Card>

      {/* Активность */}
      <Card className="glass-card p-4">
        <div className="flex items-center justify-between">
          <div>
            <p className="text-xs font-medium text-white/60 uppercase tracking-wider">В пути</p>
            <p className="text-2xl font-bold text-blue-300 mt-1">{formatNumber(stats.inTransit)}</p>
            <p className="text-xs text-white/40 mt-1">{stats.categories} категорий</p>
          </div>
          <div className="p-2 bg-orange-500/20 rounded-lg">
            <Activity className="h-5 w-5 text-orange-300" />
          </div>
        </div>
      </Card>
    </div>
  )
}
