{% extends "base.html" %}

{% block title %}EOL Enhancement Dashboard - Five Cities Orchid Society{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="text-light">
            <i data-feather="database" class="me-2"></i>
            Encyclopedia of Life Integration
        </h1>
        <a href="{{ url_for('admin_dashboard') }}" class="btn btn-secondary">
            <i data-feather="arrow-left" class="me-1"></i>Back to Admin
        </a>
    </div>

    <!-- EOL Status Overview -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card bg-primary text-white">
                <div class="card-body text-center">
                    <h3 class="card-title">{{ status.total_orchids }}</h3>
                    <p class="card-text">Total Orchids</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-success text-white">
                <div class="card-body text-center">
                    <h3 class="card-title">{{ status.eol_enhanced }}</h3>
                    <p class="card-text">EOL Enhanced</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-warning text-dark">
                <div class="card-body text-center">
                    <h3 class="card-title">{{ status.pending_enhancement }}</h3>
                    <p class="card-text">Pending Enhancement</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-info text-white">
                <div class="card-body text-center">
                    <h3 class="card-title">{{ status.enhancement_percentage }}%</h3>
                    <p class="card-text">Completion Rate</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Progress Bar -->
    <div class="card mb-4">
        <div class="card-body">
            <h5 class="card-title">Enhancement Progress</h5>
            <div class="progress mb-3" style="height: 20px;">
                <div class="progress-bar bg-success" role="progressbar" 
                     style="width: {{ status.enhancement_percentage }}%"
                     aria-valuenow="{{ status.enhancement_percentage }}" 
                     aria-valuemin="0" aria-valuemax="100">
                    {{ status.enhancement_percentage }}%
                </div>
            </div>
            <small class="text-muted">
                {{ status.eol_enhanced }} of {{ status.total_orchids }} orchids enhanced with Encyclopedia of Life data
            </small>
        </div>
    </div>

    <!-- Control Panel -->
    <div class="card mb-4">
        <div class="card-header">
            <h5 class="mb-0">
                <i data-feather="settings" class="me-2"></i>
                EOL Enhancement Controls
            </h5>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-6">
                    <h6>Test Integration</h6>
                    <p class="text-muted">Test EOL connection with Cattleya trianae</p>
                    <button id="test-eol" class="btn btn-outline-primary">
                        <i data-feather="activity" class="me-1"></i>Test EOL Connection
                    </button>
                </div>
                <div class="col-md-6">
                    <h6>Enhance All Orchids</h6>
                    <p class="text-muted">Add EOL data to all orchid records (may take several minutes)</p>
                    <button id="enhance-all" class="btn btn-warning" 
                            {% if status.pending_enhancement == 0 %}disabled{% endif %}>
                        <i data-feather="database" class="me-1"></i>
                        Enhance All ({{ status.pending_enhancement }} remaining)
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- What is EOL? -->
    <div class="card mb-4">
        <div class="card-header">
            <h5 class="mb-0">
                <i data-feather="info" class="me-2"></i>
                About Encyclopedia of Life Integration
            </h5>
        </div>
        <div class="card-body">
            <p>
                The <strong>Encyclopedia of Life (EOL)</strong> is a comprehensive biodiversity database 
                that provides authoritative information about Earth's species. By integrating with EOL, 
                our orchid platform gains access to:
            </p>
            <ul>
                <li><strong>Taxonomic Verification</strong> - Confirm scientific names and synonyms</li>
                <li><strong>Common Names</strong> - Multiple language common names for orchids</li>
                <li><strong>Detailed Descriptions</strong> - Expert-authored species descriptions</li>
                <li><strong>Additional Images</strong> - High-quality reference photographs</li>
                <li><strong>Distribution Data</strong> - Geographic range and habitat information</li>
                <li><strong>Trait Information</strong> - Morphological and ecological characteristics</li>
            </ul>
            <p class="mb-0">
                <strong>No API key required</strong> - EOL provides open access to their data for educational 
                and research purposes. Rate limited to 30 requests per minute.
            </p>
        </div>
    </div>

    <!-- Results Display -->
    <div id="results-area" style="display: none;">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <i data-feather="check-circle" class="me-2"></i>
                    Enhancement Results
                </h5>
            </div>
            <div class="card-body">
                <div id="results-content"></div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const testBtn = document.getElementById('test-eol');
    const enhanceBtn = document.getElementById('enhance-all');
    const resultsArea = document.getElementById('results-area');
    const resultsContent = document.getElementById('results-content');

    function showResults(title, content, type = 'success') {
        resultsContent.innerHTML = `
            <div class="alert alert-${type}" role="alert">
                <h6>${title}</h6>
                ${content}
            </div>
        `;
        resultsArea.style.display = 'block';
        resultsArea.scrollIntoView({ behavior: 'smooth' });
    }

    function showError(message) {
        showResults('Error', `<p>${message}</p>`, 'danger');
    }

    function showLoading(button, text) {
        button.disabled = true;
        button.innerHTML = `<span class="spinner-border spinner-border-sm me-1"></span>${text}`;
    }

    function resetButton(button, icon, text) {
        button.disabled = false;
        button.innerHTML = `<i data-feather="${icon}" class="me-1"></i>${text}`;
        feather.replace();
    }

    // Test EOL Integration
    testBtn.addEventListener('click', function() {
        showLoading(testBtn, 'Testing...');
        
        fetch('/admin/eol-test')
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const content = `
                        <p><strong>✅ EOL Connection Successful!</strong></p>
                        <ul>
                            <li><strong>Test Species:</strong> ${data.test_species}</li>
                            <li><strong>EOL Page ID:</strong> ${data.eol_page_id}</li>
                            <li><strong>Descriptions Found:</strong> ${data.traits_found}</li>
                            <li><strong>Images Found:</strong> ${data.images_found}</li>
                            <li><strong>Common Names:</strong> ${data.common_names.map(cn => cn.name).join(', ') || 'None'}</li>
                        </ul>
                    `;
                    showResults('EOL Integration Test Results', content, 'success');
                } else {
                    showError(data.message || 'Test failed');
                }
                resetButton(testBtn, 'activity', 'Test EOL Connection');
            })
            .catch(error => {
                showError('Network error: ' + error.message);
                resetButton(testBtn, 'activity', 'Test EOL Connection');
            });
    });

    // Enhance All Orchids
    enhanceBtn.addEventListener('click', function() {
        if (!confirm('This will enhance all orchid records with EOL data. This may take several minutes. Continue?')) {
            return;
        }

        showLoading(enhanceBtn, 'Enhancing...');
        
        fetch('/admin/eol-enhance-all', { method: 'POST' })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const stats = data.stats;
                    const content = `
                        <p><strong>✅ Enhancement Completed!</strong></p>
                        <ul>
                            <li><strong>Total Processed:</strong> ${stats.total_processed}</li>
                            <li><strong>Successfully Enhanced:</strong> ${stats.successfully_enhanced}</li>
                            <li><strong>Not Found in EOL:</strong> ${stats.not_found_in_eol}</li>
                            <li><strong>Errors:</strong> ${stats.errors}</li>
                        </ul>
                        <p class="mb-0">
                            <a href="{{ url_for('eol_enhancement_dashboard') }}" class="btn btn-primary">
                                Refresh Dashboard
                            </a>
                        </p>
                    `;
                    showResults('EOL Enhancement Results', content, 'success');
                    
                    // Update the enhance button
                    if (stats.successfully_enhanced > 0) {
                        setTimeout(() => location.reload(), 2000);
                    }
                } else {
                    showError(data.error || 'Enhancement failed');
                }
                resetButton(enhanceBtn, 'database', `Enhance All ({{ status.pending_enhancement }} remaining)`);
            })
            .catch(error => {
                showError('Network error: ' + error.message);
                resetButton(enhanceBtn, 'database', `Enhance All ({{ status.pending_enhancement }} remaining)`);
            });
    });

    // Initialize Feather icons
    feather.replace();
});
</script>
{% endblock %}