import React, { useState, useEffect, useCallback } from 'react';
import { UploadCloud, FileType, CheckCircle, AlertTriangle, Download, Settings, Trash2, X, RefreshCw, Layers } from 'lucide-react';

export default function App() {
  const [files, setFiles] = useState([]);
  const [jsZipLoaded, setJsZipLoaded] = useState(false);
  const [status, setStatus] = useState('idle'); 
  const [progressMsg, setProgressMsg] = useState('');
  const [progressPct, setProgressPct] = useState(0); 
  const [downloadUrl, setDownloadUrl] = useState(null);
  const [stats, setStats] = useState(null);
  
  const [resolution, setResolution] = useState(4096);

  const resetApp = () => {
    setFiles([]);
    setStatus('idle');
    setProgressMsg('');
    setProgressPct(0);
    if (downloadUrl) URL.revokeObjectURL(downloadUrl);
    setDownloadUrl(null);
    setStats(null);
  };

  useEffect(() => {
    if (window.JSZip) {
      setJsZipLoaded(true);
      return;
    }
    const script = document.createElement('script');
    script.src = 'https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js';
    script.async = true;
    script.onload = () => setJsZipLoaded(true);
    document.body.appendChild(script);
  }, []);

  const handleDragOver = useCallback((e) => {
    e.preventDefault();
    e.stopPropagation();
  }, []);

  const handleDrop = useCallback((e) => {
    e.preventDefault();
    e.stopPropagation();
    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
      const droppedFiles = Array.from(e.dataTransfer.files).filter(
        f => f.name.toLowerCase().endsWith('.kmz') || f.name.toLowerCase().endsWith('.kml')
      );
      setFiles(prev => [...prev, ...droppedFiles]);
    }
  }, []);

  const handleFileSelect = (e) => {
    if (e.target.files && e.target.files.length > 0) {
      const selectedFiles = Array.from(e.target.files);
      setFiles(prev => [...prev, ...selectedFiles]);
    }
  };

  const removeFile = (indexToRemove) => {
    setFiles(files.filter((_, index) => index !== indexToRemove));
  };

  // Retorna a cor 100% SÓLIDA (rgb) para evitar manchas se houver blocos sobrepostos no arquivo original
  const parseKmlColor = (kmlColor) => {
    if (!kmlColor) return null; 
    let cleanColor = kmlColor.replace('#', '').trim();
    if (cleanColor.length === 6) cleanColor = 'FF' + cleanColor;
    if (cleanColor.length !== 8) return null;
    
    const b = parseInt(cleanColor.substring(2, 4), 16);
    const g = parseInt(cleanColor.substring(4, 6), 16);
    const r = parseInt(cleanColor.substring(6, 8), 16);
    
    return `rgb(${r}, ${g}, ${b})`;
  };

  const extractTagContent = (xml, tagName, startOffset = 0) => {
    const startTag = `<${tagName}`;
    const endTag = `</${tagName}>`;
    
    const startIdx = xml.indexOf(startTag, startOffset);
    if (startIdx === -1) return null;
    
    const closeBracketIdx = xml.indexOf('>', startIdx);
    if (closeBracketIdx === -1) return null;
    
    const endIdx = xml.indexOf(endTag, closeBracketIdx);
    if (endIdx === -1) return null;
    
    return {
        content: xml.substring(closeBracketIdx + 1, endIdx),
        nextIndex: endIdx + endTag.length,
        fullMatch: xml.substring(startIdx, endIdx + endTag.length)
    };
  };

  const parseCoordinates = (str) => {
    const normalized = str.replace(/[\n\r]/g, ' ').replace(/,\s+/g, ',').trim();
    const tuples = normalized.split(/\s+/);
    const points = [];
    
    for (let i = 0; i < tuples.length; i++) {
        const parts = tuples[i].split(',');
        if (parts.length >= 2) {
            const lon = parseFloat(parts[0]);
            const lat = parseFloat(parts[1]);
            if (!isNaN(lon) && !isNaN(lat)) {
                if (lon === 0 && lat === 0) continue;
                if (lon < -180 || lon > 180 || lat < -90 || lat > 90) continue;
                points.push({ lon, lat });
            }
        }
    }
    return points;
  };

  const yieldToBrowser = () => new Promise(resolve => setTimeout(resolve, 0));

  const processFiles = async () => {
    if (!jsZipLoaded || files.length === 0) return;

    setStatus('processing');
    setDownloadUrl(null);
    setStats(null);
    setProgressPct(0);
    
    try {
      let globalMinLat = 90, globalMaxLat = -90, globalMinLon = 180, globalMaxLon = -180;
      let totalPolygonsProcessed = 0;

      // ==============================================================================
      // PASSO 1: LEITURA RÁPIDA (CALCULAR CAIXA GLOBAL DA COBERTURA)
      // ==============================================================================
      for (let fIndex = 0; fIndex < files.length; fIndex++) {
        const file = files[fIndex];
        
        setProgressPct(Math.round((fIndex / files.length) * 20));
        setProgressMsg(`[Passo 1/2] Mapeando limites: ${fIndex + 1}/${files.length}`);
        await yieldToBrowser();

        let kmlText = '';
        try {
          if (file.name.toLowerCase().endsWith('.kmz')) {
            const zip = new window.JSZip();
            const loadedZip = await zip.loadAsync(file);
            const kmlFile = Object.values(loadedZip.files).find(f => f.name.toLowerCase().endsWith('.kml'));
            if (kmlFile) kmlText = await kmlFile.async("string");
          } else {
            kmlText = await file.text();
          }
        } catch (err) { continue; }

        if (!kmlText) continue;

        let searchIdx = 0;
        while (true) {
            const tag = extractTagContent(kmlText, 'coordinates', searchIdx);
            if (!tag) break;
            searchIdx = tag.nextIndex;

            const pts = parseCoordinates(tag.content);
            for (let k = 0; k < pts.length; k++) {
                const pt = pts[k];
                if (pt.lat < globalMinLat) globalMinLat = pt.lat;
                if (pt.lat > globalMaxLat) globalMaxLat = pt.lat;
                if (pt.lon < globalMinLon) globalMinLon = pt.lon;
                if (pt.lon > globalMaxLon) globalMaxLon = pt.lon;
            }
        }
        kmlText = null; 
      }

      if (globalMinLat === 90 || globalMaxLat === -90) {
        throw new Error("Nenhuma coordenada válida encontrada nos arquivos.");
      }

      globalMinLat -= 0.0005;
      globalMaxLat += 0.0005;
      globalMinLon -= 0.0005;
      globalMaxLon += 0.0005;

      // ==============================================================================
      // PREPARAR O CANVAS NÍTIDO
      // ==============================================================================
      const widthDeg = globalMaxLon - globalMinLon;
      const heightDeg = globalMaxLat - globalMinLat;
      const ratio = widthDeg > 0 && heightDeg > 0 ? widthDeg / heightDeg : 1;

      let canvasWidth = resolution;
      let canvasHeight = Math.round(resolution / ratio);

      if (canvasHeight > resolution) {
          canvasHeight = resolution;
          canvasWidth = Math.round(resolution * ratio);
      }

      canvasWidth = Math.max(1, canvasWidth);
      canvasHeight = Math.max(1, canvasHeight);

      const canvas = document.createElement('canvas');
      canvas.width = canvasWidth;
      canvas.height = canvasHeight;
      const ctx = canvas.getContext('2d', { alpha: true });
      
      // DESATIVA A SUAVIZAÇÃO PARA DEIXAR OS PIXELS TOTALMENTE NÍTIDOS
      ctx.imageSmoothingEnabled = false; 
      ctx.clearRect(0, 0, canvasWidth, canvasHeight);

      const safeWidthDeg = widthDeg > 0 ? widthDeg : 0.0001;
      const safeHeightDeg = heightDeg > 0 ? heightDeg : 0.0001;

      // ==============================================================================
      // PASSO 2: PINTURA SÓLIDA COM FILLRECT (O SEGREDO DA NITIDEZ)
      // ==============================================================================
      for (let fIndex = 0; fIndex < files.length; fIndex++) {
        const file = files[fIndex];
        
        setProgressPct(20 + Math.round((fIndex / files.length) * 70)); 
        setProgressMsg(`[Passo 2/2] Pintando blocos nítidos: ${fIndex + 1}/${files.length}`);
        await yieldToBrowser(); 

        let kmlText = '';
        try {
          if (file.name.toLowerCase().endsWith('.kmz')) {
            const zip = new window.JSZip();
            const loadedZip = await zip.loadAsync(file);
            const kmlFile = Object.values(loadedZip.files).find(f => f.name.toLowerCase().endsWith('.kml'));
            if (kmlFile) kmlText = await kmlFile.async("string");
          } else {
            kmlText = await file.text();
          }
        } catch (err) { continue; }

        if (!kmlText) continue;

        const styles = {};
        const styleMaps = {};

        let sIdx = 0;
        while (true) {
            const styleRes = extractTagContent(kmlText, 'Style', sIdx);
            if (!styleRes) break;
            sIdx = styleRes.nextIndex;
            
            const idMatch = styleRes.fullMatch.match(/id=["']([^"']+)["']/);
            if (idMatch) {
                const id = idMatch[1];
                let color = null;
                const polyMatch = styleRes.content.match(/<PolyStyle>[\s\S]*?<color>([^<]+)<\/color>[\s\S]*?<\/PolyStyle>/);
                if (polyMatch) color = polyMatch[1];
                else {
                    const lineMatch = styleRes.content.match(/<LineStyle>[\s\S]*?<color>([^<]+)<\/color>[\s\S]*?<\/LineStyle>/);
                    if (lineMatch) color = lineMatch[1];
                }
                if (color) styles['#' + id] = parseKmlColor(color.trim());
            }
        }

        let smIdx = 0;
        while (true) {
            const smRes = extractTagContent(kmlText, 'StyleMap', smIdx);
            if (!smRes) break;
            smIdx = smRes.nextIndex;
            
            const idMatch = smRes.fullMatch.match(/id=["']([^"']+)["']/);
            if (idMatch) {
                const id = idMatch[1];
                const pairRegex = /<Pair>[\s\S]*?<key>normal<\/key>[\s\S]*?<styleUrl>([^<]+)<\/styleUrl>[\s\S]*?<\/Pair>/;
                const pairMatch = smRes.content.match(pairRegex);
                if (pairMatch) {
                    let sUrl = pairMatch[1].trim();
                    styleMaps['#' + id] = sUrl.startsWith('#') ? sUrl : '#' + sUrl;
                }
            }
        }

        const getColor = (url) => {
            let k = url.startsWith('#') ? url : '#' + url;
            if (styleMaps[k]) k = styleMaps[k];
            return styles[k] || 'rgb(255, 0, 0)'; 
        };

        let pmIdx = 0;
        let blocksDrawn = 0;

        while (true) {
            const pmRes = extractTagContent(kmlText, 'Placemark', pmIdx);
            if (!pmRes) break;
            pmIdx = pmRes.nextIndex;

            const pmBlock = pmRes.content;

            let blockColor = 'rgb(255, 0, 0)';
            const styleUrlMatch = pmBlock.match(/<styleUrl>([^<]+)<\/styleUrl>/);
            if (styleUrlMatch) {
                blockColor = getColor(styleUrlMatch[1].trim());
            } else {
                const colorMatch = pmBlock.match(/<color>([^<]+)<\/color>/);
                if (colorMatch) {
                    const parsed = parseKmlColor(colorMatch[1].trim());
                    if (parsed) blockColor = parsed;
                }
            }

            let coordIdx = 0;
            while (true) {
                const cRes = extractTagContent(pmBlock, 'coordinates', coordIdx);
                if (!cRes) break;
                coordIdx = cRes.nextIndex;

                const pts = parseCoordinates(cRes.content);
                if (pts.length > 0) {
                    let minLon = 180, maxLon = -180, minLat = 90, maxLat = -90;
                    
                    for (let k = 0; k < pts.length; k++) {
                        const pt = pts[k];
                        if (pt.lon < minLon) minLon = pt.lon;
                        if (pt.lon > maxLon) maxLon = pt.lon;
                        if (pt.lat < minLat) minLat = pt.lat;
                        if (pt.lat > maxLat) maxLat = pt.lat;
                    }

                    if (minLon !== 180) {
                        // Usa fillRect para criar quadrados perfeitos. Sem linhas (stroke) ou paths.
                        // O Math.round trava os cálculos nos pixels inteiros e elimina borrões.
                        const x1 = Math.round(((minLon - globalMinLon) / safeWidthDeg) * canvasWidth);
                        const x2 = Math.round(((maxLon - globalMinLon) / safeWidthDeg) * canvasWidth);
                        const y1 = Math.round(canvasHeight - (((maxLat - globalMinLat) / safeHeightDeg) * canvasHeight)); // Y topo
                        const y2 = Math.round(canvasHeight - (((minLat - globalMinLat) / safeHeightDeg) * canvasHeight)); // Y base
                        
                        const x = x1;
                        const y = y1;
                        const w = Math.max(1, x2 - x1);
                        const h = Math.max(1, y2 - y1);

                        ctx.fillStyle = blockColor;
                        ctx.fillRect(x, y, w, h);
                        
                        totalPolygonsProcessed++;
                    }
                }
            }

            blocksDrawn++;
            if (blocksDrawn % 1000 === 0) await yieldToBrowser();
        }
        
        kmlText = null; 
      } 

      if (totalPolygonsProcessed === 0) throw new Error("Nenhum bloco desenhado.");

      // ==============================================================================
      // PASSO 3: GERAÇÃO DO KMZ COM OPACIDADE GLOBAL
      // ==============================================================================
      setProgressPct(95);
      setProgressMsg('Convertendo binários da Imagem (Aguarde)...');
      await yieldToBrowser();

      const imageBlob = await new Promise(resolve => canvas.toBlob(resolve, 'image/png'));
      if (!imageBlob) {
          throw new Error("Erro de renderização: a carga excedeu os limites gráficos.");
      }
      const imageArrayBuffer = await imageBlob.arrayBuffer();

      const overlayImageName = `overlay_${Date.now()}.png`;

      // <color>B3FFFFFF</color> = O Google Earth aplica 70% de opacidade à imagem perfeitamente sólida,
      // deixando a cobertura limpa, com os pixels definidos e o mapa do chão visível.
      const kmlContent = `<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
  <Document>
    <name>Cobertura Consolidada</name>
    <description>Otimizado em Pixel-Perfect.</description>
    <GroundOverlay>
      <name>Malha de Cobertura Global</name>
      <visibility>1</visibility>
      <color>B3FFFFFF</color>
      <altitudeMode>clampToGround</altitudeMode>
      <drawOrder>99</drawOrder>
      <Icon>
        <href>${overlayImageName}</href>
      </Icon>
      <LatLonBox>
        <north>${globalMaxLat.toFixed(6)}</north>
        <south>${globalMinLat.toFixed(6)}</south>
        <east>${globalMaxLon.toFixed(6)}</east>
        <west>${globalMinLon.toFixed(6)}</west>
      </LatLonBox>
    </GroundOverlay>
  </Document>
</kml>`;

      const resultZip = new window.JSZip();
      resultZip.file("doc.kml", kmlContent);
      resultZip.file(overlayImageName, imageArrayBuffer); 
      
      const content = await resultZip.generateAsync({ type: "blob", compression: "DEFLATE" });
      const url = URL.createObjectURL(content);
      
      setProgressPct(100);
      setDownloadUrl(url);
      setStats({
        originalFiles: files.length,
        polygonsProcessed: totalPolygonsProcessed,
        dimensions: `${canvasWidth} x ${canvasHeight} px`,
        fileSize: (content.size / 1024 / 1024).toFixed(2) + ' MB'
      });
      setStatus('done');

    } catch (error) {
      console.error(error);
      setProgressMsg(error.message || "Erro crítico durante o processamento.");
      setStatus('error');
    }
  };

  return (
    <div className="min-h-screen bg-[#FAFAFA] text-slate-900 font-sans py-12 px-4 sm:px-6 flex flex-col items-center">
      <div className="w-full max-w-3xl space-y-8">
        
        <header className="text-center">
          <div className="inline-flex items-center justify-center p-3 bg-black rounded-2xl mb-4 shadow-lg shadow-slate-200">
            <Layers className="w-8 h-8 text-white" />
          </div>
          <h1 className="text-3xl font-bold tracking-tight text-slate-900">Otimizador Extremo KMZ</h1>
          <p className="text-base text-slate-500 mt-2">Unifique centenas de grids em uma única imagem de pixels nítidos.</p>
        </header>

        {status === 'done' && stats ? (
          <div className="bg-white border border-slate-200 rounded-3xl p-8 sm:p-10 text-center space-y-8 shadow-xl shadow-slate-100/50">
            <div className="w-16 h-16 bg-green-50 text-green-600 rounded-full flex items-center justify-center mx-auto ring-8 ring-green-50/50">
              <CheckCircle className="w-8 h-8" />
            </div>
            <div>
              <h2 className="text-2xl font-bold text-slate-800">Fusão Concluída!</h2>
              <p className="text-slate-500 mt-2">Seus {stats.originalFiles} arquivos geraram uma única imagem perfeitamente otimizada.</p>
            </div>
            
            <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 bg-slate-50 p-4 rounded-2xl border border-slate-100">
              <div className="p-3 bg-white rounded-xl shadow-sm border border-slate-50">
                <span className="block text-xl font-bold text-slate-900 mb-1">{stats.polygonsProcessed.toLocaleString()}</span>
                <span className="text-xs font-medium text-slate-500 uppercase tracking-wider">Blocos Sólidos</span>
              </div>
              <div className="p-3 bg-white rounded-xl shadow-sm border border-slate-50">
                <span className="block text-xl font-bold text-slate-900 mb-1">{stats.dimensions.split(' ')[0]}<span className="text-sm font-normal text-slate-400 mx-1">x</span>{stats.dimensions.split(' ')[2]}</span>
                <span className="text-xs font-medium text-slate-500 uppercase tracking-wider">Resolução Nítida</span>
              </div>
              <div className="p-3 bg-white rounded-xl shadow-sm border border-slate-50">
                <span className="block text-xl font-bold text-slate-900 mb-1">{stats.fileSize}</span>
                <span className="text-xs font-medium text-slate-500 uppercase tracking-wider">Tamanho Final</span>
              </div>
            </div>

            <div className="flex flex-col sm:flex-row justify-center gap-4 pt-4">
              <a 
                href={downloadUrl} 
                download={`cobertura_unificada_${Date.now()}.kmz`} 
                className="flex-1 sm:flex-none inline-flex items-center justify-center gap-2 px-8 py-4 bg-black text-white text-sm font-semibold rounded-2xl hover:bg-slate-800 transition-all shadow-lg hover:shadow-xl hover:-translate-y-0.5 active:translate-y-0"
              >
                <Download className="w-5 h-5" /> Baixar KMZ Único
              </a>
              <button 
                onClick={resetApp} 
                className="flex-1 sm:flex-none inline-flex items-center justify-center gap-2 px-8 py-4 bg-white border-2 border-slate-200 text-slate-700 text-sm font-semibold rounded-2xl hover:bg-slate-50 hover:border-slate-300 transition-all"
              >
                <RefreshCw className="w-5 h-5" /> Converter Novos
              </button>
            </div>
          </div>
        ) : (
          <div className="space-y-6">
            <div
              onDragOver={handleDragOver}
              onDrop={handleDrop}
              className="border-2 border-dashed border-slate-300 hover:border-slate-400 hover:bg-slate-50 bg-white rounded-3xl p-12 text-center transition-all cursor-pointer group relative shadow-sm"
            >
              <input 
                type="file" 
                multiple 
                accept=".kmz,.kml" 
                onChange={handleFileSelect} 
                className="absolute inset-0 w-full h-full opacity-0 cursor-pointer" 
                disabled={status === 'processing'} 
              />
              <div className="w-16 h-16 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-slate-200 transition-colors">
                <UploadCloud className="w-8 h-8 text-slate-500 group-hover:text-black transition-colors" />
              </div>
              <h3 className="text-lg font-semibold text-slate-800">Arraste seus arquivos para cá</h3>
              <p className="text-sm text-slate-500 mt-2">Suporta múltiplos Gigabytes. Otimização imune a travamentos.</p>
            </div>

            {files.length > 0 && (
              <div className="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm">
                <div className="flex justify-between items-center mb-4 pb-3 border-b border-slate-100">
                  <span className="text-sm font-bold text-slate-800 flex items-center gap-2">
                    <FileType className="w-4 h-4 text-slate-400" />
                    Fila de Arquivos <span className="bg-slate-100 text-slate-600 px-2 py-0.5 rounded-md text-xs">{files.length}</span>
                  </span>
                  <button onClick={() => setFiles([])} className="text-xs font-semibold text-red-500 hover:text-red-700 transition-colors bg-red-50 hover:bg-red-100 px-3 py-1.5 rounded-lg" disabled={status === 'processing'}>
                    Limpar tudo
                  </button>
                </div>
                <div className="space-y-1.5 max-h-56 overflow-y-auto custom-scrollbar pr-2">
                  {files.map((f, i) => (
                    <div key={i} className="flex items-center justify-between group py-2 px-3 hover:bg-slate-50 rounded-lg transition-colors border border-transparent hover:border-slate-100">
                      <div className="flex items-center gap-3 overflow-hidden">
                        <div className="w-8 h-8 bg-slate-100 rounded flex items-center justify-center shrink-0">
                          <FileType className="w-4 h-4 text-slate-500" />
                        </div>
                        <div className="flex flex-col overflow-hidden">
                          <span className="text-sm font-medium text-slate-700 truncate">{f.name}</span>
                          <span className="text-xs text-slate-400">{(f.size / 1024 / 1024).toFixed(2)} MB</span>
                        </div>
                      </div>
                      <button onClick={() => removeFile(i)} className="opacity-0 group-hover:opacity-100 p-2 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-all" disabled={status === 'processing'}>
                        <X className="w-4 h-4" />
                      </button>
                    </div>
                  ))}
                </div>
              </div>
            )}

            <div className="bg-white border border-slate-200 rounded-2xl p-6 shadow-sm space-y-6">
              <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                <div className="space-y-1">
                  <label className="text-base font-semibold text-slate-800">Resolução da Malha Final</label>
                  <p className="text-sm text-slate-500">Imagens 4096px são altamente seguras contra falhas no Google Earth.</p>
                </div>
                <select 
                  value={resolution} 
                  onChange={e => setResolution(Number(e.target.value))} 
                  disabled={status === 'processing'} 
                  className="w-full sm:w-auto text-sm font-medium border-2 border-slate-200 text-slate-800 rounded-xl px-4 py-3 outline-none focus:ring-2 focus:ring-black focus:border-black bg-white cursor-pointer transition-all"
                >
                  <option value={2048}>2048px (Ultra Rápido/Mobile)</option>
                  <option value={4096}>4096px (Recomendado/Estável)</option>
                  <option value={8192}>8192px (Cinema/Pode Ocultar Imagem)</option>
                </select>
              </div>
            </div>

            <div className="pt-4">
              {status === 'processing' ? (
                <div className="bg-white border border-slate-200 rounded-2xl p-8 shadow-lg shadow-slate-100/50">
                  <div className="flex justify-between items-end mb-3">
                    <div className="space-y-1">
                      <span className="text-sm font-bold text-slate-800 block uppercase tracking-wider">Processando Lote</span>
                      <span className="text-sm font-medium text-slate-500">{progressMsg}</span>
                    </div>
                    <span className="text-2xl font-black text-black">{progressPct}%</span>
                  </div>
                  <div className="w-full bg-slate-100 rounded-full h-3 overflow-hidden">
                    <div className="bg-black h-3 rounded-full transition-all duration-300 ease-out relative" style={{ width: `${progressPct}%` }}>
                       <div className="absolute top-0 left-0 bottom-0 right-0 bg-white/20 animate-pulse"></div>
                    </div>
                  </div>
                </div>
              ) : (
                <button 
                  onClick={processFiles} 
                  disabled={files.length === 0 || !jsZipLoaded} 
                  className="w-full bg-black text-white hover:bg-slate-800 disabled:bg-slate-100 disabled:text-slate-400 disabled:border disabled:border-slate-200 font-bold text-base py-5 rounded-2xl transition-all shadow-xl hover:shadow-2xl hover:-translate-y-0.5 active:translate-y-0 disabled:shadow-none disabled:transform-none flex justify-center items-center gap-3"
                >
                  {jsZipLoaded ? 'Unificar Todos os Arquivos (Cores Sólidas)' : 'Carregando Motor Gráfico...'}
                </button>
              )}
            </div>
            
            {status === 'error' && (
              <div className="bg-red-50 text-red-700 p-5 rounded-2xl border border-red-200 flex gap-3 shadow-sm">
                <AlertTriangle className="w-6 h-6 shrink-0 text-red-500" />
                <div>
                   <h4 className="font-bold">Ocorreu um problema</h4>
                   <span className="text-sm mt-1 block">{progressMsg}</span>
                </div>
              </div>
            )}
          </div>
        )}

      </div>
    </div>
  );
}