'use client'

import { SortAsc, SortDesc, User, Calendar } from 'lucide-react'
import React from 'react'

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

import { DeliveryDetails } from './delivery-details'
import { SuppliesListProps } from './types'

export function SuppliesList({
  supplies,
  expandedSupplies,
  onToggleExpansion,
  getSupplyDeliveries,
  getStatusConfig,
  sort,
  onSort,
}: SuppliesListProps) {
  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="space-y-2">
      {/* Заголовки столбцов */}
      <Card className="glass-card p-4">
        <div className="grid grid-cols-8 gap-3 text-xs font-medium text-white/70 uppercase tracking-wider">
          <button onClick={() => onSort('name')} className="text-left flex items-center space-x-1 hover:text-white">
            <span>Название</span>
            {sort.field === 'name' &&
              (sort.direction === 'asc' ? <SortAsc className="h-3 w-3" /> : <SortDesc className="h-3 w-3" />)}
          </button>
          <button onClick={() => onSort('category')} className="text-left flex items-center space-x-1 hover:text-white">
            <span>Категория</span>
            {sort.field === 'category' &&
              (sort.direction === 'asc' ? <SortAsc className="h-3 w-3" /> : <SortDesc className="h-3 w-3" />)}
          </button>
          <span>Поставлено</span>
          <span>Отправлено</span>
          <button
            onClick={() => onSort('currentStock')}
            className="text-left flex items-center space-x-1 hover:text-white"
          >
            <span>Остаток</span>
            {sort.field === 'currentStock' &&
              (sort.direction === 'asc' ? <SortAsc className="h-3 w-3" /> : <SortDesc className="h-3 w-3" />)}
          </button>
          <button onClick={() => onSort('supplier')} className="text-left flex items-center space-x-1 hover:text-white">
            <span>Поставщик</span>
            {sort.field === 'supplier' &&
              (sort.direction === 'asc' ? <SortAsc className="h-3 w-3" /> : <SortDesc className="h-3 w-3" />)}
          </button>
          <span>Поставки</span>
          <span>Статус</span>
        </div>
      </Card>

      {/* Список расходников */}
      {supplies.map((supply) => {
        const statusConfig = getStatusConfig(supply)
        const StatusIcon = statusConfig.icon
        const isLowStock = supply.currentStock <= supply.minStock && supply.currentStock > 0
        const isExpanded = expandedSupplies.has(supply.id)
        const deliveries = getSupplyDeliveries(supply)

        return (
          <div key={supply.id}>
            <Card
              className="glass-card p-4 hover:bg-white/15 transition-all duration-300 cursor-pointer"
              onClick={() => onToggleExpansion(supply.id)}
            >
              <div className="grid grid-cols-8 gap-3 items-center text-sm">
                <div className="flex items-center space-x-2">
                  <div>
                    <p className="font-medium text-white">{supply.name}</p>
                    <p className="text-xs text-white/60 truncate">{supply.description}</p>
                  </div>
                </div>

                <div className="flex items-center space-x-2">
                  <Badge variant="outline" className="text-xs border-white/20 text-white/80">
                    {supply.category}
                  </Badge>
                </div>

                <div className="font-medium text-white">
                  {formatNumber(supply.quantity)} {supply.unit}
                </div>

                <div className="font-medium text-white">
                  {formatNumber(supply.shippedQuantity || 0)} {supply.unit}
                </div>

                <div className={`font-medium ${isLowStock ? 'text-yellow-300' : 'text-white'}`}>
                  {formatNumber(supply.currentStock)} {supply.unit}
                </div>

                <div className="text-white/80 truncate" title={supply.supplier}>
                  {supply.supplier}
                </div>

                <div>
                  <Badge className="bg-blue-500/20 text-blue-300 text-xs">{deliveries.length} поставок</Badge>
                </div>

                <div className="flex items-center space-x-2">
                  <Badge className={`${statusConfig.color} text-xs`}>
                    <StatusIcon className="h-3 w-3 mr-1" />
                    {statusConfig.label}
                  </Badge>
                </div>
              </div>
            </Card>

            {/* Развернутые поставки для списочного режима */}
            {isExpanded && (
              <DeliveryDetails
                supply={supply}
                deliveries={deliveries}
                viewMode="list"
                getStatusConfig={getStatusConfig}
              />
            )}
          </div>
        )
      })}
    </div>
  )
}
