// @ts-nocheck
import { useState } from 'react'
import { useParams } from 'react-router-dom'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { 
  FileText, 
  Download, 
  Eye, 
  Upload, 
  Trash2, 
  RotateCw, 
  Image as ImageIcon,
  ChevronRight,
  X
} from 'lucide-react'
import Button from '@/components/common/Button'
import Modal from '@/components/common/Modal'
import LoadingSpinner from '@/components/common/LoadingSpinner'
import DatabookPreview from '@/components/databook/DatabookPreview'
import DesignSelector from '@/components/databook/DesignSelector'
import { supabase } from '@/lib/supabase'
import { toast } from '@/lib/toast'
import { generateDatabookPDF } from '@/lib/pdfGenerator'
import { useDesignConfig } from '@/hooks/useDesignConfig'
import * as pdfjsLib from 'pdfjs-dist'

// Configurar worker do PDF.js
pdfjsLib.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.min.js`

interface Documento {
  id: string
  titulo: string
  arquivo_url: string
  arquivo_tipo: string
  data_documento: string
  tags_usuario: string[]
  ordem_na_secao: number
  arquivo_tamanho?: number // em bytes
  num_paginas?: number
  formato_pagina?: string // A4, A3, etc
  orientacao?: string // retrato ou paisagem
}

export default function DatabookView() {
  const { id } = useParams()
  const queryClient = useQueryClient()
  const [topicoSelecionado, setTopicoSelecionado] = useState<string | null>(null)
  const [previewModalOpen, setPreviewModalOpen] = useState(false)
  const [documentoPreview, setDocumentoPreview] = useState<Documento | null>(null)
  const [previewUrl, setPreviewUrl] = useState<string | null>(null)
  const [uploadModalOpen, setUploadModalOpen] = useState(false)
  const [arquivosSelecionados, setArquivosSelecionados] = useState<File[]>([])
  const [arquivosMap, setArquivosMap] = useState<Map<string, File>>(new Map())
  const [draggedDoc, setDraggedDoc] = useState<Documento | null>(null)
  const [databookPreviewOpen, setDatabookPreviewOpen] = useState(false)
  const [generatingPDF, setGeneratingPDF] = useState(false)
  const [pdfProgress, setPdfProgress] = useState({ progress: 0, message: '' })
  
  // Buscar configuração de design
  const { data: designConfig } = useDesignConfig(id)
  
  // Buscar dados do projeto
  const { data: projeto, isLoading: loadingProjeto } = useQuery({
    queryKey: ['projeto', id],
    queryFn: async () => {
      const { data, error } = await supabase
        .from('projetos')
        .select('*, clientes(nome), databooks_mestres(*), templates_customizados(*)')
        .eq('id', id)
        .single()
      
      if (error) throw error
      return data
    },
    enabled: !!id,
  })
  
  // Buscar tópicos do template
  const { data: topicos } = useQuery({
    queryKey: ['topicos-template', projeto?.template_id],
    queryFn: async () => {
      if (!projeto?.templates_customizados?.topicos_selecionados) return []
      
      const { data, error } = await supabase
        .from('templates_topicos')
        .select('*')
        .in('numero_topico', projeto.templates_customizados.topicos_selecionados)
        .order('ordem', { ascending: true })
      
      if (error) throw error
      return data
    },
    enabled: !!projeto?.template_id,
  })
  
  // Buscar contagem de documentos por seção
  const { data: contagemDocs } = useQuery({
    queryKey: ['contagem-docs', id],
    queryFn: async () => {
      const { data, error } = await supabase
        .from('documentos_auto_indexados')
        .select('secao_numero')
        .eq('databook_id', id)
      
      if (error) throw error
      
      // Contar documentos por seção
      const contagem: { [key: string]: number } = {}
      data.forEach(doc => {
        contagem[doc.secao_numero] = (contagem[doc.secao_numero] || 0) + 1
      })
      return contagem
    },
    enabled: !!id,
  })
  
  // Buscar TODOS os documentos para preview/PDF
  const { data: todosDocumentos } = useQuery({
    queryKey: ['todos-documentos', id],
    queryFn: async () => {
      const { data, error } = await supabase
        .from('documentos_auto_indexados')
        .select('*')
        .eq('databook_id', id)
        .order('secao_numero', { ascending: true })
        .order('ordem_na_secao', { ascending: true })
      
      if (error) throw error
      
      // Agrupar por seção
      const porSecao: { [key: string]: any[] } = {}
      data.forEach(doc => {
        if (!porSecao[doc.secao_numero]) {
          porSecao[doc.secao_numero] = []
        }
        porSecao[doc.secao_numero].push(doc)
      })
      return porSecao
    },
    enabled: !!id,
  })
  
  // Buscar documentos do tópico selecionado
  const { data: documentos, isLoading: loadingDocs } = useQuery({
    queryKey: ['documentos', id, topicoSelecionado],
    queryFn: async () => {
      const { data, error} = await supabase
        .from('documentos_auto_indexados')
        .select('*')
        .eq('databook_id', id)
        .eq('secao_numero', topicoSelecionado)
        .order('ordem_na_secao', { ascending: true })
      
      if (error) throw error
      return data as Documento[]
    },
    enabled: !!id && !!topicoSelecionado,
  })
  
  const uploadMutation = useMutation({
    mutationFn: async (documentos: any[]) => {
      // Tentar inserir com todos os campos
      let { error } = await supabase
        .from('documentos_auto_indexados')
        .insert(documentos as any)
      
      // Se falhar (provavelmente porque as colunas não existem), tentar sem os novos campos
      if (error && error.message.includes('column')) {
        console.warn('Colunas de metadados não existem, inserindo sem elas:', error.message)
        const documentosSemMetadata = documentos.map(({ arquivo_tamanho, num_paginas, formato_pagina, orientacao, ...doc }) => doc)
        const { error: error2 } = await supabase
          .from('documentos_auto_indexados')
          .insert(documentosSemMetadata as any)
        
        if (error2) throw error2
      } else if (error) {
        throw error
      }
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['documentos'] })
      queryClient.invalidateQueries({ queryKey: ['contagem-docs'] })
      queryClient.invalidateQueries({ queryKey: ['todos-documentos'] })
      toast.success('Documentos carregados com sucesso')
      setUploadModalOpen(false)
      setArquivosSelecionados([])
    },
    onError: (error: any) => {
      console.error('Erro no upload:', error)
      toast.error(error.message || 'Erro ao fazer upload')
    },
  })
  
  const deleteMutation = useMutation({
    mutationFn: async (docId: string) => {
      const { error } = await supabase
        .from('documentos_auto_indexados')
        .delete()
        .eq('id', docId)
      
      if (error) throw error
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['documentos'] })
      queryClient.invalidateQueries({ queryKey: ['contagem-docs'] })
      toast.success('Documento deletado com sucesso')
    },
    onError: () => {
      toast.error('Erro ao deletar documento')
    },
  })
  
  // Função para extrair metadados do PDF
  const extractPDFMetadata = async (file: File) => {
    try {
      const arrayBuffer = await file.arrayBuffer()
      const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise
      const numPages = pdf.numPages
      
      // Pegar primeira página para detectar dimensões
      const page = await pdf.getPage(1)
      const viewport = page.getViewport({ scale: 1 })
      const width = viewport.width
      const height = viewport.height
      
      // Detectar orientação
      const orientacao = width > height ? 'paisagem' : 'retrato'
      
      // Detectar formato aproximado (em pontos: 1 ponto = 1/72 polegada)
      // A4: 595 x 842 pontos
      // A3: 842 x 1191 pontos
      // A2: 1191 x 1684 pontos
      // A1: 1684 x 2384 pontos
      const maxDim = Math.max(width, height)
      const minDim = Math.min(width, height)
      
      let formato = 'Custom'
      if (Math.abs(maxDim - 842) < 50 && Math.abs(minDim - 595) < 50) {
        formato = 'A4'
      } else if (Math.abs(maxDim - 1191) < 50 && Math.abs(minDim - 842) < 50) {
        formato = 'A3'
      } else if (Math.abs(maxDim - 1684) < 50 && Math.abs(minDim - 1191) < 50) {
        formato = 'A2'
      } else if (Math.abs(maxDim - 2384) < 50 && Math.abs(minDim - 1684) < 50) {
        formato = 'A1'
      }
      
      return {
        num_paginas: numPages,
        formato_pagina: formato,
        orientacao: orientacao
      }
    } catch (error) {
      console.error('Erro ao extrair metadados do PDF:', error)
      return {
        num_paginas: 1,
        formato_pagina: 'A4',
        orientacao: 'retrato'
      }
    }
  }

  const handleUpload = async () => {
    if (arquivosSelecionados.length === 0 || !topicoSelecionado || !id) return
    
    try {
      const documentos = []
      
      // Converter cada arquivo para base64
      for (let index = 0; index < arquivosSelecionados.length; index++) {
        const file = arquivosSelecionados[index]
        
        // Ler arquivo como base64
        const base64 = await new Promise<string>((resolve, reject) => {
          const reader = new FileReader()
          reader.onload = () => resolve(reader.result as string)
          reader.onerror = reject
          reader.readAsDataURL(file)
        })
        
        // Extrair metadados do PDF
        let metadata = {
          num_paginas: 1,
          formato_pagina: 'A4',
          orientacao: 'retrato'
        }
        
        if (file.type === 'application/pdf') {
          metadata = await extractPDFMetadata(file)
        }
        
        // Armazenar no Map para acesso imediato
        const key = `${id}-${topicoSelecionado}-${file.name}`
        const newMap = new Map(arquivosMap)
        newMap.set(key, file)
        setArquivosMap(newMap)
        
        // Adicionar à lista de documentos
        documentos.push({
          databook_id: id,
          secao_numero: topicoSelecionado,
          titulo: file.name.replace(/\.[^/.]+$/, ''), // Remove extensão
          arquivo_url: base64, // Armazenar base64 diretamente
          arquivo_tipo: file.type,
          arquivo_tamanho: file.size,
          data_documento: new Date().toISOString().split('T')[0],
          tags_usuario: [],
          ordem_na_secao: index + 1,
          aprovado: false,
          ...metadata
        })
      }
      
      if (documentos.length > 0) {
        uploadMutation.mutate(documentos)
      }
    } catch (error: any) {
      console.error('Erro no upload:', error)
      toast.error('Erro ao processar arquivos')
    }
  }
  
  const handlePreview = (doc: Documento) => {
    setDocumentoPreview(doc)
    
    // Se a URL é base64 (data:), usar diretamente
    if (doc.arquivo_url.startsWith('data:')) {
      setPreviewUrl(doc.arquivo_url)
    } 
    // Se é URL HTTP, usar diretamente
    else if (doc.arquivo_url.startsWith('http')) {
      setPreviewUrl(doc.arquivo_url)
    } 
    // Fallback: buscar arquivo no Map
    else {
      const file = arquivosMap.get(doc.arquivo_url)
      if (file) {
        const url = URL.createObjectURL(file)
        setPreviewUrl(url)
      } else {
        setPreviewUrl(null)
      }
    }
    
    setPreviewModalOpen(true)
  }
  
  const handleRotate = async () => {
    // TODO: Implementar rotação de documento
    toast.info('Funcionalidade de rotação em desenvolvimento')
  }
  
  const handleGeneratePDF = async () => {
    if (!projeto || !topicos || !todosDocumentos) {
      toast.error('Dados incompletos para gerar PDF')
      return
    }
    
    setGeneratingPDF(true)
    setPdfProgress({ progress: 0, message: 'Iniciando geração...' })
    
    try {
      const blob = await generateDatabookPDF({
        projeto,
        topicos,
        documentosPorSecao: todosDocumentos,
        designConfig,
        onProgress: (progress, message) => {
          setPdfProgress({ progress, message })
        }
      })
      
      // Download do PDF
      const url = URL.createObjectURL(blob)
      const link = document.createElement('a')
      link.href = url
      link.download = `databook-${projeto.numero_projeto}.pdf`
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
      URL.revokeObjectURL(url)
      
      toast.success('PDF gerado com sucesso!')
    } catch (error) {
      console.error('Erro ao gerar PDF:', error)
      toast.error('Erro ao gerar PDF')
    } finally {
      setGeneratingPDF(false)
      setPdfProgress({ progress: 0, message: '' })
    }
  }
  
  const handleDragStart = (doc: Documento) => {
    setDraggedDoc(doc)
  }
  
  const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault()
  }
  
  const handleDrop = async (targetDoc: Documento) => {
    if (!draggedDoc || !documentos) return
    
    const draggedIndex = documentos.findIndex(d => d.id === draggedDoc.id)
    const targetIndex = documentos.findIndex(d => d.id === targetDoc.id)
    
    if (draggedIndex === targetIndex) return
    
    // Reordenar localmente
    const newDocs = [...documentos]
    newDocs.splice(draggedIndex, 1)
    newDocs.splice(targetIndex, 0, draggedDoc)
    
    // Atualizar ordem no banco
    try {
      const updates = newDocs.map((doc, index) => 
        supabase
          .from('documentos_auto_indexados')
          .update({ ordem_na_secao: index + 1 } as any)
          .eq('id', doc.id)
      )
      
      await Promise.all(updates)
      queryClient.invalidateQueries({ queryKey: ['documentos'] })
      toast.success('Ordem atualizada')
    } catch (error) {
      toast.error('Erro ao reordenar')
    }
    
    setDraggedDoc(null)
  }
  
  const getIndentLevel = (numeroTopico: string): number => {
    const parts = numeroTopico.split('.')
    return (parts.length - 1) * 16
  }
  
  const getDocumentIcon = (tipo: string) => {
    if (tipo?.includes('image')) return <ImageIcon size={20} className="text-blue-500" />
    return <FileText size={20} className="text-gray-400" />
  }
  
  if (loadingProjeto) {
    return (
      <div className="flex items-center justify-center h-full">
        <LoadingSpinner size="lg" />
      </div>
    )
  }
  
  return (
    <div className="h-[calc(100vh-8rem)] flex flex-col">
      {/* Header */}
      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100">
            Databook #{projeto?.numero_projeto}
          </h1>
          <p className="text-gray-600 dark:text-gray-400 mt-1">
            Cliente: {projeto?.clientes?.nome} | Projeto: {projeto?.nome_projeto}
          </p>
        </div>
        <div className="flex gap-2">
          {id && <DesignSelector databookId={id} currentDesignConfig={designConfig} />}
          <Button 
            variant="outline"
            onClick={() => setDatabookPreviewOpen(true)}
          >
            <Eye size={20} className="mr-2" />
            Pré-visualizar
          </Button>
          <Button
            onClick={handleGeneratePDF}
            isLoading={generatingPDF}
          >
            <Download size={20} className="mr-2" />
            {generatingPDF ? `Gerando... ${pdfProgress.progress}%` : 'Gerar PDF'}
          </Button>
        </div>
      </div>
      
      {/* Main Content - Split View */}
      <div className="flex-1 flex gap-6 overflow-hidden">
        {/* Left Panel - Tópicos */}
        <div className="w-80 bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden flex flex-col">
          <div className="p-4 border-b border-gray-200 dark:border-gray-700">
            <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">Índice</h2>
            <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
              {topicos?.length || 0} seções
            </p>
          </div>
          
          <div className="flex-1 overflow-y-auto">
            {topicos && topicos.length > 0 ? (
              <div className="p-2">
                {topicos.map((topico) => {
                  const isSelected = topicoSelecionado === topico.numero_topico
                  const docCount = contagemDocs?.[topico.numero_topico] || 0
                  
                  return (
                    <button
                      key={topico.id}
                      onClick={() => setTopicoSelecionado(topico.numero_topico)}
                      className={`w-full text-left p-3 rounded-lg transition-colors mb-1 ${
                        isSelected 
                          ? 'bg-primary text-white' 
                          : 'hover:bg-gray-50 dark:hover:bg-gray-700'
                      }`}
                      style={{ paddingLeft: `${12 + getIndentLevel(topico.numero_topico)}px` }}
                    >
                      <div className="flex items-start justify-between gap-2">
                        <div className="flex items-start gap-2 flex-1 min-w-0">
                          <span className={`w-2 h-2 rounded-full flex-shrink-0 mt-1.5 ${
                            docCount > 0 ? 'bg-green-500' : 'bg-gray-300'
                          }`} />
                          <div className="flex-1 min-w-0">
                            <div className="flex items-center gap-2">
                              <span className={`font-mono text-sm font-semibold flex-shrink-0 ${
                                isSelected ? 'text-white' : 'text-primary dark:text-blue-400'
                              }`}>
                                {topico.numero_topico}
                              </span>
                              {topico.obrigatorio && (
                                <span className={`flex-shrink-0 ${isSelected ? 'text-white' : 'text-red-500 dark:text-red-400'}`}>*</span>
                              )}
                            </div>
                            <span className={`text-sm block break-words ${
                              isSelected ? 'text-white' : 'text-gray-900 dark:text-gray-100'
                            }`}>
                              {topico.titulo}
                            </span>
                          </div>
                        </div>
                        <div className="flex items-center gap-2 flex-shrink-0">
                          <span className={`text-xs ${
                            isSelected ? 'text-white' : 'text-gray-500 dark:text-gray-400'
                          }`}>
                            {docCount}
                          </span>
                          {isSelected && <ChevronRight size={16} />}
                        </div>
                      </div>
                    </button>
                  )
                })}
              </div>
            ) : (
              <div className="p-8 text-center text-gray-500 dark:text-gray-400">
                Nenhum tópico definido
              </div>
            )}
          </div>
        </div>
        
        {/* Right Panel - Documentos */}
        <div className="flex-1 bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden flex flex-col">
          {topicoSelecionado ? (
            <>
              {/* Toolbar */}
              <div className="p-4 border-b border-gray-200 dark:border-gray-700">
                <div className="flex items-center justify-between">
                  <div>
                    <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
                      Seção {topicoSelecionado}
                    </h2>
                    <p className="text-sm text-gray-600 dark:text-gray-400">
                      {documentos?.length || 0} documento(s)
                    </p>
                  </div>
                  <div className="flex gap-2">
                    <Button 
                      size="sm" 
                      variant="outline"
                      onClick={() => setUploadModalOpen(true)}
                    >
                      <Upload size={16} className="mr-2" />
                      Carregar
                    </Button>
                  </div>
                </div>
              </div>
              
              {/* Documents Grid */}
              <div className="flex-1 overflow-y-auto p-4">
                {loadingDocs ? (
                  <div className="flex items-center justify-center h-full">
                    <LoadingSpinner />
                  </div>
                ) : documentos && documentos.length > 0 ? (
                  <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-2">
                    {documentos.map((doc) => (
                      <div
                        key={doc.id}
                        draggable
                        onDragStart={() => handleDragStart(doc)}
                        onDragOver={handleDragOver}
                        onDrop={() => handleDrop(doc)}
                        className="p-2 border border-gray-200 dark:border-gray-600 rounded-lg hover:border-primary dark:hover:border-blue-400 hover:shadow-sm transition-all cursor-move bg-white dark:bg-gray-700"
                      >
                        {/* Thumbnail compacto */}
                        <button
                          onClick={() => handlePreview(doc)}
                          className="w-full h-20 bg-gray-100 dark:bg-gray-600 rounded flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-500 transition-colors mb-1.5"
                        >
                          {getDocumentIcon(doc.arquivo_tipo)}
                        </button>
                        
                        {/* Nome compacto */}
                        <h3 className="text-xs font-medium text-gray-900 dark:text-gray-100 truncate mb-0.5" title={doc.titulo}>
                          {doc.titulo}
                        </h3>
                        <p className="text-[10px] text-gray-500 dark:text-gray-400 mb-1.5">
                          {doc.num_paginas || 1} pág
                          {doc.arquivo_tamanho ? ` - ${(doc.arquivo_tamanho / 1024).toFixed(0)} KB` : ''}
                          {doc.formato_pagina ? ` - ${doc.formato_pagina}` : ' - A4'}
                          {doc.orientacao === 'paisagem' ? ' (paisagem)' : ''}
                        </p>
                        
                        {/* Actions compactos */}
                        <div className="flex items-center justify-center gap-0.5">
                          <button
                            onClick={() => handlePreview(doc)}
                            className="p-1 text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900 rounded transition-colors"
                            title="Visualizar"
                          >
                            <Eye size={14} />
                          </button>
                          <button
                            onClick={() => handleRotate()}
                            className="p-1 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-600 rounded transition-colors"
                            title="Girar"
                          >
                            <RotateCw size={14} />
                          </button>
                          <button
                            onClick={() => deleteMutation.mutate(doc.id)}
                            className="p-1 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900 rounded transition-colors"
                            title="Deletar"
                          >
                            <Trash2 size={14} />
                          </button>
                        </div>
                      </div>
                    ))}
                  </div>
                ) : (
                  <div className="flex flex-col items-center justify-center h-full text-gray-500 dark:text-gray-400">
                    <FileText size={48} className="mb-4 text-gray-300 dark:text-gray-600" />
                    <p className="text-lg font-medium">Nenhum documento</p>
                    <p className="text-sm">Faça upload de documentos para esta seção</p>
                    <Button 
                      className="mt-4"
                      onClick={() => setUploadModalOpen(true)}
                    >
                      <Upload size={16} className="mr-2" />
                      Carregar Documentos
                    </Button>
                  </div>
                )}
              </div>
            </>
          ) : (
            <div className="flex items-center justify-center h-full text-gray-500 dark:text-gray-400">
              <div className="text-center">
                <FileText size={48} className="mx-auto mb-4 text-gray-300 dark:text-gray-600" />
                <p className="text-lg font-medium">Selecione uma seção</p>
                <p className="text-sm">Escolha uma seção no índice para gerenciar documentos</p>
              </div>
            </div>
          )}
        </div>
      </div>
      
      {/* Modal de Upload */}
      <Modal
        isOpen={uploadModalOpen}
        onClose={() => {
          setUploadModalOpen(false)
          setArquivosSelecionados([])
        }}
        title="Carregar Documentos"
      >
        <div className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              Seção: {topicoSelecionado}
            </label>
            <div className="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-8 text-center bg-gray-50 dark:bg-gray-700">
              <input
                type="file"
                multiple
                accept=".pdf,.jpg,.jpeg,.png,.doc,.docx"
                onChange={(e) => setArquivosSelecionados(Array.from(e.target.files || []))}
                className="hidden"
                id="file-upload"
              />
              <label htmlFor="file-upload" className="cursor-pointer">
                <Upload className="mx-auto text-gray-400 dark:text-gray-500 mb-2" size={32} />
                <p className="text-sm text-gray-600 dark:text-gray-400">
                  Clique para selecionar ou arraste arquivos aqui
                </p>
                <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                  PDF, JPG, PNG, DOC, DOCX (máx. 50MB)
                </p>
              </label>
            </div>
          </div>
          
          {arquivosSelecionados.length > 0 && (
            <div>
              <p className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                Arquivos selecionados ({arquivosSelecionados.length})
              </p>
              <div className="space-y-2 max-h-40 overflow-y-auto">
                {arquivosSelecionados.map((file, i) => (
                  <div key={i} className="flex items-center justify-between p-2 bg-gray-50 dark:bg-gray-700 rounded">
                    <span className="text-sm text-gray-900 dark:text-gray-100 truncate">{file.name}</span>
                    <button
                      onClick={() => setArquivosSelecionados(prev => prev.filter((_, idx) => idx !== i))}
                      className="text-red-600 hover:text-red-800"
                    >
                      <X size={16} />
                    </button>
                  </div>
                ))}
              </div>
            </div>
          )}
          
          <div className="flex justify-end gap-3">
            <Button
              variant="outline"
              onClick={() => {
                setUploadModalOpen(false)
                setArquivosSelecionados([])
              }}
            >
              Cancelar
            </Button>
            <Button
              onClick={handleUpload}
              disabled={arquivosSelecionados.length === 0}
              isLoading={uploadMutation.isPending}
            >
              Carregar {arquivosSelecionados.length > 0 && `(${arquivosSelecionados.length})`}
            </Button>
          </div>
        </div>
      </Modal>
      
      {/* Modal de Preview */}
      <Modal
        isOpen={previewModalOpen}
        onClose={() => {
          setPreviewModalOpen(false)
          setDocumentoPreview(null)
          if (previewUrl) {
            URL.revokeObjectURL(previewUrl)
            setPreviewUrl(null)
          }
        }}
        title="Visualizar Documento"
      >
        {documentoPreview && (
          <div className="space-y-4">
            <div>
              <h3 className="font-medium text-gray-900 dark:text-gray-100">{documentoPreview.titulo}</h3>
              <p className="text-sm text-gray-500 dark:text-gray-400">
                {new Date(documentoPreview.data_documento).toLocaleDateString('pt-BR')}
              </p>
              <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                Tipo: {documentoPreview.arquivo_tipo || 'Desconhecido'}
              </p>
            </div>
            
            <div className="bg-gray-50 dark:bg-gray-700 rounded-lg overflow-hidden" style={{ minHeight: '400px', maxHeight: '600px' }}>
              {previewUrl ? (
                <>
                  {/* Preview de Imagens */}
                  {documentoPreview.arquivo_tipo?.startsWith('image/') && (
                    <div className="flex items-center justify-center p-4">
                      <img 
                        src={previewUrl} 
                        alt={documentoPreview.titulo}
                        className="max-w-full max-h-[600px] object-contain"
                      />
                    </div>
                  )}
                  
                  {/* Preview de PDF */}
                  {documentoPreview.arquivo_tipo === 'application/pdf' && (
                    <iframe
                      src={previewUrl}
                      className="w-full h-[600px]"
                      title={documentoPreview.titulo}
                    />
                  )}
                  
                  {/* Preview de Documentos Word/Excel (não suportado nativamente) */}
                  {(documentoPreview.arquivo_tipo?.includes('word') || 
                    documentoPreview.arquivo_tipo?.includes('document') ||
                    documentoPreview.arquivo_tipo?.includes('sheet')) && (
                    <div className="flex flex-col items-center justify-center h-[400px] text-center p-8">
                      <FileText size={64} className="text-gray-300 dark:text-gray-600 mb-4" />
                      <p className="text-gray-600 dark:text-gray-400 mb-2">
                        Preview não disponível para este tipo de arquivo
                      </p>
                      <p className="text-sm text-gray-500 dark:text-gray-400 mb-4">
                        {documentoPreview.arquivo_tipo}
                      </p>
                      <a
                        href={previewUrl}
                        download={documentoPreview.titulo}
                        className="text-primary dark:text-blue-400 hover:underline"
                      >
                        Baixar arquivo para visualizar
                      </a>
                    </div>
                  )}
                  
                  {/* Outros tipos de arquivo */}
                  {!documentoPreview.arquivo_tipo?.startsWith('image/') &&
                   documentoPreview.arquivo_tipo !== 'application/pdf' &&
                   !documentoPreview.arquivo_tipo?.includes('word') &&
                   !documentoPreview.arquivo_tipo?.includes('document') &&
                   !documentoPreview.arquivo_tipo?.includes('sheet') && (
                    <div className="flex flex-col items-center justify-center h-[400px] text-center p-8">
                      <FileText size={64} className="text-gray-300 dark:text-gray-600 mb-4" />
                      <p className="text-gray-600 dark:text-gray-400 mb-2">
                        Tipo de arquivo não suportado para preview
                      </p>
                      <p className="text-sm text-gray-500 dark:text-gray-400 mb-4">
                        {documentoPreview.arquivo_tipo}
                      </p>
                      <a
                        href={previewUrl}
                        download={documentoPreview.titulo}
                        className="text-primary dark:text-blue-400 hover:underline"
                      >
                        Baixar arquivo
                      </a>
                    </div>
                  )}
                </>
              ) : (
                <div className="flex flex-col items-center justify-center h-[400px] text-center p-8">
                  <FileText size={64} className="text-gray-300 dark:text-gray-600 mb-4" />
                  <p className="text-gray-600 dark:text-gray-400 mb-2">
                    Arquivo não disponível para preview
                  </p>
                  <p className="text-sm text-gray-500 dark:text-gray-400">
                    O arquivo pode ter sido carregado em uma sessão anterior
                  </p>
                </div>
              )}
            </div>
          </div>
        )}
      </Modal>
      
      {/* Preview do Databook Completo */}
      {databookPreviewOpen && (
        <DatabookPreview
          projeto={projeto}
          topicos={topicos || []}
          documentosPorSecao={todosDocumentos || {}}
          onClose={() => setDatabookPreviewOpen(false)}
          onGeneratePDF={handleGeneratePDF}
        />
      )}
    </div>
  )
}


