<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Security-Policy" 
          content="default-src 'self'; 
                   script-src 'self' 'unsafe-inline' https://apis.google.com https://accounts.google.com; 
                   style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://cdn.tailwindcss.com; 
                   font-src 'self' https://fonts.gstatic.com; 
                   connect-src 'self' https://sheets.googleapis.com https://www.googleapis.com https://accounts.google.com; 
                   worker-src 'self' blob:;
                   frame-src https://accounts.google.com;">
    
    <title>High-Performance Google Sheets to PDF Converter</title>
    <meta name="description" content="Convert Google Sheets templates to PDFs with high performance batch processing">
    
    <!-- Tailwind CSS with fallback -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        // Fallback for Tailwind CSS
        setTimeout(() => {
            if (!document.querySelector('.bg-gray-50') || getComputedStyle(document.body).backgroundColor === 'rgba(0, 0, 0, 0)') {
                console.log('Tailwind CSS not loaded, using fallback styles');
                document.body.classList.add('fallback-styles');
            }
        }, 1000);
    </script>
    
    <!-- Custom Styles (includes fallback) -->
    <link rel="stylesheet" href="assets/css/styles.css">
    
    <!-- PWA Manifest -->
    <link rel="manifest" href="manifest.json">
    
    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="assets/favicon.ico">
    
    <!-- Preload critical resources -->
    <link rel="preload" href="assets/lib/jspdf.min.js" as="script">
    <link rel="preload" href="assets/lib/jszip.min.js" as="script">
</head>
<body class="bg-gray-50 min-h-screen" style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background-color: #f9fafb; margin: 0; padding: 0;">
    <!-- Header -->
    <header class="bg-white shadow-sm border-b" style="background-color: white; box-shadow: 0 1px 3px rgba(0,0,0,0.1); border-bottom: 1px solid #e5e7eb;">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" style="max-width: 80rem; margin: 0 auto; padding: 0 1rem;">
            <div class="flex justify-between items-center py-4" style="display: flex; justify-content: space-between; align-items: center; padding: 1rem 0;">
                <div class="flex items-center" style="display: flex; align-items: center;">
                    <h1 class="text-2xl font-bold text-gray-900" style="font-size: 1.5rem; font-weight: 700; color: #111827; margin: 0;">
                        📊 Sheets to PDF Converter
                    </h1>
                    <span class="ml-3 px-2 py-1 text-xs bg-blue-100 text-blue-800 rounded-full" style="margin-left: 0.75rem; padding: 0.25rem 0.5rem; font-size: 0.75rem; background-color: #dbeafe; color: #1e40af; border-radius: 9999px;">
                        High Performance
                    </span>
                </div>
                <div class="flex items-center space-x-4" style="display: flex; align-items: center; gap: 1rem;">
                    <div id="auth-status" class="text-sm text-gray-600" style="font-size: 0.875rem; color: #4b5563;">
                        Not connected
                    </div>
                    <button id="auth-btn" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors btn-blue" style="background-color: #2563eb; color: white; padding: 0.5rem 1rem; border-radius: 0.5rem; border: none; cursor: pointer; font-weight: 500;">
                        Internal Mode
                    </button>
                </div>
            </div>
        </div>
    </header>

    <!-- Main Content -->
    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8" style="max-width: 80rem; margin: 0 auto; padding: 2rem 1rem;">
        <!-- Configuration Panel -->
        <div id="config-panel" class="mb-8" style="margin-bottom: 2rem;">
            <div class="bg-white rounded-lg shadow-sm border p-6 card" style="background-color: white; border-radius: 0.5rem; border: 1px solid #e5e7eb; padding: 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
                <h2 class="text-xl font-semibold text-gray-900 mb-6" style="font-size: 1.25rem; font-weight: 600; color: #111827; margin-bottom: 1.5rem;">Configuration</h2>
                
                <!-- Google Sheets Selection -->
                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        Google Sheets Document (or leave empty for mock data)
                    </label>
                    <div class="flex space-x-4">
                        <input type="text" 
                               id="sheet-id" 
                               placeholder="Enter Google Sheets ID/URL or leave empty for demo data"
                               class="flex-1 border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <button id="load-sheet-btn" 
                                class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition-colors">
                            Load Data
                        </button>
                    </div>
                    <p class="text-xs text-gray-500 mt-1">
                        💡 Running in internal mode - leave empty to use sample data for testing
                    </p>
                </div>

                <!-- Template Upload -->
                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        HTML Template (with {{variable}} placeholders)
                    </label>
                    <div class="border-2 border-dashed border-gray-300 rounded-lg p-6">
                        <input type="file" 
                               id="template-upload" 
                               accept=".html,.htm" 
                               class="hidden">
                        <div id="template-drop-zone" class="text-center cursor-pointer">
                            <div class="text-gray-400 mb-2">
                                📄 Drop HTML template here or click to browse
                            </div>
                            <button type="button" 
                                    class="text-blue-600 hover:text-blue-700"
                                    onclick="document.getElementById('template-upload').click()">
                                Choose File
                            </button>
                        </div>
                        <div id="template-preview" class="hidden mt-4 p-4 bg-gray-50 rounded border text-sm font-mono text-gray-700 max-h-32 overflow-y-auto"></div>
                    </div>
                </div>

                <!-- Variable Mapping -->
                <div id="mapping-section" class="mb-6 hidden">
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        Variable Mapping
                    </label>
                    <div id="variable-mapping" class="space-y-2"></div>
                </div>

                <!-- Processing Options -->
                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        Processing Options
                    </label>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div>
                            <label class="block text-xs text-gray-600 mb-1">Batch Size</label>
                            <select id="batch-size" class="w-full border border-gray-300 rounded px-3 py-2 text-sm">
                                <option value="10">10 documents</option>
                                <option value="20" selected>20 documents</option>
                                <option value="30">30 documents</option>
                                <option value="50">50 documents</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-xs text-gray-600 mb-1">Worker Threads</label>
                            <select id="max-workers" class="w-full border border-gray-300 rounded px-3 py-2 text-sm">
                                <option value="2">2 workers</option>
                                <option value="4" selected>4 workers</option>
                                <option value="6">6 workers</option>
                                <option value="8">8 workers</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-xs text-gray-600 mb-1">PDF Format</label>
                            <select id="pdf-format" class="w-full border border-gray-300 rounded px-3 py-2 text-sm">
                                <option value="a4" selected>A4</option>
                                <option value="letter">Letter</option>
                                <option value="a3">A3</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- Start Processing Button -->
                <div class="flex justify-center">
                    <button id="start-processing" 
                            class="bg-blue-600 text-white px-8 py-3 rounded-lg hover:bg-blue-700 transition-colors disabled:bg-gray-400 disabled:cursor-not-allowed"
                            disabled>
                        <span id="start-btn-text">Start PDF Generation</span>
                        <span id="start-btn-loading" class="hidden">
                            <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white inline" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                <path class="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>
                            Processing...
                        </span>
                    </button>
                </div>
            </div>
        </div>

        <!-- Progress Monitor -->
        <div id="progress-panel" class="mb-8 hidden">
            <div class="bg-white rounded-lg shadow-sm border p-6">
                <h2 class="text-xl font-semibold text-gray-900 mb-6">Processing Progress</h2>
                
                <!-- Progress Bar -->
                <div class="mb-4">
                    <div class="flex justify-between text-sm text-gray-600 mb-2">
                        <span>Progress</span>
                        <span id="progress-percentage">0%</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-3">
                        <div id="progress-bar" class="bg-blue-600 h-3 rounded-full transition-all duration-500" style="width: 0%"></div>
                    </div>
                </div>

                <!-- Progress Stats -->
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
                    <div class="text-center">
                        <div class="text-2xl font-bold text-blue-600" id="processed-count">0</div>
                        <div class="text-sm text-gray-600">Processed</div>
                    </div>
                    <div class="text-center">
                        <div class="text-2xl font-bold text-gray-900" id="total-count">0</div>
                        <div class="text-sm text-gray-600">Total</div>
                    </div>
                    <div class="text-center">
                        <div class="text-2xl font-bold text-green-600" id="throughput">0</div>
                        <div class="text-sm text-gray-600">Docs/min</div>
                    </div>
                    <div class="text-center">
                        <div class="text-2xl font-bold text-purple-600" id="eta">--:--</div>
                        <div class="text-sm text-gray-600">ETA</div>
                    </div>
                </div>

                <!-- Performance Metrics -->
                <div class="grid grid-cols-2 md:grid-cols-3 gap-4 text-sm">
                    <div class="flex justify-between">
                        <span class="text-gray-600">Memory Usage:</span>
                        <span id="memory-usage" class="font-medium">-- MB</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">Active Workers:</span>
                        <span id="active-workers" class="font-medium">0</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">Errors:</span>
                        <span id="error-count" class="font-medium text-red-600">0</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Download Section -->
        <div id="download-panel" class="hidden">
            <div class="bg-white rounded-lg shadow-sm border p-6">
                <h2 class="text-xl font-semibold text-gray-900 mb-6">Download Results</h2>
                
                <div class="text-center">
                    <div class="text-green-600 text-6xl mb-4">✅</div>
                    <h3 class="text-2xl font-bold text-gray-900 mb-2">Processing Complete!</h3>
                    <p class="text-gray-600 mb-6">
                        Successfully generated <span id="success-count" class="font-semibold">0</span> PDF documents
                    </p>
                    
                    <div class="space-y-4">
                        <button id="download-zip" 
                                class="bg-green-600 text-white px-8 py-3 rounded-lg hover:bg-green-700 transition-colors">
                            📥 Download ZIP Archive
                        </button>
                        
                        <div class="text-sm text-gray-500">
                            Archive size: <span id="archive-size">-- MB</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Error Messages -->
        <div id="error-panel" class="hidden">
            <div class="bg-red-50 border border-red-200 rounded-lg p-4">
                <div class="flex">
                    <div class="text-red-400 text-xl mr-3">⚠️</div>
                    <div>
                        <h3 class="text-red-800 font-semibold">Error</h3>
                        <p id="error-message" class="text-red-700 mt-1"></p>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- Footer -->
    <footer class="bg-white border-t mt-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
            <div class="text-center text-gray-500 text-sm">
                <p>High-Performance Google Sheets to PDF Converter</p>
                <p class="mt-1">Optimized for processing 100-200 documents in 1-5 minutes</p>
            </div>
        </div>
    </footer>

    <!-- External Libraries -->
    <script src="https://apis.google.com/js/api.js"></script>
    <script src="assets/lib/jspdf.min.js"></script>
    <script src="assets/lib/jszip.min.js"></script>
    
    <!-- Application Scripts -->
    <script src="assets/js/utils/api-client.js"></script>
    <script src="assets/js/utils/template-engine.js"></script>
    <script src="assets/js/utils/performance-monitor.js"></script>
    <script src="assets/js/components/config-panel.js"></script>
    <script src="assets/js/components/progress-monitor.js"></script>
    <script src="assets/js/components/download-manager.js"></script>
    <script src="assets/js/app.js"></script>

    <!-- Service Worker Registration -->
    <script>
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('/sw.js')
                    .then(registration => console.log('SW registered'))
                    .catch(error => console.log('SW registration failed'));
            });
        }
    </script>
</body>
</html>