// @ts-nocheck
import { useState } from 'react'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { Plus, Edit, Trash2, GripVertical, Save, X } from 'lucide-react'
import Button from '@/components/common/Button'
import Input from '@/components/common/Input'
import Modal from '@/components/common/Modal'
import LoadingSpinner from '@/components/common/LoadingSpinner'
import { supabase } from '@/lib/supabase'
import { toast } from '@/lib/toast'

interface Topico {
  id: string
  numero_topico: string
  titulo: string
  descricao: string
  obrigatorio: boolean
  ordem: number
  categoria: string
  categoria_cor?: string
}

export default function TopicosGestao() {
  const queryClient = useQueryClient()
  const [modalOpen, setModalOpen] = useState(false)
  const [editingTopico, setEditingTopico] = useState<Topico | null>(null)
  const [deleteModalOpen, setDeleteModalOpen] = useState(false)
  const [topicoToDelete, setTopicoToDelete] = useState<Topico | null>(null)
  const [draggedItem, setDraggedItem] = useState<Topico | null>(null)
  
  const [formData, setFormData] = useState({
    numero_topico: '',
    titulo: '',
    descricao: '',
    obrigatorio: false,
    categoria: '',
  })
  
  const { data: topicos, isLoading } = useQuery({
    queryKey: ['topicos'],
    queryFn: async () => {
      const { data, error } = await supabase
        .from('templates_topicos')
        .select('*')
        .order('ordem', { ascending: true })
      
      if (error) throw error
      
      return data as Topico[]
    },
  })
  
  
  const { data: categorias } = useQuery({
    queryKey: ['categorias'],
    queryFn: async () => {
      const { data, error } = await supabase
        .from('categorias')
        .select('*')
        .eq('ativo', true)
        .order('nome', { ascending: true })
      
      if (error) throw error
      return data
    },
  })
  
  const createMutation = useMutation({
    mutationFn: async (data: typeof formData) => {
      const maxOrdem = topicos?.length ? Math.max(...topicos.map(t => t.ordem)) : 0
      const { error } = await supabase
        .from('templates_topicos')
        .insert([{
          ...data,
          ordem: maxOrdem + 1,
        } as any])
      
      if (error) throw error
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['topicos'] })
      toast.success('Tópico criado com sucesso')
      resetForm()
      setModalOpen(false)
    },
    onError: () => {
      toast.error('Erro ao criar tópico')
    },
  })
  
  const updateMutation = useMutation({
    mutationFn: async ({ id, data }: { id: string; data: typeof formData }) => {
      const { error } = await supabase
        .from('templates_topicos')
        .update(data as any)
        .eq('id', id)
      
      if (error) throw error
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['topicos'] })
      toast.success('Tópico atualizado com sucesso')
      resetForm()
      setModalOpen(false)
      setEditingTopico(null)
    },
    onError: () => {
      toast.error('Erro ao atualizar tópico')
    },
  })
  
  const deleteMutation = useMutation({
    mutationFn: async (id: string) => {
      const { error } = await supabase
        .from('templates_topicos')
        .delete()
        .eq('id', id)
      
      if (error) throw error
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['topicos'] })
      toast.success('Tópico deletado com sucesso')
      setDeleteModalOpen(false)
      setTopicoToDelete(null)
    },
    onError: () => {
      toast.error('Erro ao deletar tópico')
    },
  })
  
  const reorderMutation = useMutation({
    mutationFn: async (reorderedTopicos: Topico[]) => {
      const updates = reorderedTopicos.map((topico, index) => 
        supabase
          .from('templates_topicos')
          .update({ ordem: index + 1 } as any)
          .eq('id', topico.id)
      )
      
      await Promise.all(updates)
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['topicos'] })
      toast.success('Ordem atualizada com sucesso')
    },
    onError: () => {
      toast.error('Erro ao atualizar ordem')
    },
  })
  
  const resetForm = () => {
    setFormData({
      numero_topico: '',
      titulo: '',
      descricao: '',
      obrigatorio: false,
      categoria: '',
    })
  }
  
  const handleEdit = (topico: Topico) => {
    setEditingTopico(topico)
    setFormData({
      numero_topico: topico.numero_topico,
      titulo: topico.titulo,
      descricao: topico.descricao || '',
      obrigatorio: topico.obrigatorio,
      categoria: topico.categoria || '',
    })
    setModalOpen(true)
  }
  
  const handleDelete = (topico: Topico) => {
    setTopicoToDelete(topico)
    setDeleteModalOpen(true)
  }
  
  const handleSave = () => {
    if (editingTopico) {
      updateMutation.mutate({ id: editingTopico.id, data: formData })
    } else {
      createMutation.mutate(formData)
    }
  }
  
  const handleDragStart = (topico: Topico) => {
    setDraggedItem(topico)
  }
  
  const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault()
  }
  
  const handleDrop = (targetTopico: Topico) => {
    if (!draggedItem || !topicos) return
    
    const draggedIndex = topicos.findIndex(t => t.id === draggedItem.id)
    const targetIndex = topicos.findIndex(t => t.id === targetTopico.id)
    
    if (draggedIndex === targetIndex) return
    
    const newTopicos = [...topicos]
    newTopicos.splice(draggedIndex, 1)
    newTopicos.splice(targetIndex, 0, draggedItem)
    
    // Renumerar hierarquicamente
    const renumbered = renumberTopicos(newTopicos)
    reorderMutation.mutate(renumbered)
    setDraggedItem(null)
  }
  
  const renumberTopicos = (topicos: Topico[]): Topico[] => {
    let mainCounter = 0
    let currentMain = ''
    const subCounters: { [key: string]: number } = {}
    
    return topicos.map((topico, index) => {
      const parts = topico.numero_topico.split('.')
      const isMainTopic = parts.length === 1
      
      if (isMainTopic) {
        // É um tópico principal (1, 2, 3, etc)
        mainCounter++
        currentMain = mainCounter.toString()
        subCounters[currentMain] = 0
        
        return {
          ...topico,
          numero_topico: currentMain,
          ordem: index + 1,
        }
      } else {
        // É um subtópico (1.1, 1.2, 2.1, etc)
        // Usa o último tópico principal encontrado
        if (!subCounters[currentMain]) {
          subCounters[currentMain] = 0
        }
        subCounters[currentMain]++
        
        return {
          ...topico,
          numero_topico: `${currentMain}.${subCounters[currentMain]}`,
          ordem: index + 1,
        }
      }
    })
  }
  
  const getIndentLevel = (numeroTopico: string): number => {
    const parts = numeroTopico.split('.')
    return (parts.length - 1) * 32 // 32px por nível
  }
  
  if (isLoading) {
    return (
      <div className="flex items-center justify-center h-full">
        <LoadingSpinner size="lg" />
      </div>
    )
  }
  
  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100">Gestão de Tópicos</h1>
          <p className="text-gray-600 dark:text-gray-400 mt-1">Gerencie os tópicos padrão do databook</p>
        </div>
        <div className="flex gap-3">
          <Button onClick={() => {
            resetForm()
            setEditingTopico(null)
            setModalOpen(true)
          }}>
            <Plus size={20} className="mr-2" />
            Novo Tópico
          </Button>
        </div>
      </div>
      
      <div className="bg-white dark:bg-gray-800 rounded-lg shadow">
        <div className="p-6 border-b border-gray-200 dark:border-gray-700">
          <div className="flex items-center justify-between">
            <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">
              Tópicos ({topicos?.length || 0})
            </h2>
            <p className="text-sm text-gray-600 dark:text-gray-400">
              Arraste e solte para reordenar
            </p>
          </div>
        </div>
        
        <div className="divide-y divide-gray-200 dark:divide-gray-700">
          {topicos && topicos.length > 0 ? (
            topicos.map((topico) => (
              <div
                key={topico.id}
                draggable
                onDragStart={() => handleDragStart(topico)}
                onDragOver={handleDragOver}
                onDrop={() => handleDrop(topico)}
                className="p-4 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-move transition-colors"
                style={{ paddingLeft: `${16 + getIndentLevel(topico.numero_topico)}px` }}
              >
                <div className="flex items-center gap-4">
                  <GripVertical className="text-gray-400 dark:text-gray-500 flex-shrink-0" size={20} />
                  
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-3 flex-wrap">
                      <span className="font-mono font-semibold text-primary dark:text-blue-400 flex-shrink-0">
                        {topico.numero_topico}
                      </span>
                      <span className="font-medium text-gray-900 dark:text-gray-100">
                        {topico.titulo}
                      </span>
                      {topico.obrigatorio && (
                        <span className="px-2 py-0.5 text-xs font-medium rounded-full bg-red-100 text-red-800 flex-shrink-0">
                          Obrigatório
                        </span>
                      )}
                      {topico.categoria && (() => {
                        const categoria = categorias?.find((c: any) => c.nome === topico.categoria)
                        const cor = categoria?.cor || '#3B82F6'
                        return (
                          <span 
                            className="px-2 py-0.5 text-xs font-medium rounded-full flex-shrink-0"
                            style={{
                              backgroundColor: `${cor}20`,
                              color: cor
                            }}
                          >
                            {topico.categoria}
                          </span>
                        )
                      })()}
                    </div>
                    {topico.descricao && (
                      <p className="text-sm text-gray-600 mt-1">{topico.descricao}</p>
                    )}
                  </div>
                  
                  <div className="flex items-center gap-2 flex-shrink-0">
                    <button
                      onClick={() => handleEdit(topico)}
                      className="text-blue-600 hover:text-blue-800 p-2 hover:bg-blue-50 rounded transition-colors"
                      title="Editar"
                    >
                      <Edit size={18} />
                    </button>
                    <button
                      onClick={() => handleDelete(topico)}
                      className="text-red-600 hover:text-red-800 p-2 hover:bg-red-50 rounded transition-colors"
                      title="Deletar"
                    >
                      <Trash2 size={18} />
                    </button>
                  </div>
                </div>
              </div>
            ))
          ) : (
            <div className="p-12 text-center text-gray-500">
              Nenhum tópico cadastrado. Crie seu primeiro tópico!
            </div>
          )}
        </div>
      </div>
      
      {/* Modal de Criar/Editar */}
      <Modal
        isOpen={modalOpen}
        onClose={() => {
          setModalOpen(false)
          setEditingTopico(null)
          resetForm()
        }}
        title={editingTopico ? 'Editar Tópico' : 'Novo Tópico'}
      >
        <div className="space-y-4">
          <div className="grid grid-cols-2 gap-4">
            <Input
              label="Número do Tópico"
              value={formData.numero_topico}
              onChange={(e) => setFormData(prev => ({ ...prev, numero_topico: e.target.value }))}
              placeholder="Ex: 1.1"
              required
            />
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Categoria
              </label>
              <select
                value={formData.categoria}
                onChange={(e) => setFormData(prev => ({ ...prev, categoria: e.target.value }))}
                className="input-field"
              >
                <option value="">Selecione uma categoria...</option>
                {categorias?.map((cat: any) => (
                  <option key={cat.id} value={cat.nome}>
                    {cat.nome}
                  </option>
                ))}
              </select>
            </div>
          </div>
          
          <Input
            label="Título"
            value={formData.titulo}
            onChange={(e) => setFormData(prev => ({ ...prev, titulo: e.target.value }))}
            placeholder="Ex: Atestado de Conformidade"
            required
          />
          
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Descrição
            </label>
            <textarea
              value={formData.descricao}
              onChange={(e) => setFormData(prev => ({ ...prev, descricao: e.target.value }))}
              placeholder="Descrição opcional do tópico..."
              className="input-field"
              rows={3}
            />
          </div>
          
          <label className="flex items-center gap-2">
            <input
              type="checkbox"
              checked={formData.obrigatorio}
              onChange={(e) => setFormData(prev => ({ ...prev, obrigatorio: e.target.checked }))}
              className="text-primary focus:ring-primary"
            />
            <span className="text-sm font-medium text-gray-700">
              Tópico obrigatório
            </span>
          </label>
          
          <div className="flex justify-end gap-3 pt-4">
            <Button
              variant="outline"
              onClick={() => {
                setModalOpen(false)
                setEditingTopico(null)
                resetForm()
              }}
            >
              <X size={18} className="mr-2" />
              Cancelar
            </Button>
            <Button
              onClick={handleSave}
              isLoading={createMutation.isPending || updateMutation.isPending}
            >
              <Save size={18} className="mr-2" />
              {editingTopico ? 'Atualizar' : 'Criar'}
            </Button>
          </div>
        </div>
      </Modal>
      
      {/* Modal de Confirmação de Deleção */}
      <Modal
        isOpen={deleteModalOpen}
        onClose={() => setDeleteModalOpen(false)}
        title="Deletar Tópico"
      >
        <div className="space-y-4">
          <p className="text-gray-600 dark:text-gray-400">
            Tem certeza que deseja deletar o tópico{' '}
            <strong>{topicoToDelete?.numero_topico} - {topicoToDelete?.titulo}</strong>?
          </p>
          <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-3">
            <p className="text-sm text-red-800 dark:text-red-200">
              <strong>Atenção:</strong> Esta ação não pode ser desfeita. O tópico será permanentemente deletado.
            </p>
          </div>
          <div className="flex justify-end gap-3">
            <Button
              variant="outline"
              onClick={() => setDeleteModalOpen(false)}
            >
              Cancelar
            </Button>
            <Button
              variant="primary"
              onClick={() => topicoToDelete && deleteMutation.mutate(topicoToDelete.id)}
              isLoading={deleteMutation.isPending}
              className="bg-red-600 hover:bg-red-700"
            >
              Deletar
            </Button>
          </div>
        </div>
      </Modal>
    </div>
  )
}


