{% extends "base.html" %}
{% set title = "GBIF Integration Dashboard" %}

{% block extra_head %}
<style>
.gbif-dashboard {
    background: linear-gradient(135deg, #1a1f2e 0%, #16213e 100%);
    min-height: 100vh;
    color: #ffffff;
}

.gbif-card {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    backdrop-filter: blur(10px);
    padding: 2rem;
    margin-bottom: 2rem;
}

.gbif-logo {
    font-size: 2.5rem;
    font-weight: bold;
    color: #00d4aa;
    text-shadow: 0 0 20px rgba(0, 212, 170, 0.3);
}

.stat-card {
    background: linear-gradient(135deg, #00d4aa 0%, #00a085 100%);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    color: white;
    box-shadow: 0 8px 32px rgba(0, 212, 170, 0.3);
}

.action-btn {
    background: linear-gradient(135deg, #00d4aa 0%, #00a085 100%);
    border: none;
    border-radius: 10px;
    padding: 1rem 2rem;
    color: white;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 212, 170, 0.3);
}

.action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 212, 170, 0.4);
    color: white;
    text-decoration: none;
}

.status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
}

.status-connected {
    background-color: #28a745;
    box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
}

.status-disconnected {
    background-color: #dc3545;
    box-shadow: 0 0 10px rgba(220, 53, 69, 0.5);
}

.api-status {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 1rem;
    margin: 1rem 0;
}
</style>
{% endblock %}

{% block content %}
<div class="gbif-dashboard">
    <div class="container py-5">
        <!-- Header -->
        <div class="text-center mb-5">
            <div class="gbif-logo mb-3">🌍 GBIF Integration</div>
            <h2 class="text-light">Global Biodiversity Information Facility</h2>
            <p class="text-muted">Access millions of orchid occurrence records from museums, herbaria, and research institutions worldwide</p>
        </div>

        <!-- API Status Card -->
        <div class="gbif-card">
            <h3 class="mb-4"><i data-feather="link"></i> API Connection Status</h3>
            <div class="api-status" id="apiStatus">
                <div class="d-flex justify-content-center">
                    <div class="spinner-border text-info" role="status">
                        <span class="sr-only">Loading...</span>
                    </div>
                    <span class="ml-3">Checking GBIF API status...</span>
                </div>
            </div>
        </div>

        <!-- Statistics Cards -->
        <div class="row mb-5">
            <div class="col-md-4">
                <div class="stat-card">
                    <h3 class="mb-2">25M+</h3>
                    <p class="mb-0">Total Orchid Records</p>
                    <small>Available in GBIF</small>
                </div>
            </div>
            <div class="col-md-4">
                <div class="stat-card">
                    <h3 class="mb-2">880+</h3>
                    <p class="mb-0">Orchid Genera</p>
                    <small>Comprehensive Coverage</small>
                </div>
            </div>
            <div class="col-md-4">
                <div class="stat-card">
                    <h3 class="mb-2">190+</h3>
                    <p class="mb-0">Countries</p>
                    <small>Global Distribution</small>
                </div>
            </div>
        </div>

        <!-- Action Cards -->
        <div class="row">
            <div class="col-md-6">
                <div class="gbif-card text-center">
                    <h4 class="mb-3"><i data-feather="download"></i> Collect Orchid Data</h4>
                    <p class="text-muted mb-4">Start collecting orchid occurrence records from GBIF with geographic and taxonomic filters</p>
                    <a href="{{ url_for('gbif.collect_orchids') }}" class="action-btn">
                        <i data-feather="play"></i> Start Collection
                    </a>
                </div>
            </div>
            <div class="col-md-6">
                <div class="gbif-card text-center">
                    <h4 class="mb-3"><i data-feather="search"></i> Search & Preview</h4>
                    <p class="text-muted mb-4">Search GBIF database and preview orchid records before importing</p>
                    <button class="action-btn" onclick="openSearchModal()">
                        <i data-feather="search"></i> Search GBIF
                    </button>
                </div>
            </div>
        </div>

        <!-- Features Info -->
        <div class="gbif-card mt-4">
            <h4 class="mb-4"><i data-feather="info"></i> GBIF Integration Features</h4>
            <div class="row">
                <div class="col-md-6">
                    <ul class="list-unstyled">
                        <li class="mb-2"><i data-feather="check" class="text-success mr-2"></i> Authenticated API access</li>
                        <li class="mb-2"><i data-feather="check" class="text-success mr-2"></i> Geographic coordinate data</li>
                        <li class="mb-2"><i data-feather="check" class="text-success mr-2"></i> Institution and collector information</li>
                        <li class="mb-2"><i data-feather="check" class="text-success mr-2"></i> Taxonomic verification</li>
                    </ul>
                </div>
                <div class="col-md-6">
                    <ul class="list-unstyled">
                        <li class="mb-2"><i data-feather="check" class="text-success mr-2"></i> Duplicate detection</li>
                        <li class="mb-2"><i data-feather="check" class="text-success mr-2"></i> Proper scientific attribution</li>
                        <li class="mb-2"><i data-feather="check" class="text-success mr-2"></i> Country and region filtering</li>
                        <li class="mb-2"><i data-feather="check" class="text-success mr-2"></i> Vernacular name integration</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Search Modal -->
<div class="modal fade" id="searchModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content bg-dark text-light">
            <div class="modal-header">
                <h5 class="modal-title">Search GBIF Orchid Records</h5>
                <button type="button" class="close text-light" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="searchForm">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Genus (optional)</label>
                                <input type="text" class="form-control bg-secondary text-light" name="genus" placeholder="e.g., Cattleya">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Country (optional)</label>
                                <select class="form-control bg-secondary text-light" name="country">
                                    <option value="">All countries</option>
                                    {% for code, name in countries.items() %}
                                    <option value="{{ code }}">{{ name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Limit</label>
                                <select class="form-control bg-secondary text-light" name="limit">
                                    <option value="20">20 records</option>
                                    <option value="50">50 records</option>
                                    <option value="100">100 records</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary">
                        <i data-feather="search"></i> Search
                    </button>
                </form>
                
                <div id="searchResults" class="mt-4"></div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Check API status on page load
document.addEventListener('DOMContentLoaded', function() {
    checkAPIStatus();
});

function checkAPIStatus() {
    fetch('/gbif/api/status')
        .then(response => response.json())
        .then(data => {
            const statusDiv = document.getElementById('apiStatus');
            
            if (data.api_connected) {
                statusDiv.innerHTML = `
                    <div class="d-flex align-items-center">
                        <span class="status-indicator status-connected"></span>
                        <div class="flex-grow-1">
                            <strong>GBIF API Connected</strong>
                            <div class="small text-muted">
                                ${data.api_key_configured ? 'Authenticated access' : 'Public access'}
                                | ${data.total_orchid_occurrences?.toLocaleString() || 'N/A'} orchid records available
                            </div>
                        </div>
                    </div>
                `;
            } else {
                statusDiv.innerHTML = `
                    <div class="d-flex align-items-center">
                        <span class="status-indicator status-disconnected"></span>
                        <div class="flex-grow-1">
                            <strong>GBIF API Connection Failed</strong>
                            <div class="small text-muted">${data.error || 'Unable to connect to GBIF'}</div>
                        </div>
                    </div>
                `;
            }
        })
        .catch(error => {
            document.getElementById('apiStatus').innerHTML = `
                <div class="d-flex align-items-center">
                    <span class="status-indicator status-disconnected"></span>
                    <div class="flex-grow-1">
                        <strong>Connection Error</strong>
                        <div class="small text-muted">Unable to check API status</div>
                    </div>
                </div>
            `;
        });
}

function openSearchModal() {
    $('#searchModal').modal('show');
}

// Handle search form submission
document.getElementById('searchForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    const params = new URLSearchParams();
    
    for (let [key, value] of formData.entries()) {
        if (value) params.set(key, value);
    }
    
    const resultsDiv = document.getElementById('searchResults');
    resultsDiv.innerHTML = '<div class="text-center"><div class="spinner-border text-primary"></div> Searching GBIF...</div>';
    
    fetch(`/gbif/api/search?${params}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                let html = `<h5>${data.count.toLocaleString()} records found (showing ${data.results.length})</h5>`;
                
                if (data.results.length > 0) {
                    html += '<div class="table-responsive"><table class="table table-dark table-sm">';
                    html += '<thead><tr><th>Scientific Name</th><th>Country</th><th>Date</th><th>Institution</th></tr></thead><tbody>';
                    
                    data.results.forEach(record => {
                        html += `
                            <tr>
                                <td><strong>${record.scientific_name}</strong></td>
                                <td>${record.country}</td>
                                <td>${record.date || 'N/A'}</td>
                                <td>${record.institution || 'N/A'}</td>
                            </tr>
                        `;
                    });
                    
                    html += '</tbody></table></div>';
                }
                
                resultsDiv.innerHTML = html;
            } else {
                resultsDiv.innerHTML = `<div class="alert alert-danger">Search error: ${data.error}</div>`;
            }
        })
        .catch(error => {
            resultsDiv.innerHTML = '<div class="alert alert-danger">Network error occurred</div>';
        });
});
</script>
{% endblock %}