'use client'

import { useQuery } from '@apollo/client'
import {
  ChevronDown,
  ChevronRight,
  Calendar,
  Package,
  MapPin,
  Building2,
  TrendingUp,
  AlertTriangle,
  DollarSign,
} from 'lucide-react'
import React, { useState } from 'react'

import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Card } from '@/components/ui/card'
import { GET_SUPPLY_ORDERS } from '@/graphql/queries'

// Типы данных для товаров
interface ProductParameter {
  id: string
  name: string
  value: string
  unit?: string
}

interface Product {
  id: string
  name: string
  sku: string
  category: string
  plannedQty: number
  actualQty: number
  defectQty: number
  productPrice: number
  parameters: ProductParameter[]
}

interface Supplier {
  id: string
  name: string
  inn: string
  contact: string
  address: string
  products: Product[]
  totalAmount: number
}

interface Route {
  id: string
  from: string
  fromAddress: string
  to: string
  toAddress: string
  wholesalers: Wholesaler[]
  totalProductPrice: number
  fulfillmentServicePrice: number
  logisticsPrice: number
  totalAmount: number
}

interface Supply {
  id: string
  number: number
  deliveryDate: string
  createdDate: string
  routes: Route[]
  plannedTotal: number
  actualTotal: number
  defectTotal: number
  totalProductPrice: number
  totalFulfillmentPrice: number
  totalLogisticsPrice: number
  grandTotal: number
  status: 'planned' | 'in-transit' | 'delivered' | 'completed'
}

// Данные поставок товаров из GraphQL

export function SuppliesGoodsTab() {
  // Загружаем реальные данные поставок товаров
  const {
    data: supplyOrdersData,
    loading,
    error,
  } = useQuery(GET_SUPPLY_ORDERS, {
    errorPolicy: 'all',
  })

  const [expandedSupplies, setExpandedSupplies] = useState<Set<string>>(new Set())
  const [expandedRoutes, setExpandedRoutes] = useState<Set<string>>(new Set())
  const [expandedWholesalers, setExpandedWholesalers] = useState<Set<string>>(new Set())
  const [expandedProducts, setExpandedProducts] = useState<Set<string>>(new Set())

  // Преобразуем данные из GraphQL в нужный формат
  const goodsSupplies: Supply[] = (supplyOrdersData?.supplyOrders || [])
    .filter((order: any) => order.status === 'CONFIRMED' || order.status === 'DELIVERED')
    .map((order: any, index: number) => ({
      id: order.id,
      number: index + 1,
      deliveryDate: order.deliveryDate || new Date().toISOString().split('T')[0],
      createdDate: order.createdAt?.split('T')[0] || new Date().toISOString().split('T')[0],
      status: order.status === 'DELIVERED' ? 'delivered' : 'in-transit',
      plannedTotal: order.totalItems || 0,
      actualTotal: order.totalItems || 0,
      defectTotal: 0,
      totalProductPrice: order.totalAmount || 0,
      totalFulfillmentPrice: 0,
      totalLogisticsPrice: 0,
      grandTotal: order.totalAmount || 0,
      routes: [],
    }))

  const toggleSupplyExpansion = (supplyId: string) => {
    const newExpanded = new Set(expandedSupplies)
    if (newExpanded.has(supplyId)) {
      newExpanded.delete(supplyId)
    } else {
      newExpanded.add(supplyId)
    }
    setExpandedSupplies(newExpanded)
  }

  const toggleRouteExpansion = (routeId: string) => {
    const newExpanded = new Set(expandedRoutes)
    if (newExpanded.has(routeId)) {
      newExpanded.delete(routeId)
    } else {
      newExpanded.add(routeId)
    }
    setExpandedRoutes(newExpanded)
  }

  const toggleWholesalerExpansion = (wholesalerId: string) => {
    const newExpanded = new Set(expandedWholesalers)
    if (newExpanded.has(wholesalerId)) {
      newExpanded.delete(wholesalerId)
    } else {
      newExpanded.add(wholesalerId)
    }
    setExpandedWholesalers(newExpanded)
  }

  const toggleProductExpansion = (productId: string) => {
    const newExpanded = new Set(expandedProducts)
    if (newExpanded.has(productId)) {
      newExpanded.delete(productId)
    } else {
      newExpanded.add(productId)
    }
    setExpandedProducts(newExpanded)
  }

  const getStatusBadge = (status: Supply['status']) => {
    const statusMap = {
      planned: {
        label: 'Запланирована',
        color: 'bg-blue-500/20 text-blue-300 border-blue-500/30',
      },
      'in-transit': {
        label: 'В пути',
        color: 'bg-yellow-500/20 text-yellow-300 border-yellow-500/30',
      },
      delivered: {
        label: 'Доставлена',
        color: 'bg-green-500/20 text-green-300 border-green-500/30',
      },
      completed: {
        label: 'Завершена',
        color: 'bg-purple-500/20 text-purple-300 border-purple-500/30',
      },
    }
    const { label, color } = statusMap[status]
    return <Badge className={`${color} border`}>{label}</Badge>
  }

  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 calculateProductTotal = (product: Product) => {
    return product.actualQty * product.productPrice
  }

  const getEfficiencyBadge = (planned: number, actual: number, defect: number) => {
    const efficiency = ((actual - defect) / planned) * 100
    if (efficiency >= 95) {
      return <Badge className="bg-green-500/20 text-green-300 border-green-500/30 border">Отлично</Badge>
    } else if (efficiency >= 90) {
      return <Badge className="bg-yellow-500/20 text-yellow-300 border-yellow-500/30 border">Хорошо</Badge>
    } else {
      return <Badge className="bg-red-500/20 text-red-300 border-red-500/30 border">Проблемы</Badge>
    }
  }

  return (
    <div className="space-y-6">
      {/* Статистика товаров */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
        <Card className="bg-white/10 backdrop-blur border-white/20 p-4">
          <div className="flex items-center space-x-3">
            <div className="p-2 bg-blue-500/20 rounded-lg">
              <Package className="h-5 w-5 text-blue-400" />
            </div>
            <div>
              <p className="text-white/60 text-xs">Поставок товаров</p>
              <p className="text-xl font-bold text-white">{loading ? '...' : goodsSupplies.length}</p>
            </div>
          </div>
        </Card>

        <Card className="bg-white/10 backdrop-blur border-white/20 p-4">
          <div className="flex items-center space-x-3">
            <div className="p-2 bg-green-500/20 rounded-lg">
              <TrendingUp className="h-5 w-5 text-green-400" />
            </div>
            <div>
              <p className="text-white/60 text-xs">Сумма товаров</p>
              <p className="text-xl font-bold text-white">
                {loading ? '...' : formatCurrency(goodsSupplies.reduce((sum, supply) => sum + supply.grandTotal, 0))}
              </p>
            </div>
          </div>
        </Card>

        <Card className="bg-white/10 backdrop-blur border-white/20 p-4">
          <div className="flex items-center space-x-3">
            <div className="p-2 bg-yellow-500/20 rounded-lg">
              <Calendar className="h-5 w-5 text-yellow-400" />
            </div>
            <div>
              <p className="text-white/60 text-xs">В пути</p>
              <p className="text-xl font-bold text-white">
                {loading ? '...' : goodsSupplies.filter((supply) => supply.status === 'in-transit').length}
              </p>
            </div>
          </div>
        </Card>

        <Card className="bg-white/10 backdrop-blur border-white/20 p-4">
          <div className="flex items-center space-x-3">
            <div className="p-2 bg-red-500/20 rounded-lg">
              <AlertTriangle className="h-5 w-5 text-red-400" />
            </div>
            <div>
              <p className="text-white/60 text-xs">С браком</p>
              <p className="text-xl font-bold text-white">
                {loading ? '...' : goodsSupplies.filter((supply) => supply.defectTotal > 0).length}
              </p>
            </div>
          </div>
        </Card>
      </div>

      {/* Таблица поставок товаров */}
      <Card className="bg-white/10 backdrop-blur border-white/20 overflow-hidden">
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead>
              <tr className="border-b border-white/20">
                <th className="text-left p-4 text-white font-semibold">№</th>
                <th className="text-left p-4 text-white font-semibold">Дата поставки</th>
                <th className="text-left p-4 text-white font-semibold">Дата создания</th>
                <th className="text-left p-4 text-white font-semibold">План</th>
                <th className="text-left p-4 text-white font-semibold">Факт</th>
                <th className="text-left p-4 text-white font-semibold">Брак</th>
                <th className="text-left p-4 text-white font-semibold">Цена товаров</th>
                <th className="text-left p-4 text-white font-semibold">Услуги ФФ</th>
                <th className="text-left p-4 text-white font-semibold">Логистика до ФФ</th>
                <th className="text-left p-4 text-white font-semibold">Итого сумма</th>
                <th className="text-left p-4 text-white font-semibold">Статус</th>
              </tr>
            </thead>
            <tbody>
              {loading && (
                <tr>
                  <td colSpan={11} className="p-8 text-center">
                    <div className="text-white/60">Загрузка данных...</div>
                  </td>
                </tr>
              )}
              {!loading && goodsSupplies.length === 0 && (
                <tr>
                  <td colSpan={11} className="p-8 text-center">
                    <div className="text-white/60">
                      <Package className="h-12 w-12 mx-auto mb-4 text-white/20" />
                      <div className="text-lg font-semibold text-white mb-2">Поставки товаров не найдены</div>
                      <div>Создайте первую поставку товаров через карточки или поставщиков</div>
                    </div>
                  </td>
                </tr>
              )}
              {!loading &&
                goodsSupplies.map((supply) => {
                  const isSupplyExpanded = expandedSupplies.has(supply.id)

                  return (
                    <React.Fragment key={supply.id}>
                      {/* Уровень 1: Основная строка поставки */}
                      <tr
                        className="border-b border-white/10 hover:bg-white/5 transition-colors bg-purple-500/10 cursor-pointer"
                        onClick={() => toggleSupplyExpansion(supply.id)}
                      >
                        <td className="p-4">
                          <div className="flex items-center space-x-2">
                            <span className="text-white font-normal text-lg">{supply.number}</span>
                          </div>
                        </td>
                        <td className="p-4">
                          <div className="flex items-center space-x-2">
                            <Calendar className="h-4 w-4 text-white/40" />
                            <span className="text-white font-semibold">{formatDate(supply.deliveryDate)}</span>
                          </div>
                        </td>
                        <td className="p-4">
                          <span className="text-white/80">{formatDate(supply.createdDate)}</span>
                        </td>
                        <td className="p-4">
                          <span className="text-white font-semibold">{supply.plannedTotal}</span>
                        </td>
                        <td className="p-4">
                          <span className="text-white font-semibold">{supply.actualTotal}</span>
                        </td>
                        <td className="p-4">
                          <span className={`font-semibold ${supply.defectTotal > 0 ? 'text-red-400' : 'text-white'}`}>
                            {supply.defectTotal}
                          </span>
                        </td>
                        <td className="p-4">
                          <span className="text-green-400 font-semibold">
                            {formatCurrency(supply.totalProductPrice)}
                          </span>
                        </td>
                        <td className="p-4">
                          <span className="text-blue-400 font-semibold">
                            {formatCurrency(supply.totalFulfillmentPrice)}
                          </span>
                        </td>
                        <td className="p-4">
                          <span className="text-purple-400 font-semibold">
                            {formatCurrency(supply.totalLogisticsPrice)}
                          </span>
                        </td>
                        <td className="p-4">
                          <div className="flex items-center space-x-2">
                            <DollarSign className="h-4 w-4 text-white/40" />
                            <span className="text-white font-bold text-lg">{formatCurrency(supply.grandTotal)}</span>
                          </div>
                        </td>
                        <td className="p-4">{getStatusBadge(supply.status)}</td>
                      </tr>

                      {/* Развернутые уровни */}
                      {isSupplyExpanded &&
                        supply.routes.map((route) => {
                          const isRouteExpanded = expandedRoutes.has(route.id)
                          return (
                            <React.Fragment key={route.id}>
                              <tr className="border-b border-white/10 hover:bg-white/5 transition-colors bg-blue-500/10">
                                <td className="p-4 pl-12">
                                  <div className="flex items-center space-x-2">
                                    <Button
                                      variant="ghost"
                                      size="sm"
                                      onClick={() => toggleRouteExpansion(route.id)}
                                      className="h-6 w-6 p-0 text-white/60 hover:text-white hover:bg-white/10"
                                    >
                                      {isRouteExpanded ? (
                                        <ChevronDown className="h-4 w-4" />
                                      ) : (
                                        <ChevronRight className="h-4 w-4" />
                                      )}
                                    </Button>
                                    <MapPin className="h-4 w-4 text-blue-400" />
                                    <span className="text-white font-medium">Маршрут</span>
                                  </div>
                                </td>
                                <td className="p-4" colSpan={2}>
                                  <div className="text-white">
                                    <div className="flex items-center space-x-2 mb-1">
                                      <span className="font-medium">{route.from}</span>
                                      <span className="text-white/60">→</span>
                                      <span className="font-medium">{route.to}</span>
                                    </div>
                                    <div className="text-xs text-white/60">
                                      {route.fromAddress} → {route.toAddress}
                                    </div>
                                  </div>
                                </td>
                                <td className="p-4">
                                  <span className="text-white/80">
                                    {route.wholesalers.reduce(
                                      (sum, w) => sum + w.products.reduce((pSum, p) => pSum + p.plannedQty, 0),
                                      0,
                                    )}
                                  </span>
                                </td>
                                <td className="p-4">
                                  <span className="text-white/80">
                                    {route.wholesalers.reduce(
                                      (sum, w) => sum + w.products.reduce((pSum, p) => pSum + p.actualQty, 0),
                                      0,
                                    )}
                                  </span>
                                </td>
                                <td className="p-4">
                                  <span className="text-white/80">
                                    {route.wholesalers.reduce(
                                      (sum, w) => sum + w.products.reduce((pSum, p) => pSum + p.defectQty, 0),
                                      0,
                                    )}
                                  </span>
                                </td>
                                <td className="p-4">
                                  <span className="text-green-400 font-medium">
                                    {formatCurrency(route.totalProductPrice)}
                                  </span>
                                </td>
                                <td className="p-4">
                                  <span className="text-blue-400 font-medium">
                                    {formatCurrency(route.fulfillmentServicePrice)}
                                  </span>
                                </td>
                                <td className="p-4">
                                  <span className="text-purple-400 font-medium">
                                    {formatCurrency(route.logisticsPrice)}
                                  </span>
                                </td>
                                <td className="p-4">
                                  <span className="text-white font-semibold">{formatCurrency(route.totalAmount)}</span>
                                </td>
                                <td className="p-4"></td>
                              </tr>

                              {/* Дальнейшие уровни развертывания */}
                              {isRouteExpanded &&
                                route.wholesalers.map((wholesaler) => {
                                  const isWholesalerExpanded = expandedWholesalers.has(wholesaler.id)
                                  return (
                                    <React.Fragment key={wholesaler.id}>
                                      <tr className="border-b border-white/10 hover:bg-white/5 transition-colors bg-green-500/10">
                                        <td className="p-4 pl-20">
                                          <div className="flex items-center space-x-2">
                                            <Button
                                              variant="ghost"
                                              size="sm"
                                              onClick={() => toggleWholesalerExpansion(wholesaler.id)}
                                              className="h-6 w-6 p-0 text-white/60 hover:text-white hover:bg-white/10"
                                            >
                                              {isWholesalerExpanded ? (
                                                <ChevronDown className="h-4 w-4" />
                                              ) : (
                                                <ChevronRight className="h-4 w-4" />
                                              )}
                                            </Button>
                                            <Building2 className="h-4 w-4 text-green-400" />
                                            <span className="text-white font-medium">Поставщик</span>
                                          </div>
                                        </td>
                                        <td className="p-4" colSpan={2}>
                                          <div className="text-white">
                                            <div className="font-medium mb-1">{wholesaler.name}</div>
                                            <div className="text-xs text-white/60 mb-1">ИНН: {wholesaler.inn}</div>
                                            <div className="text-xs text-white/60 mb-1">{wholesaler.address}</div>
                                            <div className="text-xs text-white/60">{wholesaler.contact}</div>
                                          </div>
                                        </td>
                                        <td className="p-4">
                                          <span className="text-white/80">
                                            {wholesaler.products.reduce((sum, p) => sum + p.plannedQty, 0)}
                                          </span>
                                        </td>
                                        <td className="p-4">
                                          <span className="text-white/80">
                                            {wholesaler.products.reduce((sum, p) => sum + p.actualQty, 0)}
                                          </span>
                                        </td>
                                        <td className="p-4">
                                          <span className="text-white/80">
                                            {wholesaler.products.reduce((sum, p) => sum + p.defectQty, 0)}
                                          </span>
                                        </td>
                                        <td className="p-4">
                                          <span className="text-green-400 font-medium">
                                            {formatCurrency(
                                              wholesaler.products.reduce((sum, p) => sum + calculateProductTotal(p), 0),
                                            )}
                                          </span>
                                        </td>
                                        <td className="p-4" colSpan={2}></td>
                                        <td className="p-4">
                                          <span className="text-white font-semibold">
                                            {formatCurrency(wholesaler.totalAmount)}
                                          </span>
                                        </td>
                                        <td className="p-4"></td>
                                      </tr>

                                      {/* Товары */}
                                      {isWholesalerExpanded &&
                                        wholesaler.products.map((product) => {
                                          const isProductExpanded = expandedProducts.has(product.id)
                                          return (
                                            <React.Fragment key={product.id}>
                                              <tr className="border-b border-white/10 hover:bg-white/5 transition-colors bg-yellow-500/10">
                                                <td className="p-4 pl-28">
                                                  <div className="flex items-center space-x-2">
                                                    <Button
                                                      variant="ghost"
                                                      size="sm"
                                                      onClick={() => toggleProductExpansion(product.id)}
                                                      className="h-6 w-6 p-0 text-white/60 hover:text-white hover:bg-white/10"
                                                    >
                                                      {isProductExpanded ? (
                                                        <ChevronDown className="h-4 w-4" />
                                                      ) : (
                                                        <ChevronRight className="h-4 w-4" />
                                                      )}
                                                    </Button>
                                                    <Package className="h-4 w-4 text-yellow-400" />
                                                    <span className="text-white font-medium">Товар</span>
                                                  </div>
                                                </td>
                                                <td className="p-4" colSpan={2}>
                                                  <div className="text-white">
                                                    <div className="font-medium mb-1">{product.name}</div>
                                                    <div className="text-xs text-white/60 mb-1">
                                                      Артикул: {product.sku}
                                                    </div>
                                                    <Badge className="bg-gray-500/20 text-gray-300 border-gray-500/30 border text-xs">
                                                      {product.category}
                                                    </Badge>
                                                  </div>
                                                </td>
                                                <td className="p-4">
                                                  <span className="text-white font-semibold">{product.plannedQty}</span>
                                                </td>
                                                <td className="p-4">
                                                  <span className="text-white font-semibold">{product.actualQty}</span>
                                                </td>
                                                <td className="p-4">
                                                  <span
                                                    className={`font-semibold ${
                                                      product.defectQty > 0 ? 'text-red-400' : 'text-white'
                                                    }`}
                                                  >
                                                    {product.defectQty}
                                                  </span>
                                                </td>
                                                <td className="p-4">
                                                  <div className="text-white">
                                                    <div className="font-medium">
                                                      {formatCurrency(calculateProductTotal(product))}
                                                    </div>
                                                    <div className="text-xs text-white/60">
                                                      {formatCurrency(product.productPrice)} за шт.
                                                    </div>
                                                  </div>
                                                </td>
                                                <td className="p-4" colSpan={2}>
                                                  {getEfficiencyBadge(
                                                    product.plannedQty,
                                                    product.actualQty,
                                                    product.defectQty,
                                                  )}
                                                </td>
                                                <td className="p-4">
                                                  <span className="text-white font-semibold">
                                                    {formatCurrency(calculateProductTotal(product))}
                                                  </span>
                                                </td>
                                                <td className="p-4"></td>
                                              </tr>

                                              {/* Параметры товара */}
                                              {isProductExpanded && (
                                                <tr>
                                                  <td colSpan={11} className="p-0">
                                                    <div className="bg-white/5 border-t border-white/10">
                                                      <div className="p-4 pl-36">
                                                        <h4 className="text-white font-medium mb-3 flex items-center space-x-2">
                                                          <span className="text-xs text-white/60">
                                                            📋 Параметры товара:
                                                          </span>
                                                        </h4>
                                                        <div className="grid grid-cols-3 gap-4">
                                                          {product.parameters.map((param) => (
                                                            <div key={param.id} className="bg-white/5 rounded-lg p-3">
                                                              <div className="text-white/80 text-xs font-medium mb-1">
                                                                {param.name}
                                                              </div>
                                                              <div className="text-white text-sm">
                                                                {param.value} {param.unit || ''}
                                                              </div>
                                                            </div>
                                                          ))}
                                                        </div>
                                                      </div>
                                                    </div>
                                                  </td>
                                                </tr>
                                              )}
                                            </React.Fragment>
                                          )
                                        })}
                                    </React.Fragment>
                                  )
                                })}
                            </React.Fragment>
                          )
                        })}
                    </React.Fragment>
                  )
                })}
            </tbody>
          </table>
        </div>
      </Card>
    </div>
  )
}
