<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test Playground — FoodieFlow</title>
    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">

    <style>
        .test-card {
            transition: transform 0.2s;
            cursor: pointer;
        }
        .test-card:hover {
            transform: translateY(-5px);
        }
    </style>
</head>
<body class="bg-light">

    <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm sticky-top mb-4">
        <div class="container">
            <a class="navbar-brand d-flex align-items-center" href="/">
                <i class="bi bi-flow me-2" style="color: var(--brand-primary);"></i>
                <span class="fw-bold">FoodieFlow Test Lab</span>
            </a>
            <div class="ms-auto">
                <a href="/" class="btn btn-outline-primary btn-sm">Back to Home</a>
            </div>
        </div>
    </nav>

    <main class="container py-5">
        <div class="row mb-4">
            <div class="col-md-8 mx-auto">
                <div class="alert alert-warning border-0 shadow-sm d-flex align-items-center">
                    <i class="bi bi-exclamation-triangle-fill fs-4 me-3"></i>
                    <div>
                        <strong>Attention:</strong> To use image analysis, you must set your OpenAI API Key in <code>ai/keys.php</code>.
                        Direct communication with OpenAI is enabled to support multimodal features.
                    </div>
                </div>
            </div>
        </div>

        <div class="row mb-5">
            <div class="col-12 text-center">
                <h1 class="display-4 fw-bold">Test Playground</h1>
                <p class="lead text-muted">A place to test new features before they go live.</p>
            </div>
        </div>

        <div class="row g-4">
            <!-- AI Testing Section -->
            <div class="col-md-8 mx-auto">
                <div class="card shadow-sm">
                    <div class="card-body">
                        <h5 class="card-title d-flex align-items-center mb-4">
                            <i class="bi bi-magic me-2 text-primary"></i>
                            Advanced AI Analyzer
                        </h5>
                        
                        <div class="mb-4">
                            <label class="form-label fw-bold">1. Select Input Source</label>
                            <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="pills-file-tab" data-bs-toggle="pill" data-bs-target="#pills-file" type="button" role="tab">Upload File</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="pills-url-tab" data-bs-toggle="pill" data-bs-target="#pills-url" type="button" role="tab">Image URL</button>
                                </li>
                            </ul>
                            <div class="tab-content" id="pills-tabContent">
                                <div class="tab-pane fade show active" id="pills-file" role="tabpanel">
                                    <input type="file" id="ai-file-input" class="form-control">
                                </div>
                                <div class="tab-pane fade" id="pills-url" role="tabpanel">
                                    <input type="text" id="ai-url-input" class="form-control" placeholder="https://example.com/image.jpg">
                                </div>
                            </div>
                        </div>

                        <div class="mb-4">
                            <label class="form-label fw-bold">2. Custom Prompt</label>
                            <textarea id="ai-prompt" class="form-control" rows="3">Analyze this image. If it's a dish, identify it and provide a recipe in JSON format: { "name": "...", "ingredients": [...] }</textarea>
                        </div>

                        <div class="mb-4">
                            <label class="form-label fw-bold">3. Select Model</label>
                            <select id="ai-model" class="form-select">
                                <option value="gpt-4o">GPT-4o (Best for Vision)</option>
                                <option value="gpt-4o-mini" selected>GPT-4o Mini (Fast & Efficient)</option>
                            </select>
                        </div>

                        <button id="analyze-btn" class="btn btn-primary w-100 py-2 fw-bold">
                            <i class="bi bi-cpu me-2"></i> Run Analysis
                        </button>

                        <div id="ai-results" class="mt-4 d-none">
                            <h6 class="fw-bold border-bottom pb-2">Analysis Result:</h6>
                            <div class="mb-3">
                                <label class="small text-muted">Text Output:</label>
                                <div class="bg-white border rounded p-3" id="ai-text-output" style="white-space: pre-wrap;"></div>
                            </div>
                            <div id="json-section" class="d-none">
                                <label class="small text-muted">Extracted Data (JSON):</label>
                                <pre class="bg-dark text-white p-3 rounded" id="ai-json-output"></pre>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <footer class="text-center py-4 mt-5">
        <p class="mb-0 text-muted">&copy; <?php echo date("Y"); ?> FoodieFlow Lab</p>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.getElementById('analyze-btn')?.addEventListener('click', async () => {
            const fileInput = document.getElementById('ai-file-input');
            const urlInput = document.getElementById('ai-url-input');
            const promptInput = document.getElementById('ai-prompt');
            const modelSelect = document.getElementById('ai-model');
            
            const resultsDiv = document.getElementById('ai-results');
            const textOutput = document.getElementById('ai-text-output');
            const jsonOutput = document.getElementById('ai-json-output');
            const jsonSection = document.getElementById('json-section');

            const btn = document.getElementById('analyze-btn');
            const originalText = btn.innerHTML;

            const isUrl = document.getElementById('pills-url-tab').classList.contains('active');
            
            const formData = new FormData();
            formData.append('prompt', promptInput.value);
            formData.append('model', modelSelect.value);

            if (isUrl) {
                if (!urlInput.value) {
                    alert('Please enter an image URL.');
                    return;
                }
                formData.append('image_url', urlInput.value);
            } else {
                if (!fileInput.files.length) {
                    alert('Please select an image file.');
                    return;
                }
                formData.append('image', fileInput.files[0]);
            }

            btn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Processing...';
            btn.disabled = true;
            resultsDiv.classList.add('d-none');

            try {
                const response = await fetch('api/ai_analyze.php', {
                    method: 'POST',
                    body: formData
                });
                const data = await response.json();
                
                resultsDiv.classList.remove('d-none');
                
                if (data.success) {
                    textOutput.textContent = data.text || 'No text output returned.';
                    if (data.data) {
                        jsonSection.classList.remove('d-none');
                        jsonOutput.textContent = JSON.stringify(data.data, null, 2);
                    } else {
                        jsonSection.classList.add('d-none');
                    }
                } else {
                    textOutput.innerHTML = `<span class="text-danger">Error: ${data.error}</span>`;
                    jsonSection.classList.add('d-none');
                }
            } catch (error) {
                console.error('Error:', error);
                textOutput.innerHTML = `<span class="text-danger">Failed to connect to the server.</span>`;
            } finally {
                btn.innerHTML = originalText;
                btn.disabled = false;
            }
        });
    </script>
</body>
</html>
