// @ts-nocheck
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { FolderOpen, FileText, Clock, CheckCircle, Edit, Copy, Trash2 } from 'lucide-react'
import { useState } from 'react'
import LoadingSpinner from '@/components/common/LoadingSpinner'
import Button from '@/components/common/Button'
import Modal from '@/components/common/Modal'
import { useNavigate } from 'react-router-dom'
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 Dashboard() {
  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 })
        .limit(10)
      
      if (error) throw error
      
      // Calcular progresso real baseado em documentos
      const projetosComProgresso = await Promise.all(
        ((data as any) || []).map(async (projeto: any) => {
          // Buscar total de tópicos do template
          const { count: totalTopicos } = await supabase
            .from('templates_topicos')
            .select('*', { count: 'exact' })
          
          // Buscar documentos do projeto
          const { data: documentos, count: totalDocumentos } = await supabase
            .from('documentos_auto_indexados')
            .select('secao_numero', { count: 'exact' })
            .eq('databook_id', (projeto as any).id)
          
          // Contar seções únicas com documentos
          const secoesUnicas = new Set(documentos?.map(d => d.secao_numero).filter(Boolean))
          const secoesComDocs = secoesUnicas.size
          
          // Calcular percentual
          const progresso = (totalTopicos && totalTopicos > 0)
            ? Math.round((secoesComDocs / totalTopicos) * 100)
            : 0
          
          console.log(`Projeto ${projeto.numero_projeto}:`, {
            totalTopicos,
            totalDocumentos,
            secoesComDocs,
            progresso
          })
          
          // Atualizar progresso no banco se mudou
          if (progresso !== projeto.progresso_percentual) {
            await supabase
              .from('projetos')
              .update({ progresso_percentual: progresso } as any)
              .eq('id', projeto.id)
          }
          
          return {
            ...projeto,
            progresso_percentual: progresso
          }
        })
      )
      
      return projetosComProgresso
    },
  })
  
  const { data: templates } = useQuery({
    queryKey: ['templates-count'],
    queryFn: async () => {
      const { data, error } = await supabase
        .from('templates_customizados')
        .select('id', { count: 'exact' })
        .eq('ativo', true)
      
      if (error) throw error
      return data
    },
  })
  
  const deleteMutation = useMutation({
    mutationFn: deleteDatabook,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['projetos'] })
      toast.success('Projeto deletado com sucesso')
      setDeleteModalOpen(false)
      setProjetoToDelete(null)
    },
    onError: () => {
      toast.error('Erro ao deletar projeto')
    },
  })
  
  const handleDelete = (projeto: any) => {
    setProjetoToDelete(projeto)
    setDeleteModalOpen(true)
  }
  
  const confirmDelete = () => {
    if (projetoToDelete) {
      deleteMutation.mutate(projetoToDelete.id)
    }
  }
  
  const handleEdit = (projeto: any) => {
    // Navegar para página de edição (a ser implementada)
    navigate(`/databook/${projeto.id}/editar`)
  }
  
  const handleClone = async (projeto: any) => {
    try {
      // Buscar dados completos do projeto
      const { data: projetoCompleto } = await supabase
        .from('projetos')
        .select('*, databooks_mestres(*)')
        .eq('id', projeto.id)
        .single()
      
      if (!projetoCompleto) {
        toast.error('Projeto não encontrado')
        return
      }
      
      // Criar cópia do projeto
      const { data: novoProjeto } = await supabase
        .from('projetos')
        .insert([{
          numero_projeto: `${projeto.numero_projeto}-COPIA`,
          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 (novoProjeto && projetoCompleto.databooks_mestres) {
        // Copiar databook mestre
        const databookMestre = projetoCompleto.databooks_mestres
        await supabase
          .from('databooks_mestres')
          .insert([{
            projeto_id: novoProjeto.id,
            cliente_nome: databookMestre.cliente_nome,
            cliente_contato: databookMestre.cliente_contato,
            cliente_email: databookMestre.cliente_email,
            cliente_telefone: databookMestre.cliente_telefone,
            produto_nome: databookMestre.produto_nome,
            produto_tipo: databookMestre.produto_tipo,
            produto_descricao: databookMestre.produto_descricao,
            produto_normas: databookMestre.produto_normas,
            numero_projeto: `${databookMestre.numero_projeto}-COPIA`,
            ordem_compra: databookMestre.ordem_compra,
            cor_primaria: databookMestre.cor_primaria,
            cor_secundaria: databookMestre.cor_secundaria,
            titulo_principal: databookMestre.titulo_principal,
            subtitulo: databookMestre.subtitulo,
            tamanho_pagina: databookMestre.tamanho_pagina,
            orientacao: databookMestre.orientacao,
          } as any])
      }
      
      queryClient.invalidateQueries({ queryKey: ['projetos'] })
      toast.success('Projeto clonado com sucesso!')
    } catch (error) {
      console.error('Erro ao clonar projeto:', error)
      toast.error('Erro ao clonar projeto')
    }
  }
  
  const stats = [
    {
      name: 'Total Projetos',
      value: projetos?.length || 0,
      icon: FolderOpen,
      color: 'bg-blue-500',
    },
    {
      name: 'Em Andamento',
      value: projetos?.filter(p => p.status === 'em_andamento').length || 0,
      icon: Clock,
      color: 'bg-yellow-500',
    },
    {
      name: 'Finalizados',
      value: projetos?.filter(p => p.status === 'finalizado').length || 0,
      icon: CheckCircle,
      color: 'bg-green-500',
    },
    {
      name: 'Templates',
      value: templates?.length || 0,
      icon: FileText,
      color: 'bg-purple-500',
    },
  ]
  
  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">
        <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100">Dashboard</h1>
        <Button onClick={() => navigate('/databook/novo')}>
          Novo Databook
        </Button>
      </div>
      
      {/* Stats Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        {stats.map((stat) => (
          <div key={stat.name} className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-gray-600 dark:text-gray-400">{stat.name}</p>
                <p className="text-3xl font-bold text-gray-900 dark:text-gray-100 mt-2">{stat.value}</p>
              </div>
              <div className={`${stat.color} p-3 rounded-lg`}>
                <stat.icon className="text-white" size={24} />
              </div>
            </div>
          </div>
        ))}
      </div>
      
      {/* Recent Projects */}
      <div className="bg-white dark:bg-gray-800 rounded-lg shadow">
        <div className="p-6 border-b border-gray-200 dark:border-gray-700">
          <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">Projetos Recentes</h2>
        </div>
        <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="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>
                    </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 rounded-full h-2 mr-2">
                          <div
                            className="bg-primary h-2 rounded-full"
                            style={{ width: `${projeto.progresso_percentual}%` }}
                          ></div>
                        </div>
                        <span className="text-sm text-gray-600 dark:text-gray-300">{projeto.progresso_percentual}%</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 hover:text-blue-800 p-1 hover:bg-blue-50 rounded transition-colors"
                          title="Ver detalhes"
                        >
                          <FileText size={18} />
                        </button>
                        <button 
                          onClick={() => handleEdit(projeto)}
                          className="text-blue-600 hover:text-blue-800 p-1 hover:bg-blue-50 rounded transition-colors"
                          title="Editar"
                        >
                          <Edit size={18} />
                        </button>
                        <button 
                          onClick={() => handleClone(projeto)}
                          className="text-green-600 hover:text-green-800 p-1 hover:bg-green-50 rounded transition-colors"
                          title="Clonar"
                        >
                          <Copy size={18} />
                        </button>
                        <button 
                          onClick={() => handleDelete(projeto)}
                          className="text-red-600 hover:text-red-800 p-1 hover:bg-red-50 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">
                    Nenhum projeto 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 Projeto"
      >
        <div className="space-y-4">
          <p className="text-gray-600">
            Tem certeza que deseja deletar o projeto <strong>{projetoToDelete?.nome_projeto}</strong>?
          </p>
          <p className="text-sm 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>
  )
}

