<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Savanty: Optimization Solver</title>
    <script src="https://unpkg.com/htmx.org@1.9.6"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-python.min.js"></script>
</head>
<body class="bg-gray-100">
    <div class="container mx-auto p-4">
        <div class="flex justify-between items-center mb-4">
            <h1 class="text-2xl font-bold">Savanty: Optimization Solver</h1>
        </div>
        <div class="grid grid-cols-2 gap-4">
            <div class="bg-white p-4 rounded shadow">
                <h2 class="text-lg font-semibold mb-2">Problem Statement</h2>
                <textarea name="problem_description" id="problem-description" class="w-full h-40 p-2 border rounded" 
                    placeholder="Describe your optimization problem here..."></textarea>
                <input type="hidden" id="additional-info" name="additional_info" value="">
                <div id="questions-container" class="mt-2 hidden">
                    <h3 class="text-md font-semibold">Additional Information Needed:</h3>
                    <div id="questions-list"></div>
                    <textarea id="additional-info-input" class="w-full h-20 p-2 border rounded mt-2" 
                        placeholder="Provide the requested information here..."></textarea>
                </div>
                <button id="solve-button" class="mt-2 px-4 py-2 bg-blue-500 text-white rounded"
                    hx-post="/solve"
                    hx-include="#problem-description, #additional-info"
                    hx-target="#solution"
                    hx-swap="innerHTML">
                    Solve Problem
                </button>
            </div>
            <div id="solution" class="bg-white p-4 rounded shadow">
                <h2 class="text-lg font-semibold mb-2">Solution</h2>
                <div class="h-40 overflow-y-auto">
                    <p>Enter a problem description and click "Solve Problem" to see the solution.</p>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        document.body.addEventListener('htmx:afterOnLoad', function(evt) {
            // Parse the response
            try {
                const response = JSON.parse(evt.detail.xhr.responseText);
                
                if (response.needs_more_info) {
                    // Show the questions container
                    document.getElementById('questions-container').classList.remove('hidden');
                    
                    // Populate questions
                    const questionsList = document.getElementById('questions-list');
                    questionsList.innerHTML = '';
                    response.questions.forEach((question, index) => {
                        const p = document.createElement('p');
                        p.className = 'mt-1';
                        p.textContent = `${index + 1}. ${question}`;
                        questionsList.appendChild(p);
                    });
                    
                    // Update button text
                    document.getElementById('solve-button').textContent = 'Submit Additional Info';
                    
                    // Set up event listener for when user submits additional info
                    document.getElementById('solve-button').onclick = function() {
                        // Move the additional info to the hidden field
                        const additionalInfo = document.getElementById('additional-info-input').value;
                        document.getElementById('additional-info').value = additionalInfo;
                        
                        // Hide questions for next request
                        document.getElementById('questions-container').classList.add('hidden');
                        document.getElementById('solve-button').textContent = 'Solve Problem';
                        
                        // Reset the onclick handler
                        document.getElementById('solve-button').onclick = null;
                    };
                } else {
                    // Reset the form for next use
                    document.getElementById('additional-info').value = '';
                    document.getElementById('additional-info-input').value = '';
                    document.getElementById('questions-container').classList.add('hidden');
                    document.getElementById('solve-button').textContent = 'Solve Problem';
                    document.getElementById('solve-button').onclick = null;
                }
            } catch (e) {
                // Not a JSON response, probably an error page
                console.log('Non-JSON response received');
            }
        });
    </script>
</body>
</html>