'use client'

import { useQuery, useMutation } from '@apollo/client'
import { Package, Save, X, Edit, Check } from 'lucide-react'
import Image from 'next/image'
import { useState, useEffect, useMemo } from 'react'
import { toast } from 'sonner'

// Alert dialog no longer needed for supplies
import { Button } from '@/components/ui/button'
import { Card } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { UPDATE_SUPPLY_PRICE } from '@/graphql/mutations'
import { GET_MY_SUPPLIES } from '@/graphql/queries'
import { useAuth } from '@/hooks/useAuth'

interface Supply {
  id: string
  name: string
  description?: string
  pricePerUnit?: number | null
  unit: string
  imageUrl?: string
  warehouseStock: number
  isAvailable: boolean
  warehouseConsumableId: string
  createdAt: string
  updatedAt: string
  organization: {
    id: string
    name: string
  }
}

interface EditableSupply {
  id: string
  name: string
  description: string
  pricePerUnit: string // Цена за единицу - единственное редактируемое поле
  unit: string
  imageUrl: string
  warehouseStock: number
  isAvailable: boolean
  isEditing: boolean
  hasChanges: boolean
}

// PendingChange interface no longer needed

export function SuppliesTab() {
  const { user } = useAuth()
  const [editableSupplies, setEditableSupplies] = useState<EditableSupply[]>([])
  // No longer need pending changes tracking
  const [isSaving, setIsSaving] = useState(false)
  const [isInitialized, setIsInitialized] = useState(false)

  // Debug информация
  console.log('SuppliesTab - User:', user?.phone, 'Type:', user?.organization?.type)

  // GraphQL запросы и мутации
  const { data, loading, error, refetch } = useQuery(GET_MY_SUPPLIES, {
    skip: !user || user?.organization?.type !== 'FULFILLMENT',
  })
  const [updateSupplyPrice] = useMutation(UPDATE_SUPPLY_PRICE)

  // Debug GraphQL запроса
  console.log('SuppliesTab - Query:', {
    skip: !user || user?.organization?.type !== 'FULFILLMENT',
    loading,
    error: error?.message,
    dataLength: data?.mySupplies?.length,
  })

  const supplies = data?.mySupplies || []

  // Преобразуем загруженные расходники в редактируемый формат
  useEffect(() => {
    if (data?.mySupplies && !isInitialized) {
      const convertedSupplies: EditableSupply[] = data.mySupplies.map((supply: Supply) => ({
        id: supply.id,
        name: supply.name,
        description: supply.description || '',
        pricePerUnit: supply.pricePerUnit ? supply.pricePerUnit.toString() : '',
        unit: supply.unit,
        imageUrl: supply.imageUrl || '',
        warehouseStock: supply.warehouseStock,
        isAvailable: supply.isAvailable,
        isEditing: false,
        hasChanges: false,
      }))

      setEditableSupplies(convertedSupplies)
      setIsInitialized(true)
    }
  }, [data, isInitialized])

  // Расходники нельзя создавать - они появляются автоматически со склада
  // const addNewRow = () => { ... } - REMOVED

  // Расходники нельзя удалять - они управляются через склад
  // const removeRow = async (supplyId: string, isNew: boolean) => { ... } - REMOVED

  // Начать редактирование существующей строки
  const startEditing = (supplyId: string) => {
    setEditableSupplies((prev) =>
      prev.map((supply) => (supply.id === supplyId ? { ...supply, isEditing: true } : supply)),
    )
  }

  // Отменить редактирование
  const cancelEditing = (supplyId: string) => {
    const supply = editableSupplies.find((s) => s.id === supplyId)
    if (!supply) return

    // Возвращаем к исходному состоянию
    const originalSupply = supplies.find((s: Supply) => s.id === supply.id)
    if (originalSupply) {
      setEditableSupplies((prev) =>
        prev.map((s) =>
          s.id === supplyId
            ? {
                id: originalSupply.id,
                name: originalSupply.name,
                description: originalSupply.description || '',
                pricePerUnit: originalSupply.pricePerUnit ? originalSupply.pricePerUnit.toString() : '',
                unit: originalSupply.unit,
                imageUrl: originalSupply.imageUrl || '',
                warehouseStock: originalSupply.warehouseStock,
                isAvailable: originalSupply.isAvailable,
                isEditing: false,
                hasChanges: false,
              }
            : s,
        ),
      )
    }
  }

  // Обновить поле (только цену можно редактировать)
  const updateField = (supplyId: string, field: keyof EditableSupply, value: string) => {
    if (field !== 'pricePerUnit') {
      return // Только цену можно редактировать
    }

    setEditableSupplies((prev) =>
      prev.map((supply) => {
        if (supply.id !== supplyId) return supply

        return {
          ...supply,
          pricePerUnit: value,
          hasChanges: true,
        }
      }),
    )
  }

  // Image upload no longer needed - supplies are readonly except price

  // Сохранить все изменения (только цены)
  const saveAllChanges = async () => {
    setIsSaving(true)
    try {
      const suppliesToSave = editableSupplies.filter((s) => s.hasChanges)

      for (const supply of suppliesToSave) {
        // Проверяем валидность цены (может быть пустой)
        const pricePerUnit = supply.pricePerUnit.trim() ? parseFloat(supply.pricePerUnit) : null

        if (supply.pricePerUnit.trim() && (isNaN(pricePerUnit!) || pricePerUnit! <= 0)) {
          toast.error('Введите корректную цену')
          setIsSaving(false)
          return
        }

        const input = {
          pricePerUnit: pricePerUnit,
        }

        await updateSupplyPrice({
          variables: { id: supply.id, input },
          update: (cache, { data }) => {
            if (data?.updateSupplyPrice?.supply) {
              const existingData = cache.readQuery({ query: GET_MY_SUPPLIES }) as { mySupplies: Supply[] } | null
              if (existingData) {
                cache.writeQuery({
                  query: GET_MY_SUPPLIES,
                  data: {
                    mySupplies: existingData.mySupplies.map((s: Supply) =>
                      s.id === data.updateSupplyPrice.supply.id ? data.updateSupplyPrice.supply : s,
                    ),
                  },
                })
              }
            }
          },
        })
      }

      // Сбрасываем флаги изменений
      setEditableSupplies((prev) => prev.map((s) => ({ ...s, hasChanges: false, isEditing: false })))

      toast.success('Цены успешно обновлены')
    } catch (error) {
      console.error('Error saving changes:', error)
      toast.error('Ошибка при сохранении цен')
    } finally {
      setIsSaving(false)
    }
  }

  // Проверяем есть ли несохраненные изменения (только цены)
  const hasUnsavedChanges = useMemo(() => {
    return editableSupplies.some((s) => s.hasChanges)
  }, [editableSupplies])

  return (
    <div className="h-full flex flex-col">
      <Card className="flex-1 bg-white/5 backdrop-blur border-white/10 p-6 overflow-hidden">
        {/* Заголовок и кнопки */}
        <div className="flex items-center justify-between mb-6">
          <div>
            <h2 className="text-lg font-semibold text-white mb-1">Расходники со склада</h2>
            <p className="text-white/70 text-sm">
              Расходники появляются автоматически из поставок. Можно только установить цену.
            </p>
          </div>

          <div className="flex gap-3">
            {hasUnsavedChanges && (
              <Button
                onClick={saveAllChanges}
                disabled={isSaving}
                className="bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 text-white border-0 shadow-lg shadow-green-500/25 hover:shadow-green-500/40 transition-all duration-300 hover:scale-105 disabled:hover:scale-100"
              >
                <Save className="w-4 h-4 mr-2" />
                {isSaving ? 'Обновление цен...' : 'Сохранить цены'}
              </Button>
            )}
          </div>
        </div>

        {/* Таблица расходников */}
        <div className="overflow-auto flex-1">
          {loading ? (
            <div className="h-full flex items-center justify-center">
              <div className="text-center">
                <div className="w-16 h-16 bg-white/10 rounded-full flex items-center justify-center mx-auto mb-4 animate-spin">
                  <svg className="w-8 h-8 text-white/50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
                    />
                  </svg>
                </div>
                <p className="text-white/70 text-sm">Загрузка расходников...</p>
              </div>
            </div>
          ) : error ? (
            <div className="h-full flex items-center justify-center">
              <div className="text-center">
                <div className="w-16 h-16 bg-red-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
                  <svg className="w-8 h-8 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                    />
                  </svg>
                </div>
                <h3 className="text-lg font-semibold text-white mb-2">Ошибка загрузки</h3>
                <p className="text-white/70 text-sm mb-4">
                  Не удалось загрузить расходники
                  {process.env.NODE_ENV === 'development' && (
                    <>
                      <br />
                      <span className="text-xs text-red-300">
                        Debug: {error.message}
                        <br />
                        User type: {user?.organization?.type}
                      </span>
                    </>
                  )}
                </p>
                <Button
                  onClick={() => refetch()}
                  className="bg-gradient-to-r from-purple-500 to-purple-600 hover:from-purple-600 hover:to-purple-700 text-white"
                >
                  Попробовать снова
                </Button>
              </div>
            </div>
          ) : editableSupplies.length === 0 ? (
            <div className="h-full flex items-center justify-center">
              <div className="text-center">
                <div className="w-16 h-16 bg-white/10 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Package className="w-8 h-8 text-white/50" />
                </div>
                <h3 className="text-lg font-semibold text-white mb-2">Пока нет расходников</h3>
                <p className="text-white/70 text-sm mb-4">Расходники появятся автоматически при получении поставок</p>
              </div>
            </div>
          ) : (
            <div className="bg-white/5 rounded-lg border border-white/10 overflow-hidden">
              <table className="w-full">
                <thead className="bg-white/5">
                  <tr>
                    <th className="text-left p-4 text-white font-medium">№</th>
                    <th className="text-left p-4 text-white font-medium">Фото</th>
                    <th className="text-left p-4 text-white font-medium">Название</th>
                    <th className="text-left p-4 text-white font-medium">Остаток</th>
                    <th className="text-left p-4 text-white font-medium">Единица</th>
                    <th className="text-left p-4 text-white font-medium">Цена за единицу (₽)</th>
                    <th className="text-left p-4 text-white font-medium">Описание</th>
                    <th className="text-left p-4 text-white font-medium">Действия</th>
                  </tr>
                </thead>
                <tbody>
                  {editableSupplies.map((supply, index) => (
                    <tr
                      key={supply.id || index}
                      className={`border-t border-white/10 hover:bg-white/5 ${
                        supply.hasChanges ? 'bg-blue-500/10' : ''
                      } ${supply.isAvailable ? '' : 'opacity-60'}`}
                    >
                      <td className="p-4 text-white/80">{index + 1}</td>

                      {/* Фото */}
                      <td className="p-4 relative">
                        {supply.imageUrl ? (
                          <div className="relative group w-12 h-12">
                            <Image
                              src={supply.imageUrl}
                              alt={supply.name}
                              width={48}
                              height={48}
                              className="w-12 h-12 object-cover rounded border border-white/20 cursor-pointer transition-all duration-300 group-hover:ring-2 group-hover:ring-purple-400/50"
                            />
                            {/* Увеличенная версия при hover */}
                            <div className="absolute top-0 left-0 opacity-0 group-hover:opacity-100 transition-all duration-300 pointer-events-none z-50 transform group-hover:scale-100 scale-75">
                              <div className="relative">
                                <Image
                                  src={supply.imageUrl}
                                  alt={supply.name}
                                  width={240}
                                  height={240}
                                  className="w-60 h-60 object-cover rounded-lg border-2 border-purple-400 shadow-2xl shadow-purple-500/30 bg-black/90 backdrop-blur"
                                />
                                <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent rounded-lg"></div>
                                <div className="absolute bottom-2 left-2 right-2 bg-black/60 backdrop-blur rounded px-2 py-1">
                                  <p className="text-white text-xs font-medium truncate">{supply.name}</p>
                                </div>
                              </div>
                            </div>
                          </div>
                        ) : (
                          <div className="w-12 h-12 bg-white/10 rounded flex items-center justify-center">
                            <Package className="w-5 h-5 text-white/50" />
                          </div>
                        )}
                      </td>

                      {/* Название */}
                      <td className="p-4">
                        <span className="text-white font-medium">{supply.name}</span>
                      </td>

                      {/* Остаток на складе */}
                      <td className="p-4">
                        <div className="flex items-center gap-2">
                          <span
                            className={`text-sm font-medium ${supply.isAvailable ? 'text-green-400' : 'text-red-400'}`}
                          >
                            {supply.warehouseStock}
                          </span>
                          {!supply.isAvailable && (
                            <span className="px-2 py-1 rounded-full bg-red-500/20 text-red-300 text-xs">
                              Нет в наличии
                            </span>
                          )}
                        </div>
                      </td>

                      {/* Единица измерения */}
                      <td className="p-4">
                        <span className="text-white/80">{supply.unit}</span>
                      </td>

                      {/* Цена за единицу */}
                      <td className="p-4">
                        {supply.isEditing ? (
                          <Input
                            type="number"
                            step="0.01"
                            min="0"
                            value={supply.pricePerUnit}
                            onChange={(e) => updateField(supply.id, 'pricePerUnit', e.target.value)}
                            className="bg-white/5 border-white/20 text-white"
                            placeholder="Не установлена"
                          />
                        ) : (
                          <span className="text-white/80">
                            {supply.pricePerUnit
                              ? `${parseFloat(supply.pricePerUnit).toLocaleString()} ₽`
                              : 'Не установлена'}
                          </span>
                        )}
                      </td>

                      {/* Описание */}
                      <td className="p-4">
                        <span className="text-white/80">{supply.description || '—'}</span>
                      </td>

                      {/* Действия */}
                      <td className="p-4">
                        <div className="flex gap-2">
                          {supply.isEditing ? (
                            <>
                              <Button
                                size="sm"
                                onClick={() => {
                                  saveAllChanges()
                                }}
                                disabled={isSaving}
                                className="h-8 w-8 p-0 bg-gradient-to-r from-green-500/20 to-emerald-500/20 hover:from-green-500/30 hover:to-emerald-500/30 border border-green-500/30 hover:border-green-400/50 text-green-300 hover:text-white transition-all duration-200 shadow-lg shadow-green-500/10 hover:shadow-green-500/20 disabled:opacity-50 disabled:cursor-not-allowed"
                                title="Сохранить"
                              >
                                <Check className="w-4 h-4" />
                              </Button>
                              <Button
                                size="sm"
                                onClick={() => cancelEditing(supply.id)}
                                className="h-8 w-8 p-0 bg-gradient-to-r from-red-500/20 to-red-600/20 hover:from-red-500/30 hover:to-red-600/30 border border-red-500/30 hover:border-red-400/50 text-red-300 hover:text-white transition-all duration-200 shadow-lg shadow-red-500/10 hover:shadow-red-500/20"
                                title="Отменить"
                              >
                                <X className="w-4 h-4" />
                              </Button>
                            </>
                          ) : (
                            <Button
                              size="sm"
                              onClick={() => startEditing(supply.id)}
                              className="h-8 w-8 p-0 bg-gradient-to-r from-purple-500/20 to-pink-500/20 hover:from-purple-500/30 hover:to-pink-500/30 border border-purple-500/30 hover:border-purple-400/50 text-purple-300 hover:text-white transition-all duration-200 shadow-lg shadow-purple-500/10 hover:shadow-purple-500/20"
                              title="Редактировать цену"
                            >
                              <Edit className="w-4 h-4" />
                            </Button>
                          )}
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </div>
      </Card>
    </div>
  )
}