{% load static %}

<div class="openhcs-panel">
    <style>
        .openhcs-panel {
            padding: 10px;
            font-family: Arial, sans-serif;
        }
        
        .openhcs-panel h3 {
            margin-top: 0;
            color: #333;
            border-bottom: 2px solid #0066cc;
            padding-bottom: 5px;
        }
        
        .openhcs-panel textarea {
            width: 100%;
            min-height: 200px;
            font-family: 'Courier New', monospace;
            font-size: 12px;
            border: 1px solid #ccc;
            padding: 5px;
            margin-bottom: 10px;
        }
        
        .openhcs-panel button {
            background-color: #0066cc;
            color: white;
            border: none;
            padding: 8px 16px;
            cursor: pointer;
            margin-right: 5px;
            border-radius: 3px;
        }
        
        .openhcs-panel button:hover {
            background-color: #0052a3;
        }
        
        .openhcs-panel button:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }
        
        .openhcs-success {
            background-color: #d4edda;
            border: 1px solid #c3e6cb;
            color: #155724;
            padding: 10px;
            margin-top: 10px;
            border-radius: 3px;
        }
        
        .openhcs-error {
            background-color: #f8d7da;
            border: 1px solid #f5c6cb;
            color: #721c24;
            padding: 10px;
            margin-top: 10px;
            border-radius: 3px;
        }
        
        .openhcs-status-update {
            background-color: #d1ecf1;
            border: 1px solid #bee5eb;
            color: #0c5460;
            padding: 10px;
            margin-top: 10px;
            border-radius: 3px;
        }
        
        .openhcs-loading {
            text-align: center;
            padding: 20px;
            color: #666;
        }
        
        .openhcs-help {
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 3px;
            font-size: 12px;
        }

        .openhcs-server-status {
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            padding: 10px;
            margin-bottom: 15px;
            border-radius: 3px;
            font-size: 12px;
        }

        .openhcs-server-status .server-header {
            font-weight: bold;
            margin-bottom: 8px;
            padding-bottom: 5px;
            border-bottom: 1px solid #dee2e6;
        }

        .openhcs-server-status .status-online {
            color: #28a745;
        }

        .openhcs-server-status .status-offline {
            color: #dc3545;
        }

        .openhcs-worker-list {
            margin-top: 8px;
            padding-left: 15px;
        }

        .openhcs-worker-item {
            padding: 4px 0;
            font-family: 'Courier New', monospace;
            font-size: 11px;
        }
    </style>
    
    <h3>🚀 OpenHCS GPU Processing</h3>

    <!-- Server Status Section -->
    <div id="openhcs-server-status" class="openhcs-server-status">
        <div class="server-header">
            <span id="server-status-icon">⏳</span> Execution Server Status
        </div>
        <div id="server-status-content">
            Checking server status...
        </div>
        <div id="server-control-buttons" style="margin-top: 10px; display: none;">
            <button id="start-server-btn" style="background-color: #28a745;">Start Server</button>
        </div>
    </div>

    <div class="openhcs-help">
        <strong>Quick Start:</strong>
        <ol style="margin: 5px 0; padding-left: 20px;">
            <li>Click "Load Example" to see a sample pipeline</li>
            <li>Modify the pipeline code as needed</li>
            <li>Click "Submit Pipeline" to start processing</li>
            <li>Results will be saved back to OMERO</li>
        </ol>
    </div>
    
    <label for="openhcs-pipeline-code"><strong>Pipeline Code:</strong></label>
    <textarea id="openhcs-pipeline-code" placeholder="Enter your OpenHCS pipeline code here...

Example:
from openhcs.processing.steps import FunctionStep
from openhcs.processing.gpu_functions import gaussian_filter

pipeline_steps = [
    FunctionStep(func=gaussian_filter, sigma=2.0)
]"></textarea>
    
    <label for="openhcs-config-code"><strong>Configuration (Optional):</strong></label>
    <textarea id="openhcs-config-code" style="min-height: 100px;" placeholder="Optional: Enter custom configuration...

Default:
from openhcs.core.config import GlobalPipelineConfig
config = GlobalPipelineConfig()">from openhcs.core.config import GlobalPipelineConfig
config = GlobalPipelineConfig()</textarea>
    
    <div style="margin-top: 10px;">
        <button id="openhcs-submit-btn">Submit Pipeline</button>
        <button id="openhcs-example-btn" style="background-color: #6c757d;">Load Example</button>
    </div>
    
    <div id="openhcs-status"></div>
    
    <div class="openhcs-help" style="margin-top: 20px;">
        <strong>Plate ID:</strong> {{ plate_id }}<br>
        <strong>Execution Server:</strong> localhost:7777<br>
        <strong>Documentation:</strong> <a href="https://github.com/trissim/openhcs" target="_blank">OpenHCS GitHub</a>
    </div>
</div>

<script>
(function() {
    const plateId = {{ plate_id }};
    const submitBtn = document.getElementById('openhcs-submit-btn');
    const exampleBtn = document.getElementById('openhcs-example-btn');
    const pipelineCodeArea = document.getElementById('openhcs-pipeline-code');
    const configCodeArea = document.getElementById('openhcs-config-code');
    const statusDiv = document.getElementById('openhcs-status');
    const serverStatusDiv = document.getElementById('openhcs-server-status');
    const serverStatusContent = document.getElementById('server-status-content');
    const serverStatusIcon = document.getElementById('server-status-icon');
    const serverControlButtons = document.getElementById('server-control-buttons');
    const startServerBtn = document.getElementById('start-server-btn');

    // Check server status on load
    checkServerStatus();
    setInterval(checkServerStatus, 10000); // Check every 10 seconds

    // Start server button handler
    startServerBtn.addEventListener('click', function() {
        startServerBtn.disabled = true;
        startServerBtn.textContent = 'Starting...';

        fetch(`/openhcs/start_server/`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': getCookie('csrftoken')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.status === 'success') {
                showStatus('✓ Server started successfully! Checking status...', 'success');
                // Check status immediately and then resume normal polling
                setTimeout(checkServerStatus, 2000);
            } else {
                showStatus(`✗ Failed to start server: ${data.message}`, 'error');
                startServerBtn.disabled = false;
                startServerBtn.textContent = 'Start Server';
            }
        })
        .catch(error => {
            showStatus(`✗ Error starting server: ${error.message}`, 'error');
            startServerBtn.disabled = false;
            startServerBtn.textContent = 'Start Server';
        });
    });

    function checkServerStatus() {
        fetch(`/openhcs/server_status/`)
            .then(response => response.json())
            .then(data => {
                if (data.status === 'online') {
                    serverStatusIcon.textContent = '✅';
                    const uptime = formatUptime(data.uptime);
                    const workers = data.workers || 0;
                    const workerStatus = workers > 0 ? `${workers} (active)` : `${workers} (idle)`;

                    serverStatusContent.innerHTML = `
                        <div><strong>Status:</strong> <span class="status-online">Online</span></div>
                        <div><strong>Uptime:</strong> ${uptime}</div>
                        <div><strong>Active Executions:</strong> ${data.active_executions || 0}</div>
                        <div><strong>Workers:</strong> ${workerStatus}</div>
                    `;
                    serverControlButtons.style.display = 'none';
                } else {
                    serverStatusIcon.textContent = '❌';
                    serverStatusContent.innerHTML = `
                        <div><strong>Status:</strong> <span class="status-offline">Offline</span></div>
                        <div>The execution server is not responding. Please start the server.</div>
                    `;
                    serverControlButtons.style.display = 'block';
                    startServerBtn.disabled = false;
                    startServerBtn.textContent = 'Start Server';
                }
            })
            .catch(error => {
                serverStatusIcon.textContent = '❌';
                serverStatusContent.innerHTML = `
                    <div><strong>Status:</strong> <span class="status-offline">Offline</span></div>
                    <div>The execution server is not responding. Please start the server.</div>
                `;
                serverControlButtons.style.display = 'block';
                startServerBtn.disabled = false;
                startServerBtn.textContent = 'Start Server';
            });
    }

    function formatUptime(seconds) {
        const hours = Math.floor(seconds / 3600);
        const minutes = Math.floor((seconds % 3600) / 60);
        return `${hours}h ${minutes}m`;
    }

    exampleBtn.addEventListener('click', function() {
        pipelineCodeArea.value = `name="Cell Counting",

napari_streaming_config=LazyNapariStreamingConfig(variable_size_handling=NapariVariableSizeHandling.PAD_TO_MAX, port=55555)

pipeline_steps = create_pipeline()

step_8 = FunctionStep(
    func=gaussian_filter,
    sigma=2.0
)
pipeline_steps.append(step_8)

return Pipeline(
    steps=pipeline_steps,
    name='Multi-Subdirectory Test Pipeline'
)`;

        configCodeArea.value = `from openhcs.core.config import GlobalPipelineConfig
config = GlobalPipelineConfig()`;

        showStatus('Example pipeline loaded!', 'success');
    });

    submitBtn.addEventListener('click', function() {
        const pipelineCode = pipelineCodeArea.value.trim();
        const configCode = configCodeArea.value.trim();

        if (!pipelineCode) {
            showStatus('Please enter pipeline code', 'error');
            return;
        }

        submitBtn.disabled = true;
        submitBtn.textContent = 'Submitting...';

        fetch(`/openhcs/submit_pipeline/${plateId}/`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': getCookie('csrftoken')
            },
            body: JSON.stringify({
                pipeline_code: pipelineCode,
                config_code: configCode
            })
        })
        .then(response => response.json())
        .then(data => {
            submitBtn.disabled = false;
            submitBtn.textContent = 'Submit Pipeline';

            if (data.status === 'accepted') {
                showStatus(`✓ Pipeline submitted successfully!<br>Execution ID: ${data.execution_id}<br>Processing in background...`, 'success');
            } else {
                showStatus(`✗ Error: ${data.message}`, 'error');
            }
        })
        .catch(error => {
            submitBtn.disabled = false;
            submitBtn.textContent = 'Submit Pipeline';
            showStatus(`✗ Network error: ${error.message}`, 'error');
        });
    });

    function showStatus(message, type) {
        statusDiv.className = type === 'error' ? 'openhcs-error' :
                             type === 'success' ? 'openhcs-success' :
                             'openhcs-status-update';
        statusDiv.innerHTML = message;
    }

    function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
})();
</script>