// @ts-nocheck
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { FolderOpen, Plus, Edit, Copy, Trash2, Eye } from 'lucide-react'
import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import LoadingSpinner from '@/components/common/LoadingSpinner'
import Button from '@/components/common/Button'
import Modal from '@/components/common/Modal'
import { supabase } from '@/lib/supabase'
import { deleteDatabook } from '@/lib/mutations'
import { toast } from '@/lib/toast'

// Função para obter cores do status
const getStatusColor = (status: string) => {
  switch (status) {
    case 'finalizado':
      return 'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-400'
    case 'revisao':
      return 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-400'
    case 'arquivado':
      return 'bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-400'
    case 'em_andamento':
      return 'bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-400'
    case 'cancelado':
      return 'bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-400'
    case 'rascunho':
    default:
      return 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-400'
  }
}

const getStatusLabel = (status: string) => {
  switch (status) {
    case 'rascunho': return 'Rascunho'
    case 'em_andamento': return 'Em Andamento'
    case 'finalizado': return 'Concluído'
    case 'revisao': return 'Em Revisão'
    case 'arquivado': return 'Arquivado'
    case 'cancelado': return 'Cancelado'
    default: return status
  }
}

export default function Databooks() {
  const navigate = useNavigate()
  const queryClient = useQueryClient()
  const [deleteModalOpen, setDeleteModalOpen] = useState(false)
  const [projetoToDelete, setProjetoToDelete] = useState<any>(null)
  
  const { data: projetos, isLoading } = useQuery({
    queryKey: ['projetos'],
    queryFn: async () => {
      const { data, error } = await supabase
        .from('projetos')
        .select('*, clientes(nome)')
        .order('created_at', { ascending: false })
      
      if (error) throw error
      return data
    },
  })
  
  const deleteMutation = useMutation({
    mutationFn: deleteDatabook,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['projetos'] })
      toast.success('Databook deletado com sucesso')
      setDeleteModalOpen(false)
      setProjetoToDelete(null)
    },
    onError: () => {
      toast.error('Erro ao deletar databook')
    },
  })
  
  const handleDelete = (projeto: any) => {
    setProjetoToDelete(projeto)
    setDeleteModalOpen(true)
  }
  
  const confirmDelete = () => {
    if (projetoToDelete) {
      deleteMutation.mutate(projetoToDelete.id)
    }
  }
  
  const handleClone = async (projeto: any) => {
    try {
      // Buscar dados completos do projeto
      const { data: projetoCompleto, error: fetchError } = await supabase
        .from('projetos')
        .select('*, databooks_mestres(*)')
        .eq('id', projeto.id)
        .single()
      
      if (fetchError || !projetoCompleto) {
        toast.error('Projeto não encontrado')
        return
      }
      
      // Gerar número único para o projeto clonado
      const timestamp = Date.now()
      const numeroProjetoUnico = `${projeto.numero_projeto}-COPIA-${timestamp}`
      
      // Criar cópia do projeto
      const { data: novoProjeto, error: insertError } = await supabase
        .from('projetos')
        .insert([{
          numero_projeto: numeroProjetoUnico,
          nome_projeto: `${projeto.nome_projeto} (Cópia)`,
          cliente_id: projeto.cliente_id,
          template_id: projeto.template_id,
          status: 'rascunho',
          progresso_percentual: 0,
        } as any])
        .select()
        .single()
      
      if (insertError || !novoProjeto) {
        throw insertError
      }
      
      // Verificar se existe databook mestre
      const databookMestre = Array.isArray(projetoCompleto.databooks_mestres) 
        ? projetoCompleto.databooks_mestres[0] 
        : projetoCompleto.databooks_mestres
      
      if (databookMestre) {
        // Copiar databook mestre apenas com campos válidos
        const { error: mestreError } = await supabase
          .from('databooks_mestres')
          .insert([{
            projeto_id: novoProjeto.id,
            cliente_nome: databookMestre.cliente_nome || null,
            cliente_contato: databookMestre.cliente_contato || null,
            cliente_email: databookMestre.cliente_email || null,
            cliente_telefone: databookMestre.cliente_telefone || null,
            produto_nome: databookMestre.produto_nome || 'Produto',
            produto_tipo: databookMestre.produto_tipo || null,
            produto_descricao: databookMestre.produto_descricao || null,
            produto_normas: databookMestre.produto_normas || null,
            numero_projeto: numeroProjetoUnico,
            ordem_compra: databookMestre.ordem_compra || null,
            cor_primaria: databookMestre.cor_primaria || null,
            cor_secundaria: databookMestre.cor_secundaria || null,
            titulo_principal: databookMestre.titulo_principal || null,
            subtitulo: databookMestre.subtitulo || null,
            tamanho_pagina: databookMestre.tamanho_pagina || 'A4',
            orientacao: databookMestre.orientacao || 'retrato',
          } as any])
        
        if (mestreError) {
          console.error('Erro ao copiar databook mestre:', mestreError)
        }
      }
      
      queryClient.invalidateQueries({ queryKey: ['projetos'] })
      toast.success('Databook clonado com sucesso!')
    } catch (error: any) {
      console.error('Erro ao clonar databook:', error)
      toast.error(error?.message || 'Erro ao clonar databook')
    }
  }
  
  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">Databooks</h1>
          <p className="text-gray-600 dark:text-gray-400 mt-1">
            Gerencie todos os seus databooks
          </p>
        </div>
        <Button onClick={() => navigate('/databook/novo')}>
          <Plus size={20} className="mr-2" />
          Novo Databook
        </Button>
      </div>
      
      {/* Lista de Databooks */}
      <div className="bg-white dark:bg-gray-800 rounded-lg shadow">
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead className="bg-gray-50 dark:bg-gray-900">
              <tr>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                  Projeto
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                  Cliente
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                  Status
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                  Progresso
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                  Ações
                </th>
              </tr>
            </thead>
            <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
              {projetos && projetos.length > 0 ? (
                projetos.map((projeto) => (
                  <tr key={projeto.id} className="hover:bg-gray-50 dark:hover:bg-gray-700">
                    <td className="px-6 py-4 whitespace-nowrap">
                      <div className="flex items-center">
                        <FolderOpen className="text-primary mr-3" size={20} />
                        <div>
                          <div className="text-sm font-medium text-gray-900 dark:text-gray-100">{projeto.nome_projeto}</div>
                          <div className="text-sm text-gray-500 dark:text-gray-400">{projeto.numero_projeto}</div>
                        </div>
                      </div>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                      {projeto.clientes?.nome || '-'}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      <span className={`px-2 py-1 text-xs font-medium rounded-full ${getStatusColor(projeto.status)}`}>
                        {getStatusLabel(projeto.status)}
                      </span>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      <div className="flex items-center">
                        <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 mr-2">
                          <div
                            className="bg-primary h-2 rounded-full"
                            style={{ width: `${projeto.progresso_percentual || 0}%` }}
                          ></div>
                        </div>
                        <span className="text-sm text-gray-600 dark:text-gray-300">{projeto.progresso_percentual || 0}%</span>
                      </div>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm">
                      <div className="flex items-center gap-2">
                        <button 
                          onClick={() => navigate(`/databook/${projeto.id}`)}
                          className="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 p-1 hover:bg-blue-50 dark:hover:bg-blue-900/30 rounded transition-colors"
                          title="Ver detalhes"
                        >
                          <Eye size={18} />
                        </button>
                        <button 
                          onClick={() => navigate(`/databook/${projeto.id}/editar`)}
                          className="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 p-1 hover:bg-blue-50 dark:hover:bg-blue-900/30 rounded transition-colors"
                          title="Editar"
                        >
                          <Edit size={18} />
                        </button>
                        <button 
                          onClick={() => handleClone(projeto)}
                          className="text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-300 p-1 hover:bg-green-50 dark:hover:bg-green-900/30 rounded transition-colors"
                          title="Clonar"
                        >
                          <Copy size={18} />
                        </button>
                        <button 
                          onClick={() => handleDelete(projeto)}
                          className="text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300 p-1 hover:bg-red-50 dark:hover:bg-red-900/30 rounded transition-colors"
                          title="Deletar"
                        >
                          <Trash2 size={18} />
                        </button>
                      </div>
                    </td>
                  </tr>
                ))
              ) : (
                <tr>
                  <td colSpan={5} className="px-6 py-12 text-center text-gray-500 dark:text-gray-400">
                    Nenhum databook encontrado. Crie seu primeiro databook!
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>
      
      {/* Modal de Confirmação de Exclusão */}
      <Modal
        isOpen={deleteModalOpen}
        onClose={() => setDeleteModalOpen(false)}
        title="Deletar Databook"
      >
        <div className="space-y-4">
          <p className="text-gray-600 dark:text-gray-400">
            Tem certeza que deseja deletar o databook <strong>{projetoToDelete?.nome_projeto}</strong>?
          </p>
          <p className="text-sm text-gray-500 dark:text-gray-500">
            Esta ação não pode ser desfeita e todos os dados relacionados serão perdidos.
          </p>
          <div className="flex justify-end gap-3">
            <Button
              variant="outline"
              onClick={() => setDeleteModalOpen(false)}
            >
              Cancelar
            </Button>
            <Button
              variant="primary"
              onClick={confirmDelete}
              isLoading={deleteMutation.isPending}
              className="bg-red-600 hover:bg-red-700"
            >
              Deletar
            </Button>
          </div>
        </div>
      </Modal>
    </div>
  )
}


