/// <reference types="react" />
import React, { useState, useCallback } from 'react';
import { useDropzone } from 'react-dropzone';
import axios from 'axios';
import { toast } from 'react-toastify';
import { useAuth } from '../../contexts/AuthContext';
import {
  DocumentIcon,
  CloudArrowUpIcon,
  ArrowsPointingInIcon,
  ScissorsIcon,
  ArrowsUpDownIcon,
  PhotoIcon,
  DocumentTextIcon,
  InformationCircleIcon,
  ArrowDownTrayIcon,
  ClockIcon,
} from '@heroicons/react/24/outline';

interface OperationResult {
  operacaoId: string;
  outputPaths?: string[];
  outputPath?: string;
  zipPath?: string;
  processingTime?: number;
  reduction?: number;
  filesCreated?: number;
  text?: string;
  confidence?: number;
}

type OperationType =
  | 'compress'
  | 'split'
  | 'merge'
  | 'pdfToImages'
  | 'imagesToPDF'
  | 'ocr'
  | 'info';

export const PDFManipulationPage: React.FC = () => {
  const { getToken } = useAuth();
  const [selectedOperation, setSelectedOperation] = useState<OperationType>('compress');
  const [files, setFiles] = useState<File[]>([]);
  const [processing, setProcessing] = useState(false);
  const [result, setResult] = useState<OperationResult | null>(null);
  const [history, setHistory] = useState<any[]>([]);

  // Configurações para cada operação
  const [compressQuality, setCompressQuality] = useState(85);
  const [enableOCR, setEnableOCR] = useState(false);
  const [splitType, setSplitType] = useState<'pages' | 'range' | 'chunks'>('pages');
  const [splitPages, setSplitPages] = useState<string>('1,2,3');
  const [splitRanges, setSplitRanges] = useState<string>('1-5,6-10');
  const [chunkSize, setChunkSize] = useState(5);
  const [imageFormat, setImageFormat] = useState<'png' | 'jpg' | 'webp'>('png');
  const [imageQuality, setImageQuality] = useState(95);
  const [imageDensity, setImageDensity] = useState(300);
  const [ocrLanguage, setOcrLanguage] = useState('por');

  const onDrop = useCallback((acceptedFiles: File[]) => {
    setFiles((prev) => [...prev, ...acceptedFiles]);
  }, []);

  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop,
    accept: {
      'application/pdf': ['.pdf'],
      'image/*': ['.png', '.jpg', '.jpeg', '.webp'],
    },
  });

  const removeFile = (index: number) => {
    setFiles((prev) => prev.filter((_, i) => i !== index));
  };

  const clearFiles = () => {
    setFiles([]);
    setResult(null);
  };

  const processFiles = async () => {
    if (files.length === 0) {
      toast.error('Selecione pelo menos um arquivo');
      return;
    }

    setProcessing(true);
    setResult(null);

    try {
      const formData = new FormData();
      files.forEach((file) => {
        formData.append('files', file);
      });

      const token = getToken();
      const config = {
        headers: {
          'Content-Type': 'multipart/form-data',
          Authorization: `Bearer ${token}`,
        },
        timeout: 600000, // 10 minutos para operações longas (compressão, OCR, etc)
      };

      let response;

      switch (selectedOperation) {
        case 'compress':
          formData.append('quality', compressQuality.toString());
          formData.append('enableOCR', enableOCR.toString());
          response = await axios.post('/api/pdf/compress', formData, config);
          toast.success('PDFs comprimidos com sucesso!');
          break;

        case 'split':
          formData.append('splitType', splitType);
          if (splitType === 'pages') {
            const pages = splitPages.split(',').map((p) => parseInt(p.trim()));
            formData.append('pages', JSON.stringify(pages));
          } else if (splitType === 'range') {
            const ranges = splitRanges.split(',').map((r) => {
              const [start, end] = r.trim().split('-').map(Number);
              return { start, end };
            });
            formData.append('ranges', JSON.stringify(ranges));
          } else {
            formData.append('chunkSize', chunkSize.toString());
          }
          response = await axios.post('/api/pdf/split', formData, config);
          toast.success('PDF dividido com sucesso!');
          break;

        case 'merge':
          formData.append('enableOCR', enableOCR.toString());
          response = await axios.post('/api/pdf/merge', formData, config);
          toast.success('PDFs mesclados com sucesso!');
          break;

        case 'pdfToImages':
          formData.append('format', imageFormat);
          formData.append('quality', imageQuality.toString());
          formData.append('density', imageDensity.toString());
          response = await axios.post('/api/pdf/pdf-to-images', formData, config);
          toast.success('PDF convertido em imagens!');
          break;

        case 'imagesToPDF':
          formData.append('enableOCR', enableOCR.toString());
          formData.append('fitToPage', 'true');
          response = await axios.post('/api/pdf/images-to-pdf', formData, config);
          toast.success('Imagens convertidas em PDF!');
          break;

        case 'ocr':
          formData.append('language', ocrLanguage);
          response = await axios.post('/api/pdf/ocr', formData, config);
          toast.success('OCR realizado com sucesso!');
          break;

        case 'info':
          response = await axios.post('/api/pdf/info', formData, config);
          break;
      }

      setResult(response.data);
      loadHistory();
    } catch (error: any) {
      console.error('Erro ao processar arquivos:', error);
      toast.error(error.response?.data?.message || 'Erro ao processar arquivos');
    } finally {
      setProcessing(false);
    }
  };

  const loadHistory = async () => {
    try {
      const token = getToken();
      const response = await axios.get('/api/pdf/history', {
        headers: { Authorization: `Bearer ${token}` },
      });
      setHistory(response.data.operacoes || []);
    } catch (error) {
      console.error('Erro ao carregar histórico:', error);
    }
  };

  const downloadFile = async (operacaoId: string, fileIndex: number) => {
    try {
      const token = getToken();
      const response = await axios.get(`/api/pdf/download/${operacaoId}/${fileIndex}`, {
        headers: { Authorization: `Bearer ${token}` },
        responseType: 'blob',
      });

      // Extrai o nome do arquivo do header Content-Disposition
      const contentDisposition = response.headers['content-disposition'];
      let fileName = `arquivo-${fileIndex}`;
      
      if (contentDisposition) {
        const matches = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/.exec(contentDisposition);
        if (matches != null && matches[1]) {
          fileName = matches[1].replace(/['"]/g, '');
        }
      }

      // Usa o Content-Type correto do servidor
      const contentType = response.headers['content-type'] || 'application/octet-stream';
      
      console.log(`Download frontend: ${fileName} (${contentType})`);

      // Cria o blob com o tipo correto
      const blob = new Blob([response.data], { type: contentType });
      const url = window.URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', fileName);
      document.body.appendChild(link);
      link.click();
      link.remove();
      
      // Libera a memória do blob URL
      setTimeout(() => window.URL.revokeObjectURL(url), 100);

      toast.success('Download iniciado!');
    } catch (error) {
      console.error('Erro ao fazer download:', error);
      toast.error('Erro ao fazer download');
    }
  };

  const deleteOperation = async (operacaoId: string) => {
    if (!window.confirm('Deseja realmente deletar esta operação e seus arquivos?')) {
      return;
    }

    try {
      const token = getToken();
      await axios.delete(`/api/pdf/operation/${operacaoId}`, {
        headers: { Authorization: `Bearer ${token}` },
      });
      
      toast.success('Operação deletada com sucesso!');
      loadHistory();
    } catch (error) {
      console.error('Erro ao deletar operação:', error);
      toast.error('Erro ao deletar operação');
    }
  };

  const clearAllHistory = async () => {
    if (!window.confirm('⚠️ ATENÇÃO: Isso irá deletar TODO o histórico e TODOS os arquivos armazenados. Esta ação não pode ser desfeita. Deseja continuar?')) {
      return;
    }

    try {
      const token = getToken();
      const response = await axios.delete('/api/pdf/history/clear', {
        headers: { Authorization: `Bearer ${token}` },
      });
      
      toast.success(`Histórico limpo! ${response.data.operacoesRemovidas} operações removidas.`);
      setHistory([]);
      setResult(null);
    } catch (error) {
      console.error('Erro ao limpar histórico:', error);
      toast.error('Erro ao limpar histórico');
    }
  };

  const cleanupOldFiles = async () => {
    if (!window.confirm('Deseja remover operações com mais de 24 horas?')) {
      return;
    }

    try {
      const token = getToken();
      const response = await axios.delete('/api/pdf/history/cleanup?hours=24', {
        headers: { Authorization: `Bearer ${token}` },
      });
      
      toast.success(`${response.data.operacoesRemovidas} operações antigas removidas!`);
      loadHistory();
    } catch (error) {
      console.error('Erro ao limpar arquivos antigos:', error);
      toast.error('Erro ao limpar arquivos antigos');
    }
  };

  React.useEffect(() => {
    loadHistory();
  }, []);

  const operations = [
    {
      id: 'compress' as OperationType,
      name: 'Comprimir PDF',
      icon: ArrowsPointingInIcon,
      description: 'Reduza o tamanho mantendo a qualidade',
    },
    {
      id: 'split' as OperationType,
      name: 'Dividir PDF',
      icon: ScissorsIcon,
      description: 'Separe páginas específicas',
    },
    {
      id: 'merge' as OperationType,
      name: 'Mesclar PDFs',
      icon: ArrowsUpDownIcon,
      description: 'Combine múltiplos PDFs',
    },
    {
      id: 'pdfToImages' as OperationType,
      name: 'PDF para Imagens',
      icon: PhotoIcon,
      description: 'Converta páginas em imagens',
    },
    {
      id: 'imagesToPDF' as OperationType,
      name: 'Imagens para PDF',
      icon: DocumentIcon,
      description: 'Crie PDF a partir de imagens',
    },
    {
      id: 'ocr' as OperationType,
      name: 'OCR',
      icon: DocumentTextIcon,
      description: 'Extraia texto de PDFs',
    },
    {
      id: 'info' as OperationType,
      name: 'Informações',
      icon: InformationCircleIcon,
      description: 'Obtenha detalhes do PDF',
    },
  ];

  const formatBytes = (bytes: number) => {
    if (bytes === 0) return '0 Bytes';
    const k = 1024;
    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
  };

  return (
    <div className="min-h-screen bg-gray-50 py-8">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-gray-900">Manipulação de PDFs</h1>
          <p className="mt-2 text-gray-600">
            Ferramentas completas para trabalhar com arquivos PDF
          </p>
        </div>

        {/* Seleção de operação */}
        <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-4 mb-8">
          {operations.map((op) => (
            <button
              key={op.id}
              onClick={() => {
                setSelectedOperation(op.id);
                clearFiles();
              }}
              className={`p-4 rounded-lg border-2 transition-all ${
                selectedOperation === op.id
                  ? 'border-blue-500 bg-blue-50 text-blue-700'
                  : 'border-gray-200 bg-white hover:border-gray-300'
              }`}
            >
              <op.icon className="h-8 w-8 mx-auto mb-2" />
              <div className="text-sm font-medium">{op.name}</div>
            </button>
          ))}
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* Área principal */}
          <div className="lg:col-span-2 space-y-6">
            {/* Upload de arquivos */}
            <div className="bg-white rounded-lg shadow p-6">
              <h2 className="text-xl font-semibold mb-4">Arquivos</h2>

              <div
                {...getRootProps()}
                className={`border-2 border-dashed rounded-lg p-12 text-center cursor-pointer transition-colors ${
                  isDragActive
                    ? 'border-blue-500 bg-blue-50'
                    : 'border-gray-300 hover:border-gray-400'
                }`}
              >
                <input {...getInputProps()} />
                <CloudArrowUpIcon className="h-12 w-12 mx-auto text-gray-400 mb-4" />
                {isDragActive ? (
                  <p className="text-blue-600">Solte os arquivos aqui...</p>
                ) : (
                  <div>
                    <p className="text-gray-600 mb-2">
                      Arraste e solte arquivos aqui, ou clique para selecionar
                    </p>
                    <p className="text-sm text-gray-500">
                      PDFs e imagens (PNG, JPG, WEBP)
                    </p>
                  </div>
                )}
              </div>

              {/* Lista de arquivos */}
              {files.length > 0 && (
                <div className="mt-4">
                  <div className="flex justify-between items-center mb-2">
                    <h3 className="font-medium">
                      Arquivos selecionados ({files.length})
                    </h3>
                    <button
                      onClick={clearFiles}
                      className="text-sm text-red-600 hover:text-red-700"
                    >
                      Limpar todos
                    </button>
                  </div>
                  <div className="space-y-2">
                    {files.map((file, index) => (
                      <div
                        key={index}
                        className="flex items-center justify-between p-3 bg-gray-50 rounded"
                      >
                        <div className="flex items-center space-x-3">
                          <DocumentIcon className="h-5 w-5 text-gray-400" />
                          <div>
                            <p className="text-sm font-medium">{file.name}</p>
                            <p className="text-xs text-gray-500">
                              {formatBytes(file.size)}
                            </p>
                          </div>
                        </div>
                        <button
                          onClick={() => removeFile(index)}
                          className="text-red-600 hover:text-red-700"
                        >
                          Remover
                        </button>
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </div>

            {/* Configurações específicas */}
            <div className="bg-white rounded-lg shadow p-6">
              <h2 className="text-xl font-semibold mb-4">Configurações</h2>

              {selectedOperation === 'compress' && (
                <div className="space-y-4">
                  <div>
                    <label className="block text-sm font-medium mb-2">
                      Qualidade ({compressQuality}%)
                    </label>
                    <input
                      type="range"
                      min="50"
                      max="100"
                      value={compressQuality}
                      onChange={(e) => setCompressQuality(parseInt(e.target.value))}
                      className="w-full"
                    />
                    <p className="text-xs text-gray-500 mt-1">
                      50-70%: Máxima compressão | 80-90%: Equilíbrio ideal | 90-100%: Alta fidelidade
                    </p>
                  </div>
                  
                  <div className="flex items-center space-x-2">
                    <input
                      type="checkbox"
                      id="enableOCR"
                      checked={enableOCR}
                      onChange={(e) => setEnableOCR(e.target.checked)}
                      className="h-4 w-4 text-blue-600 rounded"
                    />
                    <label htmlFor="enableOCR" className="text-sm font-medium">
                      Adicionar camada de OCR (tornar PDF pesquisável)
                    </label>
                  </div>
                  <p className="text-xs text-gray-500">
                    OCR torna o PDF pesquisável. É instantâneo para PDFs digitais.
                  </p>
                </div>
              )}

              {selectedOperation === 'split' && (
                <div className="space-y-4">
                  <div>
                    <label className="block text-sm font-medium mb-2">
                      Tipo de divisão
                    </label>
                    <select
                      value={splitType}
                      onChange={(e) => setSplitType(e.target.value as any)}
                      className="w-full border border-gray-300 rounded-lg px-3 py-2"
                    >
                      <option value="pages">Páginas específicas</option>
                      <option value="range">Intervalos</option>
                      <option value="chunks">Chunks (partes iguais)</option>
                    </select>
                  </div>

                  {splitType === 'pages' && (
                    <div>
                      <label className="block text-sm font-medium mb-2">
                        Páginas (separadas por vírgula)
                      </label>
                      <input
                        type="text"
                        value={splitPages}
                        onChange={(e) => setSplitPages(e.target.value)}
                        placeholder="1,2,3,5,8"
                        className="w-full border border-gray-300 rounded-lg px-3 py-2"
                      />
                    </div>
                  )}

                  {splitType === 'range' && (
                    <div>
                      <label className="block text-sm font-medium mb-2">
                        Intervalos (ex: 1-5,6-10)
                      </label>
                      <input
                        type="text"
                        value={splitRanges}
                        onChange={(e) => setSplitRanges(e.target.value)}
                        placeholder="1-5,6-10,11-15"
                        className="w-full border border-gray-300 rounded-lg px-3 py-2"
                      />
                    </div>
                  )}

                  {splitType === 'chunks' && (
                    <div>
                      <label className="block text-sm font-medium mb-2">
                        Páginas por chunk
                      </label>
                      <input
                        type="number"
                        value={chunkSize}
                        onChange={(e) => setChunkSize(parseInt(e.target.value))}
                        min="1"
                        className="w-full border border-gray-300 rounded-lg px-3 py-2"
                      />
                    </div>
                  )}
                </div>
              )}

              {selectedOperation === 'pdfToImages' && (
                <div className="space-y-4">
                  <div>
                    <label className="block text-sm font-medium mb-2">Formato</label>
                    <select
                      value={imageFormat}
                      onChange={(e) => setImageFormat(e.target.value as any)}
                      className="w-full border border-gray-300 rounded-lg px-3 py-2"
                    >
                      <option value="png">PNG</option>
                      <option value="jpg">JPG</option>
                      <option value="webp">WEBP</option>
                    </select>
                  </div>

                  <div>
                    <label className="block text-sm font-medium mb-2">
                      Qualidade ({imageQuality}%)
                    </label>
                    <input
                      type="range"
                      min="50"
                      max="100"
                      value={imageQuality}
                      onChange={(e) => setImageQuality(parseInt(e.target.value))}
                      className="w-full"
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-medium mb-2">
                      DPI ({imageDensity})
                    </label>
                    <input
                      type="range"
                      min="150"
                      max="600"
                      step="50"
                      value={imageDensity}
                      onChange={(e) => setImageDensity(parseInt(e.target.value))}
                      className="w-full"
                    />
                  </div>
                </div>
              )}

              {selectedOperation === 'ocr' && (
                <div>
                  <label className="block text-sm font-medium mb-2">Idioma</label>
                  <select
                    value={ocrLanguage}
                    onChange={(e) => setOcrLanguage(e.target.value)}
                    className="w-full border border-gray-300 rounded-lg px-3 py-2"
                  >
                    <option value="por">Português</option>
                    <option value="eng">Inglês</option>
                    <option value="spa">Espanhol</option>
                  </select>
                </div>
              )}

              {selectedOperation === 'merge' && (
                <div className="space-y-4">
                  <p className="text-sm text-gray-600">
                    Selecione 2 ou mais PDFs para mesclar em um único arquivo.
                  </p>
                  
                  <div className="flex items-center space-x-2">
                    <input
                      type="checkbox"
                      id="enableOCRMerge"
                      checked={enableOCR}
                      onChange={(e) => setEnableOCR(e.target.checked)}
                      className="h-4 w-4 text-blue-600 rounded"
                    />
                    <label htmlFor="enableOCRMerge" className="text-sm font-medium">
                      Adicionar camada de OCR ao PDF mesclado
                    </label>
                  </div>
                  <p className="text-xs text-gray-500">
                    ⚠️ OCR aumenta significativamente o tempo de processamento
                  </p>
                </div>
              )}

              {selectedOperation === 'imagesToPDF' && (
                <div className="space-y-4">
                  <p className="text-sm text-gray-600">
                    Converte múltiplas imagens em um único arquivo PDF.
                  </p>
                  
                  <div className="flex items-center space-x-2">
                    <input
                      type="checkbox"
                      id="enableOCRImages"
                      checked={enableOCR}
                      onChange={(e) => setEnableOCR(e.target.checked)}
                      className="h-4 w-4 text-blue-600 rounded"
                    />
                    <label htmlFor="enableOCRImages" className="text-sm font-medium">
                      Adicionar camada de OCR (tornar PDF pesquisável)
                    </label>
                  </div>
                  <p className="text-xs text-gray-500">
                    ⚠️ OCR aumenta significativamente o tempo de processamento
                  </p>
                </div>
              )}

              <button
                onClick={processFiles}
                disabled={processing || files.length === 0}
                className={`mt-6 w-full py-3 rounded-lg font-medium transition-colors ${
                  processing || files.length === 0
                    ? 'bg-gray-300 text-gray-500 cursor-not-allowed'
                    : 'bg-blue-600 text-white hover:bg-blue-700'
                }`}
              >
                {processing ? (
                  <span className="flex items-center justify-center">
                    <svg
                      className="animate-spin h-5 w-5 mr-2"
                      xmlns="http://www.w3.org/2000/svg"
                      fill="none"
                      viewBox="0 0 24 24"
                    >
                      <circle
                        className="opacity-25"
                        cx="12"
                        cy="12"
                        r="10"
                        stroke="currentColor"
                        strokeWidth="4"
                      ></circle>
                      <path
                        className="opacity-75"
                        fill="currentColor"
                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                      ></path>
                    </svg>
                    Processando...
                  </span>
                ) : (
                  'Processar'
                )}
              </button>
            </div>

            {/* Resultado */}
            {result && (
              <div className="bg-white rounded-lg shadow p-6">
                <h2 className="text-xl font-semibold mb-4">Resultado</h2>

                {selectedOperation === 'compress' && result.reduction !== undefined && (
                  <div className="space-y-2">
                    <p className="text-green-600 font-medium">
                      Redução de {result.reduction.toFixed(2)}%
                    </p>
                    <p className="text-sm text-gray-600">
                      Tempo de processamento: {result.processingTime}ms
                    </p>
                  </div>
                )}

                {(result.outputPaths || result.outputPath || result.zipPath) && (
                  <div className="mt-4">
                    <p className="font-medium mb-2">Arquivos gerados:</p>
                    
                    {/* Botão de download ZIP (se disponível) */}
                    {result.zipPath && (
                      <button
                        onClick={() => downloadFile(result.operacaoId, 0)}
                        className="flex items-center space-x-2 w-full p-3 mb-3 bg-blue-50 hover:bg-blue-100 rounded border-2 border-blue-300"
                      >
                        <ArrowDownTrayIcon className="h-6 w-6 text-blue-600" />
                        <div className="text-left">
                          <span className="text-sm font-semibold text-blue-900">
                            📦 Download ZIP (Todos os arquivos)
                          </span>
                          <p className="text-xs text-blue-700">
                            Recomendado para múltiplos arquivos
                          </p>
                        </div>
                      </button>
                    )}
                    
                    {/* Arquivos individuais */}
                    {result.outputPaths?.map((path, index) => {
                      // Determina o nome do arquivo baseado na operação
                      let fileName = `Arquivo ${index + 1}`;
                      if (selectedOperation === 'pdfToImages') {
                        fileName = `Imagem ${index + 1}`;
                      } else if (selectedOperation === 'split') {
                        fileName = `Página ${index + 1}`;
                      }
                      
                      return (
                        <button
                          key={index}
                          onClick={() => downloadFile(result.operacaoId, result.zipPath ? index + 1 : index)}
                          className="flex items-center space-x-2 w-full p-2 hover:bg-gray-50 rounded"
                        >
                          <ArrowDownTrayIcon className="h-5 w-5 text-blue-600" />
                          <span className="text-sm">{fileName}</span>
                        </button>
                      );
                    })}
                    {result.outputPath && !result.outputPaths && (
                      <button
                        onClick={() => downloadFile(result.operacaoId, result.zipPath ? 1 : 0)}
                        className="flex items-center space-x-2 w-full p-2 hover:bg-gray-50 rounded"
                      >
                        <ArrowDownTrayIcon className="h-5 w-5 text-blue-600" />
                        <span className="text-sm">Download</span>
                      </button>
                    )}
                  </div>
                )}

                {selectedOperation === 'ocr' && result.text && (
                  <div className="mt-4">
                    <p className="font-medium mb-2">Texto extraído:</p>
                    <div className="bg-gray-50 p-4 rounded max-h-64 overflow-y-auto">
                      <pre className="text-sm whitespace-pre-wrap">{result.text}</pre>
                    </div>
                    {result.confidence && (
                      <p className="text-sm text-gray-600 mt-2">
                        Confiança: {result.confidence.toFixed(2)}%
                      </p>
                    )}
                  </div>
                )}
              </div>
            )}
          </div>

          {/* Histórico */}
          <div className="lg:col-span-1">
            <div className="bg-white rounded-lg shadow p-6 sticky top-8">
              <div className="flex items-center justify-between mb-4">
                <h2 className="text-xl font-semibold">Histórico</h2>
                {history.length > 0 && (
                  <div className="flex space-x-2">
                    <button
                      onClick={cleanupOldFiles}
                      className="text-xs px-2 py-1 bg-yellow-100 hover:bg-yellow-200 text-yellow-800 rounded transition-colors"
                      title="Remover operações com mais de 24 horas"
                    >
                      🕐 Limpar Antigos
                    </button>
                    <button
                      onClick={clearAllHistory}
                      className="text-xs px-2 py-1 bg-red-100 hover:bg-red-200 text-red-800 rounded transition-colors"
                      title="Apagar todo o histórico e arquivos"
                    >
                      🗑️ Limpar Tudo
                    </button>
                  </div>
                )}
              </div>

              {history.length === 0 ? (
                <p className="text-gray-500 text-sm">Nenhuma operação ainda</p>
              ) : (
                <div className="space-y-3 max-h-96 overflow-y-auto">
                  {history.map((op) => (
                    <div key={op.id} className="border-b pb-3">
                      <div className="flex items-center justify-between">
                        <span className="text-sm font-medium">
                          {op.tipoOperacao.replace('_', ' ')}
                        </span>
                        <div className="flex items-center space-x-2">
                          <span
                            className={`text-xs px-2 py-1 rounded ${
                              op.status === 'CONCLUIDO'
                                ? 'bg-green-100 text-green-800'
                                : op.status === 'ERRO'
                                ? 'bg-red-100 text-red-800'
                                : 'bg-yellow-100 text-yellow-800'
                            }`}
                          >
                            {op.status}
                          </span>
                          <button
                            onClick={() => deleteOperation(op.id)}
                            className="text-red-600 hover:text-red-800 hover:bg-red-50 p-1 rounded transition-colors"
                            title="Deletar esta operação"
                          >
                            <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                              <path fillRule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clipRule="evenodd" />
                            </svg>
                          </button>
                        </div>
                      </div>
                      <div className="flex items-center text-xs text-gray-500 mt-1">
                        <ClockIcon className="h-3 w-3 mr-1" />
                        {new Date(op.criadoEm).toLocaleString('pt-BR')}
                      </div>
                      {op.tempoProcessamento && (
                        <p className="text-xs text-gray-500 mt-1">
                          {op.tempoProcessamento}ms
                        </p>
                      )}
                      {op.status === 'CONCLUIDO' && op.arquivosResultado && op.arquivosResultado.length > 0 && (
                        <div className="mt-2 space-y-1">
                          {op.arquivosResultado.map((arquivo: string, index: number) => (
                            <button
                              key={index}
                              onClick={() => downloadFile(op.id, index)}
                              className="flex items-center space-x-1 w-full text-xs text-blue-600 hover:text-blue-700 hover:bg-blue-50 p-1 rounded"
                            >
                              <ArrowDownTrayIcon className="h-3 w-3" />
                              <span>Arquivo {index + 1}</span>
                            </button>
                          ))}
                        </div>
                      )}
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};