"use client"

import React, { useState } from 'react'
import { Card } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Sidebar } from '@/components/dashboard/sidebar'

import { 
  ChevronDown, 
  ChevronRight, 
  Plus,
  Calendar,
  Package,
  MapPin,
  Building2,
  TrendingUp,
  AlertTriangle,
  DollarSign
} from 'lucide-react'


// Типы данных для 5-уровневой структуры



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 Wholesaler {
  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'
}

// Моковые данные для 5-уровневой структуры
const mockSupplies: Supply[] = [
  {
    id: '1',
    number: 1,
    deliveryDate: '2024-01-15',
    createdDate: '2024-01-10',
    status: 'delivered',
    plannedTotal: 180,
    actualTotal: 173,
    defectTotal: 2,
    totalProductPrice: 3750000,
    totalFulfillmentPrice: 43000,
    totalLogisticsPrice: 27000,
    grandTotal: 3820000,
    routes: [
      {
        id: 'r1',
        from: 'Садовод',
        fromAddress: 'Москва, 14-й км МКАД',
        to: 'SFERAV Logistics',
        toAddress: 'Москва, ул. Складская, 15',
        totalProductPrice: 3600000,
        fulfillmentServicePrice: 25000,
        logisticsPrice: 15000,
        totalAmount: 3640000,
        wholesalers: [
          {
            id: 'w1',
            name: 'ООО "ТехноСнаб"',
            inn: '7701234567',
            contact: '+7 (495) 123-45-67',
            address: 'Москва, ул. Торговая, 1',
            totalAmount: 3600000,
            products: [
              {
                id: 'p1',
                name: 'Смартфон iPhone 15',
                sku: 'APL-IP15-128',
                category: 'Электроника',
                plannedQty: 50,
                actualQty: 48,
                defectQty: 2,
                productPrice: 75000,
                parameters: [
                  { id: 'param1', name: 'Цвет', value: 'Черный' },
                  { id: 'param2', name: 'Память', value: '128', unit: 'ГБ' },
                  { id: 'param3', name: 'Гарантия', value: '12', unit: 'мес' }
                ]
              }
            ]
          }
        ]
      },
      {
        id: 'r2',
        from: 'ТЯК Москва',
        fromAddress: 'Москва, Алтуфьевское шоссе, 27',
        to: 'MegaFulfillment',
        toAddress: 'Подольск, ул. Индустриальная, 42',
        totalProductPrice: 150000,
        fulfillmentServicePrice: 18000,
        logisticsPrice: 12000,
        totalAmount: 180000,
        wholesalers: [
          {
            id: 'w2',
            name: 'ИП Петров А.В.',
            inn: '123456789012',
            contact: '+7 (499) 987-65-43',
            address: 'Москва, пр-т Мира, 45',
            totalAmount: 150000,
            products: [
              {
                id: 'p2',
                name: 'Чехол для iPhone 15',
                sku: 'ACC-IP15-CASE',
                category: 'Аксессуары',
                plannedQty: 100,
                actualQty: 95,
                defectQty: 0,
                productPrice: 1500,
                parameters: [
                  { id: 'param4', name: 'Материал', value: 'Силикон' },
                  { id: 'param5', name: 'Цвет', value: 'Прозрачный' }
                ]
              }
            ]
          }
        ]
      }
    ]
  },
  {
    id: '2',
    number: 2,
    deliveryDate: '2024-01-20',
    createdDate: '2024-01-12',
    status: 'in-transit',
    plannedTotal: 30,
    actualTotal: 30,
    defectTotal: 0,
    totalProductPrice: 750000,
    totalFulfillmentPrice: 18000,
    totalLogisticsPrice: 12000,
    grandTotal: 780000,
    routes: [
      {
        id: 'r3',
        from: 'Садовод',
        fromAddress: 'Москва, 14-й км МКАД',
        to: 'WB Подольск',
        toAddress: 'Подольск, ул. Складская, 25',
        totalProductPrice: 750000,
        fulfillmentServicePrice: 18000,
        logisticsPrice: 12000,
        totalAmount: 780000,
        wholesalers: [
          {
            id: 'w3',
            name: 'ООО "АудиоТех"',
            inn: '7702345678',
            contact: '+7 (495) 555-12-34',
            address: 'Москва, ул. Звуковая, 8',
            totalAmount: 750000,
            products: [
              {
                id: 'p3',
                name: 'Наушники AirPods Pro',
                sku: 'APL-AP-PRO2',
                category: 'Аудио',
                plannedQty: 30,
                actualQty: 30,
                defectQty: 0,
                productPrice: 25000,
                parameters: [
                  { id: 'param6', name: 'Тип', value: 'Беспроводные' },
                  { id: 'param7', name: 'Шумоподавление', value: 'Активное' },
                  { id: 'param8', name: 'Время работы', value: '6', unit: 'ч' }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
]

export function SuppliesDashboard() {
  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())


  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="min-h-screen bg-gradient-smooth flex">
      <Sidebar />
      <main className="flex-1 ml-56">
        <div className="p-8">
          {/* Заголовок */}
          <div className="flex items-center justify-between mb-8">
            <div>
              <h1 className="text-3xl font-bold text-white mb-2">Поставки</h1>
              <p className="text-white/60">Управление поставками товаров</p>
            </div>
            <Button 
              className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white shadow-lg"
              onClick={() => {
                window.location.href = '/supplies/create'
              }}
            >
              <Plus className="h-4 w-4 mr-2" />
              Создать поставку
            </Button>
          </div>

          {/* Статистика */}
          <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
            <Card className="bg-white/10 backdrop-blur border-white/20 p-6">
              <div className="flex items-center space-x-3">
                <div className="p-3 bg-blue-500/20 rounded-lg">
                  <Package className="h-6 w-6 text-blue-400" />
                </div>
                <div>
                  <p className="text-white/60 text-sm">Всего поставок</p>
                  <p className="text-2xl font-bold text-white">{mockSupplies.length}</p>
                </div>
              </div>
            </Card>
            
            <Card className="bg-white/10 backdrop-blur border-white/20 p-6">
              <div className="flex items-center space-x-3">
                <div className="p-3 bg-green-500/20 rounded-lg">
                  <TrendingUp className="h-6 w-6 text-green-400" />
                </div>
                <div>
                  <p className="text-white/60 text-sm">Общая сумма</p>
                  <p className="text-2xl font-bold text-white">
                    {formatCurrency(mockSupplies.reduce((sum, supply) => sum + supply.grandTotal, 0))}
                  </p>
                </div>
              </div>
            </Card>

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

            <Card className="bg-white/10 backdrop-blur border-white/20 p-6">
              <div className="flex items-center space-x-3">
                <div className="p-3 bg-red-500/20 rounded-lg">
                  <AlertTriangle className="h-6 w-6 text-red-400" />
                </div>
                <div>
                  <p className="text-white/60 text-sm">С браком</p>
                  <p className="text-2xl font-bold text-white">
                    {mockSupplies.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>
                  {mockSupplies.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">
                          <td className="p-4">
                            <div className="flex items-center space-x-2">
                              <Button
                                variant="ghost"
                                size="sm"
                                onClick={() => toggleSupplyExpansion(supply.id)}
                                className="h-6 w-6 p-0 text-white/60 hover:text-white hover:bg-white/10"
                              >
                                {isSupplyExpanded ? (
                                  <ChevronDown className="h-4 w-4" />
                                ) : (
                                  <ChevronRight className="h-4 w-4" />
                                )}
                              </Button>
                              <span className="text-white font-bold 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>

                        {/* Уровень 2: Маршруты */}
                        {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>

                              {/* Уровень 3: Оптовики */}
                              {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>

                                    {/* Уровень 4: Товары */}
                                    {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>

                                          {/* Уровень 5: Параметры товара */}
                                          {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>
      </main>
    </div>
  )
} 