{% extends "base.html" %}
{% set title = "GBIF Collection Results" %}

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

.result-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;
}

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

.progress-bar {
    background: linear-gradient(90deg, #00d4aa 0%, #00a085 100%);
}

.btn-success {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border: none;
    border-radius: 10px;
    padding: 0.75rem 2rem;
    font-weight: bold;
}
</style>
{% endblock %}

{% block content %}
<div class="gbif-results">
    <div class="container py-5">
        <!-- Header -->
        <div class="text-center mb-5">
            <h1 class="text-light mb-3">🎉 GBIF Collection Complete!</h1>
            <p class="text-muted">Your orchid data collection has finished successfully</p>
        </div>

        <!-- Results Summary -->
        <div class="row">
            <div class="col-md-3">
                <div class="result-card text-center">
                    <div class="stat-highlight">{{ stats.processed or 0 }}</div>
                    <h5>Records Processed</h5>
                    <p class="text-muted mb-0">Total records examined</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="result-card text-center">
                    <div class="stat-highlight">{{ stats.saved or 0 }}</div>
                    <h5>New Records Added</h5>
                    <p class="text-muted mb-0">Added to your database</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="result-card text-center">
                    <div class="stat-highlight">{{ stats.duplicates or 0 }}</div>
                    <h5>Duplicates Skipped</h5>
                    <p class="text-muted mb-0">Already in database</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="result-card text-center">
                    <div class="stat-highlight">{{ stats.total_found or 0 }}</div>
                    <h5>Total Available</h5>
                    <p class="text-muted mb-0">In GBIF database</p>
                </div>
            </div>
        </div>

        <!-- Progress Visualization -->
        {% if stats.processed > 0 %}
        <div class="result-card">
            <h4 class="mb-3">Collection Progress</h4>
            <div class="row">
                <div class="col-md-6">
                    <h6>Success Rate</h6>
                    <div class="progress mb-3" style="height: 20px;">
                        {% set success_rate = ((stats.saved / stats.processed) * 100) if stats.processed > 0 else 0 %}
                        <div class="progress-bar" style="width: {{ success_rate }}%">
                            {{ "%.1f"|format(success_rate) }}%
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <h6>Completion</h6>
                    <div class="progress mb-3" style="height: 20px;">
                        <div class="progress-bar" style="width: 100%">
                            Complete
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}

        <!-- Next Steps -->
        <div class="result-card">
            <h4 class="mb-4">What's Next?</h4>
            <div class="row">
                <div class="col-md-4">
                    <div class="text-center">
                        <i data-feather="eye" style="width: 48px; height: 48px;" class="text-info mb-3"></i>
                        <h5>View Your Collection</h5>
                        <p class="text-muted mb-3">Browse the newly added orchid records</p>
                        <a href="{{ url_for('gallery') }}" class="btn btn-info">
                            <i data-feather="grid"></i> View Gallery
                        </a>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="text-center">
                        <i data-feather="download" style="width: 48px; height: 48px;" class="text-success mb-3"></i>
                        <h5>Collect More Data</h5>
                        <p class="text-muted mb-3">Run another collection with different parameters</p>
                        <a href="{{ url_for('gbif.collect_orchids') }}" class="btn btn-success">
                            <i data-feather="plus"></i> Collect More
                        </a>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="text-center">
                        <i data-feather="bar-chart-2" style="width: 48px; height: 48px;" class="text-warning mb-3"></i>
                        <h5>GBIF Dashboard</h5>
                        <p class="text-muted mb-3">Return to the main GBIF integration dashboard</p>
                        <a href="{{ url_for('gbif.gbif_dashboard') }}" class="btn btn-warning">
                            <i data-feather="home"></i> Dashboard
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Error Summary -->
        {% if stats.errors > 0 %}
        <div class="result-card">
            <h4 class="mb-3 text-warning">
                <i data-feather="alert-triangle"></i> Processing Issues
            </h4>
            <p>{{ stats.errors }} records encountered processing errors and were skipped. This is normal for data quality reasons.</p>
            <p class="text-muted mb-0">Common reasons: missing taxonomic data, invalid coordinates, or duplicate entries.</p>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}