'use client'

import { Package, Plus, Search, TrendingUp, AlertCircle, Eye, Calendar, Package2, Box } from 'lucide-react'
import { useState } from 'react'

import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Card } from '@/components/ui/card'
import { Input } from '@/components/ui/input'

// Удалены моковые данные - теперь используются только реальные данные

export function OzonSuppliesTab() {
  const [searchTerm, setSearchTerm] = useState('')
  const [statusFilter, setStatusFilter] = useState('all')

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

  const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString('ru-RU', {
      day: '2-digit',
      month: '2-digit',
      year: 'numeric',
    })
  }

  const getStatusBadge = (status: string) => {
    const statusConfig = {
      awaiting_packaging: {
        color: 'text-blue-300 border-blue-400/30',
        label: 'Ожидает упаковки',
      },
      sent_to_delivery: {
        color: 'text-yellow-300 border-yellow-400/30',
        label: 'Отправлена',
      },
      delivered: {
        color: 'text-green-300 border-green-400/30',
        label: 'Доставлена',
      },
      cancelled: { color: 'text-red-300 border-red-400/30', label: 'Отменена' },
      arbitration: {
        color: 'text-orange-300 border-orange-400/30',
        label: 'Арбитраж',
      },
    }

    const config = statusConfig[status as keyof typeof statusConfig] || statusConfig.awaiting_packaging

    return (
      <Badge variant="outline" className={`glass-secondary ${config.color}`}>
        {config.label}
      </Badge>
    )
  }

  // Теперь используются только реальные данные, моковые данные удалены
  const filteredSupplies: any[] = []

  const getTotalValue = () => {
    return filteredSupplies.reduce((sum, supply) => sum + supply.estimatedValue, 0)
  }

  const getTotalItems = () => {
    return filteredSupplies.reduce((sum, supply) => sum + supply.totalItems, 0)
  }

  const getTotalBoxes = () => {
    return filteredSupplies.reduce((sum, supply) => sum + supply.totalBoxes, 0)
  }

  return (
    <div className="h-full flex flex-col space-y-2 xl:space-y-4 p-2 xl:p-4">
      {/* Статистика с кнопкой */}
      <div className="flex flex-col xl:flex-row xl:items-center xl:justify-between gap-3 xl:gap-4">
        <div className="grid grid-cols-2 xl:grid-cols-4 gap-2 xl:gap-3 flex-1">
          <Card className="glass-card p-2 xl:p-3 h-[50px] xl:h-[60px]">
            <div className="flex items-center space-x-1.5 xl:space-x-2 h-full">
              <div className="p-1 xl:p-1.5 bg-blue-500/20 rounded">
                <Package className="h-2.5 w-2.5 xl:h-3 xl:w-3 text-blue-400" />
              </div>
              <div>
                <p className="text-white/60 text-[10px] xl:text-xs">Поставок</p>
                <p className="text-sm xl:text-lg font-bold text-white">{filteredSupplies.length}</p>
              </div>
            </div>
          </Card>

          <Card className="glass-card p-2 xl:p-3 h-[50px] xl:h-[60px]">
            <div className="flex items-center space-x-1.5 xl:space-x-2 h-full">
              <div className="p-1 xl:p-1.5 bg-green-500/20 rounded">
                <TrendingUp className="h-2.5 w-2.5 xl:h-3 xl:w-3 text-green-400" />
              </div>
              <div className="min-w-0 flex-1">
                <p className="text-white/60 text-[10px] xl:text-xs">Стоимость</p>
                <p className="text-sm xl:text-lg font-bold text-white truncate">{formatCurrency(getTotalValue())}</p>
              </div>
            </div>
          </Card>

          <Card className="glass-card p-2 xl:p-3 h-[50px] xl:h-[60px]">
            <div className="flex items-center space-x-1.5 xl:space-x-2 h-full">
              <div className="p-1 xl:p-1.5 bg-purple-500/20 rounded">
                <Package2 className="h-2.5 w-2.5 xl:h-3 xl:w-3 text-purple-400" />
              </div>
              <div>
                <p className="text-white/60 text-[10px] xl:text-xs">Товаров</p>
                <p className="text-sm xl:text-lg font-bold text-white">{getTotalItems()}</p>
              </div>
            </div>
          </Card>

          <Card className="glass-card p-2 xl:p-3 h-[50px] xl:h-[60px]">
            <div className="flex items-center space-x-1.5 xl:space-x-2 h-full">
              <div className="p-1 xl:p-1.5 bg-orange-500/20 rounded">
                <Box className="h-2.5 w-2.5 xl:h-3 xl:w-3 text-orange-400" />
              </div>
              <div>
                <p className="text-white/60 text-[10px] xl:text-xs">Коробок</p>
                <p className="text-sm xl:text-lg font-bold text-white">{getTotalBoxes()}</p>
              </div>
            </div>
          </Card>
        </div>

        <Button
          size="sm"
          className="bg-gradient-to-r from-blue-500 to-cyan-500 hover:from-blue-600 hover:to-cyan-600 text-white text-xs xl:text-sm px-3 xl:px-6 h-[50px] xl:h-[60px] whitespace-nowrap w-full xl:w-auto"
        >
          <Plus className="h-3 w-3 xl:h-4 xl:w-4 mr-1 xl:mr-2" />
          <span className="hidden sm:inline">Создать поставку</span>
          <span className="sm:hidden">Создать</span>
        </Button>
      </div>

      {/* Фильтры */}
      <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 xl:gap-3">
        <div className="relative flex-1 max-w-md">
          <Search className="absolute left-2 xl:left-3 top-1/2 transform -translate-y-1/2 h-3 w-3 xl:h-4 xl:w-4 text-white/40" />
          <Input
            placeholder="Поиск по ID поставки..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="glass-input pl-8 xl:pl-10 text-white placeholder:text-white/40 text-xs xl:text-sm h-8 xl:h-auto"
          />
        </div>

        <select
          value={statusFilter}
          onChange={(e) => setStatusFilter(e.target.value)}
          className="glass-input text-white text-xs xl:text-sm px-2 xl:px-3 py-1.5 xl:py-2 rounded-lg bg-white/5 border border-white/10 h-8 xl:h-auto"
        >
          <option value="all">Все статусы</option>
          <option value="created">Создана</option>
          <option value="confirmed">Подтверждена</option>
          <option value="in-transit">В пути</option>
          <option value="delivered">Доставлена</option>
          <option value="accepted">Принята</option>
        </select>
      </div>

      {/* Список поставок */}
      <div className="flex-1 overflow-hidden">
        <div className="h-full overflow-y-auto space-y-2 xl:space-y-3">
          {filteredSupplies.length === 0 ? (
            <div className="flex items-center justify-center h-full">
              <div className="text-center">
                <Package className="h-12 w-12 text-white/20 mx-auto mb-4" />
                <p className="text-white/60 mb-2">Поставок пока нет</p>
                <p className="text-white/40 text-sm">Создайте свою первую поставку на Ozon</p>
              </div>
            </div>
          ) : (
            filteredSupplies.map((supply) => (
              <Card key={supply.id} className="glass-card p-2 xl:p-4 hover:bg-white/10 transition-colors">
                {/* Здесь будет отображение реальных поставок */}
              </Card>
            ))
          )}
        </div>
      </div>
    </div>
  )
}
