<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Image Generation - Test Page</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: Arial, sans-serif;
            background: #f5f5f5;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        h1 {
            color: #333;
            margin-bottom: 10px;
        }
        
        .subtitle {
            color: #666;
            margin-bottom: 30px;
        }
        
        .demo-section {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin-bottom: 40px;
        }
        
        .image-container {
            border: 2px solid #ddd;
            border-radius: 8px;
            padding: 20px;
            background: #fafafa;
            text-align: center;
        }
        
        .image-container h3 {
            margin-bottom: 15px;
            color: #333;
        }
        
        .product-image {
            max-width: 100%;
            height: auto;
            border: 1px solid #ccc;
            border-radius: 4px;
            background: white;
            max-height: 500px;
            object-fit: contain;
        }
        
        .loading {
            color: #999;
            font-style: italic;
            padding: 40px;
        }
        
        .controls {
            background: #f9f9f9;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 30px;
        }
        
        .control-group {
            margin-bottom: 15px;
        }
        
        .control-group label {
            display: block;
            font-weight: bold;
            margin-bottom: 5px;
            color: #333;
        }
        
        .control-group select,
        .control-group input {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        
        .radio-group {
            display: flex;
            gap: 15px;
        }
        
        .radio-group label {
            display: flex;
            align-items: center;
            gap: 5px;
            font-weight: normal;
        }
        
        button {
            background: #333;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            margin-right: 10px;
        }
        
        button:hover {
            background: #555;
        }
        
        .info-box {
            background: #e3f2fd;
            border-left: 4px solid #2196F3;
            padding: 15px;
            margin-bottom: 20px;
            border-radius: 4px;
        }
        
        .info-box h4 {
            color: #1976D2;
            margin-bottom: 5px;
        }
        
        .info-box p {
            color: #555;
            line-height: 1.6;
        }
        
        .url-display {
            background: #f5f5f5;
            padding: 10px;
            border-radius: 4px;
            font-family: monospace;
            font-size: 12px;
            word-break: break-all;
            margin-top: 10px;
        }
        
        .error {
            background: #ffebee;
            border-left: 4px solid #f44336;
            padding: 15px;
            margin: 20px 0;
            border-radius: 4px;
            color: #c62828;
        }
        
        @media (max-width: 768px) {
            .demo-section {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🎨 Dynamic Image Generation API</h1>
        <p class="subtitle">Test the product image generation endpoints</p>
        
        <div class="info-box">
            <h4>How It Works</h4>
            <p>
                This demo uses server-side image processing to dynamically generate product images 
                with different colors and configurations. Select options below to see the image update in real-time.
            </p>
        </div>
        
        <div class="controls">
            <h3>Product Configuration</h3>
            
            <div class="control-group">
                <label for="product-select">Product:</label>
                <select id="product-select">
                    <option value="cobrai">COBRAI - Storm Door</option>
                </select>
            </div>
            
            <div class="control-group">
                <label for="color-select">Color:</label>
                <select id="color-select">
                    <option value="white">White</option>
                    <option value="black">Black</option>
                    <option value="bronze">Bronze</option>
                    <option value="sandstone">Sandstone</option>
                </select>
            </div>
            
            <div class="control-group">
                <label>Hinge Location:</label>
                <div class="radio-group">
                    <label>
                        <input type="radio" name="hinge" value="right" checked>
                        Right Hinge
                    </label>
                    <label>
                        <input type="radio" name="hinge" value="left">
                        Left Hinge
                    </label>
                </div>
            </div>
            
            <div class="control-group">
                <label>
                    <input type="checkbox" id="cache-checkbox" checked>
                    Use Cache
                </label>
            </div>
            
            <button onclick="updateImages()">🔄 Update Images</button>
            <button onclick="clearCache()">🗑️ Clear Cache</button>
            <button onclick="getConfig()">📋 Get Config</button>
        </div>
        
        <div class="demo-section">
            <div class="image-container">
                <h3>Direct Image URL Method</h3>
                <p style="color: #666; font-size: 14px; margin-bottom: 10px;">
                    Using: <code>&lt;img src="..."&gt;</code>
                </p>
                <img id="direct-image" class="product-image" src="" alt="Product">
                <div class="url-display" id="direct-url">Loading...</div>
            </div>
            
            <div class="image-container">
                <h3>JSON/Base64 Method</h3>
                <p style="color: #666; font-size: 14px; margin-bottom: 10px;">
                    Using: <code>fetch() + base64</code>
                </p>
                <img id="json-image" class="product-image" src="" alt="Product">
                <div class="url-display" id="json-url">Loading...</div>
            </div>
        </div>
        
        <div id="error-box" style="display: none;" class="error"></div>
        
        <div id="config-box" style="display: none; margin-top: 20px;">
            <h3>Product Configuration</h3>
            <pre id="config-display" style="background: #f5f5f5; padding: 15px; border-radius: 4px; overflow-x: auto;"></pre>
        </div>
        
        <div style="margin-top: 40px; padding-top: 20px; border-top: 1px solid #ddd;">
            <h3>API Endpoints Used</h3>
            <ul style="line-height: 2;">
                <li><code>GET /api/product-image/{product}?color={color}&hinge={hinge}</code></li>
                <li><code>GET /api/product-image/{product}?color={color}&hinge={hinge}&format=json</code></li>
                <li><code>GET /api/product-config/{product}</code></li>
                <li><code>POST /api/clear-image-cache</code></li>
            </ul>
        </div>
    </div>
    
    <script>
        // Initialize on load
        window.addEventListener('DOMContentLoaded', () => {
            updateImages();
        });
        
        // Auto-update when controls change
        document.getElementById('product-select').addEventListener('change', updateImages);
        document.getElementById('color-select').addEventListener('change', updateImages);
        document.querySelectorAll('[name="hinge"]').forEach(radio => {
            radio.addEventListener('change', updateImages);
        });
        
        function updateImages() {
            const product = document.getElementById('product-select').value;
            const color = document.getElementById('color-select').value;
            const hinge = document.querySelector('[name="hinge"]:checked').value;
            const useCache = document.getElementById('cache-checkbox').checked;
            
            hideError();
            
            // Method 1: Direct image URL
            updateDirectImage(product, color, hinge, useCache);
            
            // Method 2: JSON with base64
            updateJsonImage(product, color, hinge, useCache);
        }
        
        function updateDirectImage(product, color, hinge, useCache) {
            const url = `/api/product-image/${product}?color=${color}&hinge=${hinge}&cache=${useCache}`;
            
            const img = document.getElementById('direct-image');
            img.src = url;
            
            document.getElementById('direct-url').textContent = url;
        }
        
        async function updateJsonImage(product, color, hinge, useCache) {
            const url = `/api/product-image/${product}?color=${color}&hinge=${hinge}&format=json&cache=${useCache}`;
            
            try {
                const response = await fetch(url);
                const data = await response.json();
                
                if (data.status === 'success') {
                    document.getElementById('json-image').src = data.image;
                    document.getElementById('json-url').textContent = url;
                } else {
                    showError(`Error: ${data.error || 'Unknown error'}`);
                }
            } catch (error) {
                showError(`Fetch error: ${error.message}`);
            }
        }
        
        async function getConfig() {
            const product = document.getElementById('product-select').value;
            const url = `/api/product-config/${product}`;
            
            try {
                const response = await fetch(url);
                const data = await response.json();
                
                if (data.status === 'success') {
                    document.getElementById('config-display').textContent = 
                        JSON.stringify(data.config, null, 2);
                    document.getElementById('config-box').style.display = 'block';
                } else {
                    showError(`Error: ${data.error || 'Unknown error'}`);
                }
            } catch (error) {
                showError(`Fetch error: ${error.message}`);
            }
        }
        
        async function clearCache() {
            const product = document.getElementById('product-select').value;
            
            try {
                const response = await fetch('/api/clear-image-cache', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ productCode: product })
                });
                
                const data = await response.json();
                
                if (data.status === 'success') {
                    alert(data.message);
                    updateImages();
                } else {
                    showError(`Error: ${data.error || 'Unknown error'}`);
                }
            } catch (error) {
                showError(`Fetch error: ${error.message}`);
            }
        }
        
        function showError(message) {
            const errorBox = document.getElementById('error-box');
            errorBox.textContent = message;
            errorBox.style.display = 'block';
        }
        
        function hideError() {
            document.getElementById('error-box').style.display = 'none';
        }
    </script>
</body>
</html>
