'use client'

import { ChevronUp, ChevronDown, TrendingUp, TrendingDown } from 'lucide-react'
import { useState } from 'react'

interface TableColumn {
  key: string
  title: string
  sortable: boolean
}

interface TableData {
  id: number
  number: string
  store: string
  product: string
  goods: number
  defects: number
  sellerSupplies: number
  pvzReturns: number
}

const columns: TableColumn[] = [
  { key: 'number', title: '№', sortable: true },
  { key: 'store', title: 'Магазин', sortable: true },
  { key: 'product', title: 'Продукт', sortable: true },
  { key: 'goods', title: 'Товар', sortable: true },
  { key: 'defects', title: 'Брак', sortable: true },
  { key: 'sellerSupplies', title: 'Расходники селлеров', sortable: true },
  { key: 'pvzReturns', title: 'Возвраты с ПВЗ', sortable: true },
]

const sampleData: TableData[] = [
  {
    id: 1,
    number: '001',
    store: 'Wildberries',
    product: 'Смартфон iPhone 15',
    goods: 150,
    defects: 5,
    sellerSupplies: 25,
    pvzReturns: 12,
  },
  {
    id: 2,
    number: '002',
    store: 'Ozon',
    product: 'Наушники AirPods',
    goods: 89,
    defects: 3,
    sellerSupplies: 18,
    pvzReturns: 8,
  },
  {
    id: 3,
    number: '003',
    store: 'Яндекс Маркет',
    product: 'Планшет iPad',
    goods: 67,
    defects: 2,
    sellerSupplies: 12,
    pvzReturns: 5,
  },
  {
    id: 4,
    number: '004',
    store: 'Wildberries',
    product: 'Умные часы',
    goods: 234,
    defects: 8,
    sellerSupplies: 45,
    pvzReturns: 18,
  },
  {
    id: 5,
    number: '005',
    store: 'Ozon',
    product: 'Ноутбук MacBook',
    goods: 45,
    defects: 1,
    sellerSupplies: 8,
    pvzReturns: 3,
  },
]

type SortField = keyof TableData | null
type SortDirection = 'asc' | 'desc'

export function FulfillmentWarehouseDemo() {
  const [sortField, setSortField] = useState<SortField>(null)
  const [sortDirection, setSortDirection] = useState<SortDirection>('asc')

  const handleSort = (field: keyof TableData) => {
    if (sortField === field) {
      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc')
    } else {
      setSortField(field)
      setSortDirection('asc')
    }
  }

  const sortedData = [...sampleData].sort((a, b) => {
    if (!sortField) return 0

    const aValue = a[sortField]
    const bValue = b[sortField]

    if (typeof aValue === 'string' && typeof bValue === 'string') {
      return sortDirection === 'asc' ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue)
    }

    if (typeof aValue === 'number' && typeof bValue === 'number') {
      return sortDirection === 'asc' ? aValue - bValue : bValue - aValue
    }

    return 0
  })

  // Вычисляем суммарные значения
  const totals = {
    goods: sampleData.reduce((sum, item) => sum + item.goods, 0),
    defects: sampleData.reduce((sum, item) => sum + item.defects, 0),
    sellerSupplies: sampleData.reduce((sum, item) => sum + item.sellerSupplies, 0),
    pvzReturns: sampleData.reduce((sum, item) => sum + item.pvzReturns, 0),
  }

  const SortIcon = ({ field }: { field: keyof TableData }) => {
    if (sortField !== field) {
      return (
        <div className="flex flex-col ml-1 opacity-30">
          <ChevronUp size={12} />
          <ChevronDown size={12} className="-mt-1" />
        </div>
      )
    }

    return sortDirection === 'asc' ? (
      <ChevronUp size={14} className="ml-1 text-blue-400" />
    ) : (
      <ChevronDown size={14} className="ml-1 text-blue-400" />
    )
  }

  const StatCell = ({ value, prevValue, nextValue }: { value: number; prevValue: number; nextValue: number }) => (
    <div className="flex items-center justify-center gap-2">
      <div className="flex items-center text-xs text-green-400">
        <TrendingUp size={12} className="mr-1" />
        {prevValue}
      </div>
      <div className="text-lg font-semibold text-white">{value.toLocaleString()}</div>
      <div className="flex items-center text-xs text-red-400">
        <TrendingDown size={12} className="mr-1" />
        {nextValue}
      </div>
    </div>
  )

  return (
    <div className="space-y-8">
      <div>
        <h2 className="text-2xl font-bold text-white mb-4">Склад фулфилмент</h2>
        <p className="text-white/70 mb-6">Многоуровневая таблица с сортировкой и агрегированными данными</p>
      </div>

      <div className="bg-white/5 backdrop-blur border border-white/10 rounded-lg overflow-hidden">
        {/* Заголовки таблицы */}
        <div className="bg-white/10 border-b border-white/10">
          <div className="grid grid-cols-7 gap-4 p-4">
            {columns.map((column) => (
              <div
                key={column.key}
                className={`flex items-center justify-center text-sm font-medium text-white/90 ${
                  column.sortable ? 'cursor-pointer hover:text-white' : ''
                }`}
                onClick={() => column.sortable && handleSort(column.key as keyof TableData)}
              >
                {column.title}
                {column.sortable && <SortIcon field={column.key as keyof TableData} />}
              </div>
            ))}
          </div>
        </div>

        {/* Суммарные значения */}
        <div className="bg-white/5 border-b border-white/10">
          <div className="grid grid-cols-7 gap-4 p-6">
            <div className="text-center">
              <div className="text-sm text-white/60">Всего</div>
            </div>
            <div className="text-center">
              <div className="text-lg font-semibold text-white">3</div>
            </div>
            <div className="text-center">
              <StatCell value={5} prevValue={3} nextValue={7} />
            </div>
            <div className="text-center">
              <StatCell value={totals.goods} prevValue={520} nextValue={610} />
            </div>
            <div className="text-center">
              <StatCell value={totals.defects} prevValue={15} nextValue={25} />
            </div>
            <div className="text-center">
              <StatCell value={totals.sellerSupplies} prevValue={95} nextValue={125} />
            </div>
            <div className="text-center">
              <StatCell value={totals.pvzReturns} prevValue={38} nextValue={55} />
            </div>
          </div>
        </div>

        {/* Данные таблицы */}
        <div className="divide-y divide-white/10">
          {sortedData.map((row) => (
            <div key={row.id} className="grid grid-cols-7 gap-4 p-4 hover:bg-white/5 transition-colors">
              <div className="text-center text-white/80">{row.number}</div>
              <div className="text-center text-white/80">{row.store}</div>
              <div className="text-center">
                <div className="flex items-center justify-center gap-2">
                  <div className="flex items-center text-xs text-green-400">
                    <TrendingUp size={12} className="mr-1" />
                    {row.id + 2}
                  </div>
                  <div className="text-white/80 font-medium truncate" title={row.product}>
                    {row.product}
                  </div>
                  <div className="flex items-center text-xs text-red-400">
                    <TrendingDown size={12} className="mr-1" />
                    {row.id + 1}
                  </div>
                </div>
                <div className="text-xs text-white/50 mt-1">
                  Артикул: {row.store.slice(0, 3).toUpperCase()}-{row.id.toString().padStart(3, '0')}
                </div>
              </div>
              <div className="text-center text-white font-medium">{row.goods.toLocaleString()}</div>
              <div className="text-center text-red-400 font-medium">{row.defects}</div>
              <div className="text-center text-yellow-400 font-medium">{row.sellerSupplies}</div>
              <div className="text-center text-orange-400 font-medium">{row.pvzReturns}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Дополнительная информация */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div className="bg-white/5 backdrop-blur border border-white/10 rounded-lg p-4">
          <h3 className="text-lg font-semibold text-white mb-2">Особенности таблицы</h3>
          <ul className="text-sm text-white/70 space-y-1">
            <li>• Сортировка по всем столбцам</li>
            <li>• Агрегированные данные с индикаторами</li>
            <li>• Многоуровневая структура</li>
            <li>• Цветовое кодирование данных</li>
          </ul>
        </div>

        <div className="bg-white/5 backdrop-blur border border-white/10 rounded-lg p-4">
          <h3 className="text-lg font-semibold text-white mb-2">Индикаторы</h3>
          <div className="space-y-2 text-sm">
            <div className="flex items-center">
              <TrendingUp size={16} className="text-green-400 mr-2" />
              <span className="text-white/70">Рост (левое значение)</span>
            </div>
            <div className="flex items-center">
              <TrendingDown size={16} className="text-red-400 mr-2" />
              <span className="text-white/70">Падение (правое значение)</span>
            </div>
          </div>
        </div>

        <div className="bg-white/5 backdrop-blur border border-white/10 rounded-lg p-4">
          <h3 className="text-lg font-semibold text-white mb-2">Цветовая схема</h3>
          <div className="space-y-2 text-sm">
            <div className="flex items-center">
              <div className="w-3 h-3 bg-white rounded mr-2"></div>
              <span className="text-white/70">Товары</span>
            </div>
            <div className="flex items-center">
              <div className="w-3 h-3 bg-red-400 rounded mr-2"></div>
              <span className="text-white/70">Брак</span>
            </div>
            <div className="flex items-center">
              <div className="w-3 h-3 bg-yellow-400 rounded mr-2"></div>
              <span className="text-white/70">Расходники</span>
            </div>
            <div className="flex items-center">
              <div className="w-3 h-3 bg-orange-400 rounded mr-2"></div>
              <span className="text-white/70">Возвраты</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
