import { X } from 'lucide-react'
import Button from '@/components/common/Button'
import { useState, useEffect } from 'react'
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 DatabookPreviewProps {
  projeto: any
  topicos: any[]
  documentosPorSecao: { [key: string]: any[] }
  onClose: () => void
  onGeneratePDF: () => void
}

export default function DatabookPreview({ 
  projeto, 
  topicos, 
  documentosPorSecao, 
  onClose,
  onGeneratePDF 
}: DatabookPreviewProps) {
  const [pdfPreviews, setPdfPreviews] = useState<{ [key: string]: string[] }>({})
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    // Limpa previews anteriores
    setPdfPreviews({})
    setLoading(true)
    
    const loadPdfPreviews = async () => {
      const previews: { [key: string]: string[] } = {}
      
      // Cria uma chave única baseada nos documentos para forçar atualização
      const docKeys = Object.values(documentosPorSecao)
        .flat()
        .map(doc => doc.id)
        .join(',')
      
      console.log('Carregando previews para documentos:', docKeys)
      
      for (const topico of topicos) {
        const docs = documentosPorSecao[topico.numero_topico] || []
        
        for (const doc of docs) {
          if (doc.arquivo_tipo.includes('pdf') || doc.arquivo_url.includes('application/pdf')) {
            try {
              console.log(`Carregando preview do PDF: ${doc.titulo}`)
              
              // Carrega o PDF
              const loadingTask = pdfjsLib.getDocument(doc.arquivo_url)
              const pdf = await loadingTask.promise
              const pageCount = pdf.numPages
              
              console.log(`PDF ${doc.titulo} tem ${pageCount} páginas`)
              
              // Converte cada página em imagem (apenas primeiras 10 páginas para preview)
              const pageImages: string[] = []
              for (let i = 1; i <= Math.min(pageCount, 10); i++) { // Reduzido para 10 páginas
                const page = await pdf.getPage(i)
                const viewport = page.getViewport({ scale: 1 }) // Reduzido para escala 1
                
                const canvas = document.createElement('canvas')
                const context = canvas.getContext('2d')
                canvas.width = viewport.width
                canvas.height = viewport.height
                
                await page.render({
                  canvasContext: context!,
                  viewport: viewport
                }).promise
                
                // Usa JPEG com alta compressão para preview
                const imageUrl = canvas.toDataURL('image/jpeg', 0.7)
                pageImages.push(imageUrl)
              }
              
              if (pageCount > 10) {
                console.log(`Preview limitado a 10 páginas de ${pageCount} total`)
              }
              
              previews[doc.id] = pageImages
              console.log(`Preview do PDF ${doc.titulo} carregado com ${pageImages.length} páginas`)
            } catch (error) {
              console.error('Erro ao carregar preview do PDF:', error)
            }
          }
        }
      }
      
      console.log('Total de previews carregados:', Object.keys(previews).length)
      setPdfPreviews(previews)
      setLoading(false)
    }
    
    loadPdfPreviews()
  }, [JSON.stringify(documentosPorSecao), topicos])
  
  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-2xl w-full max-w-6xl h-[90vh] flex flex-col">
        {/* Header */}
        <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
          <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">Pré-visualização do Databook</h2>
          <div className="flex gap-2">
            <Button onClick={onGeneratePDF}>
              Gerar PDF
            </Button>
            <button onClick={onClose} className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded text-gray-700 dark:text-gray-300">
              <X size={20} />
            </button>
          </div>
        </div>
        
        {/* Preview Content */}
        <div className="flex-1 overflow-y-auto p-8 bg-gray-100 dark:bg-gray-900">
          <div id="databook-content" className="max-w-4xl mx-auto space-y-8">
            
            {/* Capa */}
            <div className="bg-white p-12 shadow-lg" style={{ 
              minHeight: '297mm',
              background: `linear-gradient(135deg, ${projeto?.databooks_mestres?.cor_primaria || '#1E40AF'} 0%, ${projeto?.databooks_mestres?.cor_secundaria || '#64748B'} 100%)`
            }}>
              <div className="h-full flex flex-col justify-between text-white">
                <div>
                  <h1 className="text-5xl font-bold mb-4">
                    {projeto?.databooks_mestres?.titulo_principal || 'DATABOOK'}
                  </h1>
                  {projeto?.databooks_mestres?.subtitulo && (
                    <p className="text-2xl">{projeto.databooks_mestres.subtitulo}</p>
                  )}
                </div>
                
                <div className="space-y-4">
                  <div>
                    <p className="text-sm opacity-80">Projeto</p>
                    <p className="text-xl font-semibold">{projeto?.nome_projeto}</p>
                    <p className="text-lg">{projeto?.numero_projeto}</p>
                  </div>
                  <div>
                    <p className="text-sm opacity-80">Cliente</p>
                    <p className="text-xl">{projeto?.databooks_mestres?.cliente_nome}</p>
                  </div>
                  <div>
                    <p className="text-sm opacity-80">Data</p>
                    <p className="text-lg">{new Date().toLocaleDateString('pt-BR')}</p>
                  </div>
                </div>
              </div>
            </div>
            
            {/* Índice */}
            <div className="bg-white p-12 shadow-lg min-h-[297mm]">
              <h2 className="text-3xl font-bold mb-8 text-gray-900">Índice</h2>
              <div className="space-y-2">
                {topicos?.map((topico, index) => (
                  <div key={topico.id} className="flex justify-between items-center py-2 border-b border-gray-200">
                    <div className="flex items-center gap-3">
                      <span className="font-mono font-semibold text-primary">
                        {topico.numero_topico}
                      </span>
                      <span className="text-gray-900">{topico.titulo}</span>
                      {topico.obrigatorio && (
                        <span className="text-red-500 text-sm">*</span>
                      )}
                    </div>
                    <span className="text-gray-500">{index + 3}</span>
                  </div>
                ))}
              </div>
            </div>
            
            {/* Seções */}
            {topicos?.map((topico) => {
              const docs = documentosPorSecao[topico.numero_topico] || []
              
              return (
                <div key={topico.id}>
                  {/* Página de Separação da Seção */}
                  <div className="bg-white p-12 shadow-lg min-h-[297mm] flex items-center justify-center" style={{
                    background: `linear-gradient(135deg, ${projeto?.databooks_mestres?.cor_primaria || '#1E40AF'}20 0%, ${projeto?.databooks_mestres?.cor_secundaria || '#64748B'}20 100%)`
                  }}>
                    <div className="text-center">
                      <div className="text-6xl font-bold mb-4" style={{ 
                        color: projeto?.databooks_mestres?.cor_primaria || '#1E40AF' 
                      }}>
                        {topico.numero_topico}
                      </div>
                      <h2 className="text-3xl font-bold text-gray-900 mb-4">
                        {topico.titulo}
                      </h2>
                      {topico.descricao && (
                        <p className="text-gray-600 max-w-2xl mx-auto">
                          {topico.descricao}
                        </p>
                      )}
                      <div className="mt-8 text-gray-500">
                        {docs.length} documento(s)
                      </div>
                    </div>
                  </div>
                  
                  {/* Documentos ou Não Aplicável */}
                  {docs.length > 0 ? (
                    docs.map((doc) => (
                      <div key={doc.id}>
                        {doc.arquivo_url.startsWith('data:image') ? (
                          <div className="bg-white shadow-lg">
                            <img src={doc.arquivo_url} alt={doc.titulo} className="w-full" />
                          </div>
                        ) : (doc.arquivo_tipo.includes('pdf') || doc.arquivo_url.includes('application/pdf')) && pdfPreviews[doc.id] ? (
                          pdfPreviews[doc.id].map((pageImage, pageIdx) => (
                            <div key={`${doc.id}-page-${pageIdx}`} className="bg-white shadow-lg mb-4">
                              <img src={pageImage} alt={`${doc.titulo} - Página ${pageIdx + 1}`} className="w-full" />
                            </div>
                          ))
                        ) : (doc.arquivo_tipo.includes('pdf') || doc.arquivo_url.includes('application/pdf')) && loading ? (
                          <div className="bg-white p-12 shadow-lg min-h-[297mm] flex items-center justify-center">
                            <div className="text-center">
                              <div className="text-6xl mb-4">📄</div>
                              <p className="text-gray-900 font-semibold text-xl mb-2">{doc.titulo}</p>
                              <p className="text-gray-600">Carregando preview do PDF...</p>
                            </div>
                          </div>
                        ) : (
                          <div className="bg-white p-12 shadow-lg min-h-[297mm] flex items-center justify-center">
                            <p className="text-gray-600">Documento: {doc.titulo}</p>
                          </div>
                        )}
                      </div>
                    ))
                  ) : (
                    <div className="bg-white p-12 shadow-lg min-h-[297mm] flex items-center justify-center">
                      <div className="text-center">
                        <div className="text-6xl mb-4">📄</div>
                        <h3 className="text-2xl font-semibold text-gray-400 mb-2">
                          Não Aplicável
                        </h3>
                        <p className="text-gray-500">
                          Nenhum documento disponível para esta seção
                        </p>
                      </div>
                    </div>
                  )}
                </div>
              )
            })}
            
          </div>
        </div>
      </div>
    </div>
  )
}
