"use client"

import { useState, useEffect, useMemo } from 'react'
import { useQuery, useMutation } from '@apollo/client'
import { Card } from '@/components/ui/card'
import Image from 'next/image'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { 
  AlertDialog, 
  AlertDialogAction, 
  AlertDialogCancel, 
  AlertDialogContent, 
  AlertDialogDescription, 
  AlertDialogFooter, 
  AlertDialogHeader, 
  AlertDialogTitle, 
  AlertDialogTrigger 
} from '@/components/ui/alert-dialog'
import { Plus, Trash2, Save, X, Edit, Upload, Check } from 'lucide-react'
import { toast } from "sonner"
import { useAuth } from '@/hooks/useAuth'
import { GET_MY_SUPPLIES } from '@/graphql/queries'
import { CREATE_SUPPLY, UPDATE_SUPPLY, DELETE_SUPPLY } from '@/graphql/mutations'

interface Supply {
  id: string
  name: string
  description?: string
  price: number
  imageUrl?: string
  createdAt: string
  updatedAt: string
}

interface EditableSupply {
  id?: string // undefined для новых записей
  name: string
  description: string
  price: string
  imageUrl: string
  imageFile?: File
  isNew: boolean
  isEditing: boolean
  hasChanges: boolean
}

interface PendingChange extends EditableSupply {
  isDeleted?: boolean
}

export function SuppliesTab() {
  const { user } = useAuth()
  const [editableSupplies, setEditableSupplies] = useState<EditableSupply[]>([])
  const [pendingChanges, setPendingChanges] = useState<PendingChange[]>([])
  const [isSaving, setIsSaving] = useState(false)
  const [isInitialized, setIsInitialized] = useState(false)

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

  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 || '',
        price: supply.price.toString(),
        imageUrl: supply.imageUrl || '',
        isNew: false,
        isEditing: false,
        hasChanges: false
      }))
      
      setEditableSupplies(convertedSupplies)
      setPendingChanges([])
      setIsInitialized(true)
    }
  }, [data, isInitialized])

  // Добавить новую строку
  const addNewRow = () => {
    const tempId = `temp-${Date.now()}-${Math.random()}`
    const newRow: EditableSupply = {
      id: tempId,
      name: '',
      description: '',
      price: '',
      imageUrl: '',
      isNew: true,
      isEditing: true,
      hasChanges: false
    }
    setEditableSupplies(prev => [...prev, newRow])
  }

  // Удалить строку
  const removeRow = async (supplyId: string, isNew: boolean) => {
    if (isNew) {
      // Просто удаляем из массива если это новая строка
      setEditableSupplies(prev => prev.filter(s => s.id !== supplyId))
    } else {
      // Удаляем существующую запись сразу
      try {
        await deleteSupply({ 
          variables: { id: supplyId },
          update: (cache, { data }) => {
            // Обновляем кэш Apollo Client
            const existingData = cache.readQuery({ query: GET_MY_SUPPLIES }) as { mySupplies: Supply[] } | null
            if (existingData && existingData.mySupplies) {
              cache.writeQuery({
                query: GET_MY_SUPPLIES,
                data: {
                  mySupplies: existingData.mySupplies.filter((s: Supply) => s.id !== supplyId)
                }
              })
            }
          }
        })
        
        // Удаляем из локального состояния по ID, а не по индексу
        setEditableSupplies(prev => prev.filter(s => s.id !== supplyId))
        toast.success('Расходник успешно удален')
      } catch (error) {
        console.error('Error deleting supply:', error)
        toast.error('Ошибка при удалении расходника')
      }
    }
  }

  // Начать редактирование существующей строки
  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
    
    if (supply.isNew) {
      // Удаляем новую строку
      setEditableSupplies(prev => prev.filter(s => s.id !== supplyId))
    } else {
      // Возвращаем к исходному состоянию
      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 || '',
                  price: originalSupply.price.toString(),
                  imageUrl: originalSupply.imageUrl || '',
                  isNew: false,
                  isEditing: false,
                  hasChanges: false
                }
              : s
          )
        )
      }
    }
  }

  // Обновить поле
  const updateField = (supplyId: string, field: keyof EditableSupply, value: string | File) => {
    setEditableSupplies(prev => 
      prev.map((supply) => {
        if (supply.id !== supplyId) return supply
        
        const updated = { ...supply, hasChanges: true }
        if (field === 'imageFile' && value instanceof File) {
          updated.imageFile = value
          updated.imageUrl = URL.createObjectURL(value)
        } else if (typeof value === 'string') {
          if (field === 'name') updated.name = value
          else if (field === 'description') updated.description = value
          else if (field === 'price') updated.price = value
          else if (field === 'imageUrl') updated.imageUrl = value
        }
        return updated
      })
    )
  }

  // Загрузка изображения
  const uploadImageAndGetUrl = async (file: File): Promise<string> => {
    if (!user?.id) throw new Error('User not found')

    const formData = new FormData()
    formData.append('file', file)
    formData.append('userId', user.id)
    formData.append('type', 'supply')

    const response = await fetch('/api/upload-service-image', {
      method: 'POST',
      body: formData
    })

    if (!response.ok) {
      throw new Error('Failed to upload image')
    }

    const result = await response.json()
    return result.url
  }

  // Сохранить все изменения
  const saveAllChanges = async () => {
    setIsSaving(true)
    try {
      const suppliesToSave = editableSupplies.filter(s => {
        if (s.isNew) {
          // Для новых записей проверяем что обязательные поля заполнены
          return s.name.trim() && s.price
        }
        // Для существующих записей проверяем флаг изменений
        return s.hasChanges
      })
      
      console.log('Supplies to save:', suppliesToSave.length, suppliesToSave)
      
      for (const supply of suppliesToSave) {
        if (!supply.name.trim() || !supply.price) {
          toast.error(`Заполните обязательные поля для всех расходников`)
          setIsSaving(false)
          return
        }

        let imageUrl = supply.imageUrl

        // Загружаем изображение если выбрано
        if (supply.imageFile) {
          imageUrl = await uploadImageAndGetUrl(supply.imageFile)
        }

        const input = {
          name: supply.name,
          description: supply.description || undefined,
          price: parseFloat(supply.price),
          imageUrl: imageUrl || undefined
        }

        if (supply.isNew) {
          await createSupply({ 
            variables: { input },
            update: (cache, { data }) => {
              if (data?.createSupply?.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, data.createSupply.supply]
                    }
                  })
                }
              }
            }
          })
        } else if (supply.id) {
          await updateSupply({ 
            variables: { id: supply.id, input },
            update: (cache, { data }) => {
              if (data?.updateSupply?.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.updateSupply.supply.id ? data.updateSupply.supply : s
                      )
                    }
                  })
                }
              }
            }
          })
        }
      }

      // Удаления теперь происходят сразу в removeRow, так что здесь обрабатываем только обновления

      toast.success('Все изменения успешно сохранены')
      setPendingChanges([])
    } catch (error) {
      console.error('Error saving changes:', error)
      toast.error('Ошибка при сохранении изменений')
    } finally {
      setIsSaving(false)
    }
  }

  // Проверяем есть ли несохраненные изменения
  const hasUnsavedChanges = useMemo(() => {
    return editableSupplies.some(s => {
      if (s.isNew) {
        // Для новых записей проверяем что есть данные для сохранения
        return s.name.trim() || s.price || s.description.trim()
      }
      return 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">
            <Button 
              onClick={addNewRow}
              className="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white border-0 shadow-lg shadow-purple-500/25 hover:shadow-purple-500/40 transition-all duration-300 hover:scale-105"
            >
              <Plus className="w-4 h-4 mr-2" />
              Добавить расходник
            </Button>
            
            {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">
                  Не удалось загрузить расходники
                </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">
                  <Plus 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>
                <Button 
                  onClick={addNewRow}
                  className="bg-gradient-to-r from-purple-500 to-purple-600 hover:from-purple-600 hover:to-purple-700 text-white"
                >
                  <Plus className="w-4 h-4 mr-2" />
                  Добавить расходник
                </Button>
              </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>
                  </tr>
                </thead>
                <tbody>
                  {editableSupplies.map((supply, index) => (
                    <tr key={supply.id || index} className={`border-t border-white/10 hover:bg-white/5 ${supply.isNew || supply.hasChanges ? 'bg-blue-500/10' : ''}`}>
                      <td className="p-4 text-white/80">{index + 1}</td>
                      
                      {/* Фото */}
                      <td className="p-4 relative">
                        {supply.isEditing ? (
                          <div className="flex items-center gap-3">
                            <Input
                              type="file"
                              accept="image/*"
                              onChange={(e) => {
                                const file = e.target.files?.[0]
                                if (file) {
                                  updateField(supply.id!, 'imageFile', file)
                                }
                              }}
                              className="bg-white/5 border-white/20 text-white text-xs file:bg-gradient-to-r file:from-purple-500 file:to-pink-500 file:text-white file:border-0 file:rounded file:px-2 file:py-1 file:mr-2 file:text-xs flex-1"
                            />
                            {supply.imageUrl && (
                              <div className="relative group w-12 h-12 flex-shrink-0">
                                <Image 
                                  src={supply.imageUrl} 
                                  alt="Preview"
                                  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="Preview"
                                      width={200}
                                      height={200}
                                      className="w-50 h-50 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>
                                </div>
                              </div>
                            )}
                          </div>
                        ) : 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">
                            <Upload className="w-5 h-5 text-white/50" />
                          </div>
                        )}
                      </td>
                      
                      {/* Название */}
                      <td className="p-4">
                        {supply.isEditing ? (
                          <Input
                            value={supply.name}
                            onChange={(e) => updateField(supply.id!, 'name', e.target.value)}
                            className="bg-white/5 border-white/20 text-white"
                            placeholder="Название расходника"
                          />
                        ) : (
                          <span className="text-white font-medium">{supply.name}</span>
                        )}
                      </td>
                      
                      {/* Цена */}
                      <td className="p-4">
                        {supply.isEditing ? (
                          <Input
                            type="number"
                            step="0.01"
                            min="0"
                            value={supply.price}
                            onChange={(e) => updateField(supply.id!, 'price', e.target.value)}
                            className="bg-white/5 border-white/20 text-white"
                            placeholder="0.00"
                          />
                        ) : (
                          <span className="text-white/80">
                            {supply.price ? parseFloat(supply.price).toLocaleString() : '0'} ₽
                          </span>
                        )}
                      </td>
                      
                      {/* Описание */}
                      <td className="p-4">
                        {supply.isEditing ? (
                          <Input
                            value={supply.description}
                            onChange={(e) => updateField(supply.id!, 'description', e.target.value)}
                            className="bg-white/5 border-white/20 text-white"
                            placeholder="Описание расходника"
                          />
                        ) : (
                          <span className="text-white/80">{supply.description || '—'}</span>
                        )}
                      </td>
                      
                      {/* Действия */}
                      <td className="p-4">
                        <div className="flex gap-2">
                          {supply.isEditing ? (
                            <>
                              <Button
                                size="sm"
                                onClick={() => {
                                  // Сохраняем только этот расходник если заполнены обязательные поля
                                  if (supply.name.trim() && supply.price) {
                                    saveAllChanges()
                                  } else {
                                    toast.error('Заполните обязательные поля')
                                  }
                                }}
                                disabled={!supply.name.trim() || !supply.price || 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>
                          )}
                          
                          <AlertDialog>
                            <AlertDialogTrigger asChild>
                              <Button
                                size="sm"
                                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="Удалить"
                              >
                                <Trash2 className="w-4 h-4" />
                              </Button>
                            </AlertDialogTrigger>
                            <AlertDialogContent className="bg-gradient-to-br from-red-900/95 via-red-800/95 to-red-900/95 backdrop-blur-xl border border-red-500/30 text-white shadow-2xl shadow-red-500/20">
                              <AlertDialogHeader>
                                <AlertDialogTitle className="text-xl font-bold bg-gradient-to-r from-red-300 to-red-300 bg-clip-text text-transparent">
                                  Подтвердите удаление
                                </AlertDialogTitle>
                                <AlertDialogDescription className="text-red-200">
                                  Вы действительно хотите удалить расходник &ldquo;{supply.name}&rdquo;? Это действие необратимо.
                                </AlertDialogDescription>
                              </AlertDialogHeader>
                              <AlertDialogFooter className="gap-3">
                                <AlertDialogCancel className="border-red-400/30 text-red-200 hover:bg-red-500/10 hover:border-red-300 transition-all duration-300">
                                  Отмена
                                </AlertDialogCancel>
                                <AlertDialogAction
                                  onClick={() => removeRow(supply.id!, supply.isNew)}
                                  className="bg-gradient-to-r from-red-600 to-red-700 hover:from-red-700 hover:to-red-800 text-white border-0 shadow-lg shadow-red-500/25 hover:shadow-red-500/40 transition-all duration-300"
                                >
                                  Удалить
                                </AlertDialogAction>
                              </AlertDialogFooter>
                            </AlertDialogContent>
                          </AlertDialog>
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </div>
      </Card>


    </div>
  )
}