<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PrintGuard Setup</title>
    <link rel="stylesheet" href="{{ url_for('static', path='css/universal.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', path='css/setup.css') }}">
    <link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding&display=swap" rel="stylesheet">
    <script type="module" src="{{ url_for('static', path='js/utils.js') }}" defer></script>
    <script type="module" src="{{ url_for('static', path='js/setup.js') }}" defer></script>
    <script src="https://cdn.jsdelivr.net/npm/figlet@1.8.1/lib/figlet.min.js"></script>
</head>
<body>
    <div class="container">
        <pre id="ascii-title"></pre>
        <h2>First-time Setup</h2>
        <p>Complete the following setup to start using PrintGuard.</p>
        
        <div id="setup-progress" style="display:none;">
            <div class="progress-step active" data-step="vapid">1. VAPID Keys</div>
            <div class="progress-step" data-step="ssl">2. SSL Certificate</div>
            <div class="progress-step" data-step="finish">3. Finish</div>
        </div>
        
        <div id="setup-progress-external" style="display:none;">
            <div class="progress-step active" data-step="tunnel">1. Tunnel Provider</div>
            <div class="progress-step" data-step="initialize">2. Initialize Provider</div>
            <div class="progress-step" data-step="vapid">3. VAPID Keys</div>
            <div class="progress-step" data-step="finish">4. Finish</div>
        </div>
        
        <div id="setup-progress-ngrok" style="display:none;">
            <div class="progress-step active" data-step="tunnel">1. Tunnel Provider</div>
            <div class="progress-step" data-step="initialize">2. Initialize Tunnel</div>
            <div class="progress-step" data-step="vapid">3. VAPID Keys</div>
            <div class="progress-step" data-step="finish">4. Finish</div>
        </div>
        
        <div id="setup-progress-cloudflare" style="display:none;">
            <div class="progress-step active" data-step="tunnel">1. Tunnel Provider</div>
            <div class="progress-step" data-step="tunnel-config">2. Tunnel Configuration</div>
            <div class="progress-step" data-step="vapid">3. VAPID Keys</div>
            <div class="progress-step" data-step="cloudflare-download">4. Download Cloudflare</div>
            <div class="progress-step" data-step="finish">5. Finish</div>
        </div>
        
        <div id="setup-content">
            <div class="setup-section active" id="network-section">
                <h3>Network Configuration</h3>
                <p>Choose how you want to set up your PrintGuard service.</p>
                
                <div class="option-buttons">
                    <button id="local-network-btn" class="setup-btn network-option">
                        <div class="option-title">Local Network Only</div>
                        <div class="option-description">
                            Set up the service for use within your local network only. 
                            Note: You will not be able to receive notifications or view cameras from outside your local network.
                        </div>
                    </button>
                    <button id="external-network-btn" class="setup-btn network-option">
                        <div class="option-title">External Network Access</div>
                        <div class="option-description">
                            Configure the service to be accessible from outside your network.
                            Ideal for remote monitoring and access from anywhere.
                        </div>
                    </button>
                </div>
            </div>
            <div class="setup-section" id="tunnel-section">
                <h3>Tunnel Provider Setup</h3>
                <p>Choose a tunnel provider to enable external access to your PrintGuard service.</p>
                
                <div class="option-buttons">
                    <button id="ngrok-btn" class="setup-btn tunnel-option">
                        <div class="option-title">Ngrok</div>
                        <div class="option-description">
                            Free tunnel service with dynamic URLs. Easy to set up and get started quickly.
                            The URL changes every time you start the service.
                        </div>
                    </button>
                    <button id="cloudflare-btn" class="setup-btn tunnel-option">
                        <div class="recommended-badge">Recommended</div>
                        <div class="option-title">Cloudflare Tunnel</div>
                        <div class="option-description">
                            Free tunnel service with the ability to link to a static custom domain.
                            Ideal for permanent setups and professional use. Optional authentication 
                            policies can be applied to restrict access to authorized users/emails only 
                            for added security. <i>Note: Requires Cloudflare registered domain.</i> 
                        </div>
                    </button>
                </div>
                
                <div class="form-section" id="tunnel-form" style="display:none;">
                    <div class="form-group" id="ngrok-config" style="display:none;">
                        <label for="ngrok-auth-token">Ngrok Auth Token</label>
                        <input type="text" id="ngrok-auth-token" name="ngrok-auth-token" placeholder="Your Ngrok auth token" required>
                        <small>Get your auth token from <a href="https://dashboard.ngrok.com/get-started/your-authtoken" target="_blank">Ngrok Dashboard</a></small>
                        
                        <div style="margin-top: 20px;">
                            <label for="ngrok-domain">Ngrok Static Domain</label>
                            <div class="input-with-prefix">
                                <span class="input-prefix">https://</span>
                                <input type="text" id="ngrok-domain" name="ngrok-domain" placeholder="your-domain.ngrok-free.app" required>
                            </div>
                            <small>Create a free static domain by clicking 'Create Domain' on <a href="https://dashboard.ngrok.com/domains" target="_blank">Ngrok Domains</a></small>
                        </div>
                    </div>
                    <div class="form-group" id="cloudflare-config" style="display:none;">
                        <label for="cloudflare-api-key">Cloudflare API Key</label>
                        <input type="text" id="cloudflare-api-key" name="cloudflare-api-key" placeholder="Your Cloudflare API key" required>
                        <small>Get your API key from <a href="https://dash.cloudflare.com/profile/api-tokens" target="_blank">Cloudflare Dashboard</a></small>
                        <small>Use Global API Key for quick setup, or create a custom token with permissions for 'Zone → DNS: Edit' and 'Account → Cloudflare Tunnel: Edit'</small>
                        <div style="margin-top: 15px;">
                            <label class="checkbox-container">
                                <input type="checkbox" id="cloudflare-global-key">
                                <span class="checkmark"></span>
                                This is a Global API Key
                            </label>
                        </div>
                        <div id="cloudflare-email-group" style="display:none; margin-top: 15px;">
                            <label for="cloudflare-email">Account Email</label>
                            <input type="email" id="cloudflare-email" name="cloudflare-email" placeholder="your-email@example.com">
                            <small>Required when using Global API Key</small>
                        </div>
                    </div>
                    <div class="button-group">
                        <button id="save-tunnel-settings" class="setup-btn primary">Continue</button>
                    </div>
                </div>
            </div>
            <div class="setup-section" id="tunnel-config-section">
                <h3>Cloudflare Account & Domain Setup</h3>
                <p>Select the Cloudflare account and domain you want to use for your tunnel.</p>
                
                <div id="cloudflare-selection-loading" class="loading-container">
                    <div class="spinner"></div>
                    <p>Loading your Cloudflare accounts and domains...</p>
                    <small>This may take a few moments to complete.</small>
                </div>
                
                <div id="cloudflare-selection-content" style="display:none;">
                    <div class="form-group">
                        <label for="cloudflare-account-select">Select Account</label>
                        <select id="cloudflare-account-select" name="cloudflare-account-select" required>
                            <option value="">Choose an account...</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="cloudflare-zone-select">Select Domain</label>
                        <select id="cloudflare-zone-select" name="cloudflare-zone-select" required>
                            <option value="">Choose a domain...</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="cloudflare-subdomain">Subdomain</label>
                        <div class="input-with-prefix">
                            <span class="input-prefix">https://</span>
                            <input type="text" id="cloudflare-subdomain" name="cloudflare-subdomain" placeholder="printguard" required>
                            <span class="input-suffix" id="domain-suffix">.example.com</span>
                        </div>
                        <small>Enter the subdomain for your PrintGuard tunnel</small>
                    </div>
                    
                    <div class="button-group">
                        <button id="configure-cloudflare-tunnel" class="setup-btn primary">Continue to VAPID Setup</button>
                    </div>
                </div>
                
                <div id="cloudflare-tunnel-loading" class="loading-container" style="display:none;">
                    <div class="spinner"></div>
                    <p>Creating your Cloudflare tunnel...</p>
                    <small>This may take a few moments to complete.</small>
                </div>
                
                <div id="cloudflare-selection-error" class="error-container" style="display:none;">
                    <div class="error-icon">✗</div>
                    <p>Failed to load Cloudflare accounts and domains</p>
                    <div id="cloudflare-error-message" class="error-details"></div>
                    <div class="button-group">
                        <button id="retry-cloudflare-fetch" class="setup-btn secondary">Retry</button>
                        <button id="back-to-tunnel-settings" class="setup-btn">Back to Settings</button>
                    </div>
                </div>
            </div>
            <div class="setup-section" id="initialize-section">
                <h3>Initializing Tunnel Provider</h3>
                <div id="initialization-content">
                    <div id="initialization-loading" class="loading-container">
                        <div class="spinner"></div>
                        <p>Please wait while we initialize your tunnel provider...</p>
                        <small>This may take a few moments to complete.</small>
                    </div>
                    <div id="initialization-success" class="success-container" style="display:none;">
                        <div class="success-icon">✓</div>
                        <p>Tunnel provider initialized successfully!</p>
                        <div id="tunnel-info" class="tunnel-info">
                            <p><strong>Provider:</strong> <span id="provider-name"></span></p>
                            <p><strong>URL:</strong> <span id="provider-url"></span></p>
                        </div>
                        <div class="button-group">
                            <button id="continue-to-finish" class="setup-btn primary">Continue to VAPID Setup</button>
                        </div>
                    </div>
                    <div id="initialization-error" class="error-container" style="display:none;">
                        <div class="error-icon">✗</div>
                        <p>Failed to initialize tunnel provider</p>
                        <div id="error-message" class="error-details"></div>
                        <div class="button-group">
                            <button id="retry-initialization" class="setup-btn secondary">Retry</button>
                            <button id="back-to-tunnel-config" class="setup-btn">Back to Configuration</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="setup-section" id="vapid-section">
                <h3>VAPID Keys Setup</h3>
                <p>VAPID keys are required for push notifications.</p>
                
                <div class="option-buttons">
                    <button id="generate-vapid-keys-btn" class="setup-btn">Generate New VAPID Keys</button>
                    <button id="import-vapid-keys-btn" class="setup-btn">Import Existing Keys</button>
                </div>
                
                <div class="form-section" id="vapid-form" style="display:none;">
                    <div class="form-group">
                        <label for="vapid-public-key">VAPID Public Key</label>
                        <input type="text" id="vapid-public-key" name="vapid-public-key" placeholder="Public Key">
                    </div>
                    <div class="form-group">
                        <label for="vapid-private-key">VAPID Private Key</label>
                        <input type="text" id="vapid-private-key" name="vapid-private-key" placeholder="Private Key">
                    </div>
                    <div class="form-group">
                        <label for="vapid-subject">VAPID Subject (email)</label>
                        <div class="input-with-prefix">
                            <span class="input-prefix">mailto:</span>
                            <input type="email" id="vapid-subject" name="vapid-subject" placeholder="your@email.com">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="base-url">Base URL</label>
                        <div class="input-with-prefix">
                            <span class="input-prefix">https://</span>
                            <input type="text" id="base-url" name="base-url" placeholder="your-domain.com" value="localhost">
                        </div>
                    </div>
                    <div class="button-group">
                        <button id="save-vapid-settings" class="setup-btn primary">Save & Continue</button>
                    </div>
                </div>
            </div>
            <div class="setup-section" id="ssl-section">
                <h3>SSL Certificate Setup</h3>
                <p>SSL certificates are required for secure HTTPS connections.</p>
                
                <div class="option-buttons">
                    <button id="generate-ssl-cert-btn" class="setup-btn">Generate Self-Signed Certificate</button>
                    <button id="import-ssl-cert-btn" class="setup-btn">Import Existing Certificate</button>
                </div>
                
                <div class="form-section" id="ssl-import-form" style="display:none;">
                    <div class="form-group">
                        <label for="ssl-cert-file">SSL Certificate File</label>
                        <input type="file" id="ssl-cert-file" name="ssl-cert-file">
                    </div>
                    <div class="form-group">
                        <label for="ssl-key-file">SSL Key File</label>
                        <input type="file" id="ssl-key-file" name="ssl-key-file">
                    </div>
                    <div class="button-group">
                        <button id="save-ssl-settings" class="setup-btn primary">Save & Continue</button>
                    </div>
                </div>
            </div>
            <div class="setup-section" id="cloudflare-download-section">
                <h3>Download Cloudflare</h3>
                <p>To complete your Cloudflare tunnel setup, you need to download and install Cloudflare on your system.</p>
                
                <div class="info-section">
                    <h4>Step 1: Download Cloudflare</h4>
                    <p>Visit the Cloudflare downloads page and download the appropriate version for your operating system from the 'latest release' section:</p>
                    <a href="https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/downloads/" target="_blank" class="external-link">
                        Cloudflare Downloads Page
                    </a>
                </div>
                
                <div class="info-section">
                    <h4>Step 2: Select Your Operating System</h4>
                    <p>Choose your operating system to get the specific setup instructions:</p>
                    
                    <div class="option-buttons">
                        <button id="macos-btn" class="setup-btn os-option">
                            <div class="option-title">macOS</div>
                            <div class="option-description">Download for macOS systems</div>
                        </button>
                        <button id="windows-btn" class="setup-btn os-option">
                            <div class="option-title">Windows</div>
                            <div class="option-description">Download for Windows systems</div>
                        </button>
                        <button id="linux-btn" class="setup-btn os-option">
                            <div class="option-title">Linux</div>
                            <div class="option-description">Download for Linux systems</div>
                        </button>
                    </div>
                </div>
                
                <div class="info-section" id="tunnel-token-section" style="display:none;">
                    <h4>Step 3: Setup Commands</h4>
                    <p>Run the following commands in order to set up your Cloudflare service:</p>
                    <div id="setup-commands-container">
                    </div>
                    
                    <div class="universal-section info-badge" style="border: 2px solid var(--info-color); background: var(--info-bg); margin-top: var(--spacing-xl);">
                        <h4 style="color: var(--info-color); margin-bottom: var(--spacing-sm);">🔒 Cloudflare Authentication Setup</h4>
                        <p style="margin-bottom: var(--spacing-md);">Setup authentication policies for your site, restricting access to authorised emails only:</p>
                        <a href="http://localhost:8000/setup/cloudflare/add-device" target="_blank" class="btn info hover-lift" style="display: inline-block; margin: var(--spacing-md) 0;">
                            📱 Open Authentication Setup Page
                        </a>
                    </div>
                    <div class="button-group">
                        <button id="continue-to-finish-from-cloudflare" class="setup-btn primary">Continue</button>
                    </div>
                </div>
            </div>
            <div class="setup-section" id="finish-section">
                <h3>Setup Complete!</h3>
                <p>Your PrintGuard is now configured and ready to use.</p>
                <div class="setup-summary">
                    <div class="summary-item">
                        <strong>Network Configuration:</strong> <span id="summary-network-status">Not Configured</span>
                    </div>
                    <div class="summary-item" id="tunnel-summary-item" style="display:none;">
                        <strong>Tunnel Provider:</strong> <span id="summary-tunnel-status">Not Configured</span>
                    </div>
                    <div class="summary-item" id="vapid-summary-item">
                        <strong>VAPID Keys:</strong> <span id="summary-vapid-status">Not Configured</span>
                    </div>
                    <div class="summary-item" id="ssl-summary-item">
                        <strong>SSL Certificate:</strong> <span id="summary-ssl-status">Not Configured</span>
                    </div>
                </div>
                <button id="finish-setup-btn" class="setup-btn primary">Start PrintGuard</button>
            </div>
        </div>
    </div>
</body>
</html>