{% extends "base.html" %}

{% block title %}{{ genus_details.genus }} Statistics - Orchid Continuum{% endblock %}

{% block content %}
<div class="container my-4">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="display-6 mb-2">
                        <i data-feather="layers" class="me-2"></i>{{ genus_details.genus }}
                        <span class="text-muted">Genus Statistics</span>
                    </h1>
                    <p class="lead text-muted">Complete analysis of {{ genus_details.genus }} orchids in our collection</p>
                </div>
                <div>
                    <a href="/stats" class="btn btn-outline-secondary me-2">
                        <i data-feather="arrow-left" class="me-2"></i>Back to Statistics
                    </a>
                    <a href="/search?genus={{ genus_details.genus }}" class="btn btn-primary">
                        <i data-feather="search" class="me-2"></i>Browse {{ genus_details.genus }}
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Genus Overview Cards -->
    <div class="row text-center mb-4">
        <div class="col-md-2">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <i data-feather="database" class="mb-2" style="width: 32px; height: 32px;"></i>
                    <h3>{{ genus_details.total_records or 0 }}</h3>
                    <p class="mb-0">Total Records</p>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card bg-success text-white">
                <div class="card-body">
                    <i data-feather="image" class="mb-2" style="width: 32px; height: 32px;"></i>
                    <h3>{{ genus_details.photos_count or 0 }}</h3>
                    <p class="mb-0">Photos</p>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card bg-info text-white">
                <div class="card-body">
                    <i data-feather="tag" class="mb-2" style="width: 32px; height: 32px;"></i>
                    <h3>{{ genus_details.species_count or 0 }}</h3>
                    <p class="mb-0">Species</p>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card bg-warning text-white">
                <div class="card-body">
                    <i data-feather="cpu" class="mb-2" style="width: 32px; height: 32px;"></i>
                    <h3>{{ genus_details.ai_analyzed or 0 }}</h3>
                    <p class="mb-0">AI Analyzed</p>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card bg-secondary text-white">
                <div class="card-body">
                    <i data-feather="map-pin" class="mb-2" style="width: 32px; height: 32px;"></i>
                    <h3>{{ genus_details.regions_found or 0 }}</h3>
                    <p class="mb-0">Regions</p>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card bg-dark text-white">
                <div class="card-body">
                    <i data-feather="percent" class="mb-2" style="width: 32px; height: 32px;"></i>
                    <h3>{{ "{:.0f}".format(genus_details.photo_percentage or 0) }}%</h3>
                    <p class="mb-0">Photo Coverage</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Photo Coverage Progress -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <h5 class="card-title">
                        <i data-feather="image" class="me-2"></i>Photo Documentation Progress
                    </h5>
                    <div class="progress mb-2" style="height: 20px;">
                        <div class="progress-bar bg-success" role="progressbar" 
                             style="width: {{ genus_details.photo_percentage or 0 }}%" 
                             aria-valuenow="{{ genus_details.photo_percentage or 0 }}" 
                             aria-valuemin="0" aria-valuemax="100">
                            {{ "{:.1f}".format(genus_details.photo_percentage or 0) }}%
                        </div>
                    </div>
                    <div class="d-flex justify-content-between text-muted">
                        <small>{{ genus_details.photos_count or 0 }} orchids with photos</small>
                        <small>{{ (genus_details.total_records or 0) - (genus_details.photos_count or 0) }} without photos</small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Orchid Gallery -->
    <div class="row">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">
                        <i data-feather="grid" class="me-2"></i>{{ genus_details.genus }} Collection
                    </h5>
                    <div>
                        <button class="btn btn-sm btn-outline-secondary" onclick="toggleView('grid')">
                            <i data-feather="grid" class="me-1"></i>Grid
                        </button>
                        <button class="btn btn-sm btn-outline-secondary" onclick="toggleView('list')">
                            <i data-feather="list" class="me-1"></i>List
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    {% if orchids %}
                    <div id="orchid-grid" class="row g-3">
                        {% for orchid in orchids %}
                        <div class="col-lg-3 col-md-4 col-sm-6">
                            <div class="card h-100 border-0 shadow-sm">
                                {% if orchid.google_drive_id %}
                                    <img src="/api/drive-photo/{{ orchid.google_drive_id }}" 
                                         class="card-img-top" alt="{{ orchid.display_name }}"
                                         style="height: 200px; object-fit: cover; cursor: pointer;"
                                         onclick="viewOrchid({{ orchid.id }})"
                                         onerror="this.src='/static/images/orchid_placeholder.svg';">
                                {% elif orchid.image_url and orchid.image_url != '/static/images/orchid_placeholder.svg' %}
                                    <img src="{{ orchid.image_url }}" 
                                         class="card-img-top" alt="{{ orchid.display_name }}"
                                         style="height: 200px; object-fit: cover; cursor: pointer;"
                                         onclick="viewOrchid({{ orchid.id }})"
                                         onerror="this.src='/static/images/orchid_placeholder.svg';">
                                {% else %}
                                    <div class="card-img-top bg-light d-flex align-items-center justify-content-center" 
                                         style="height: 200px; cursor: pointer;" onclick="viewOrchid({{ orchid.id }})">
                                        <i data-feather="image" class="text-muted" style="width: 48px; height: 48px;"></i>
                                    </div>
                                {% endif %}
                                
                                <div class="card-body p-3">
                                    <h6 class="card-title mb-2">{{ orchid.display_name or orchid.scientific_name }}</h6>
                                    
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        {% if orchid.species %}
                                            <span class="badge bg-primary">{{ orchid.species }}</span>
                                        {% endif %}
                                        
                                        {% if orchid.region %}
                                            <small class="text-muted">
                                                <i data-feather="map-pin" style="width: 12px; height: 12px;"></i>
                                                {{ orchid.region }}
                                            </small>
                                        {% endif %}
                                    </div>
                                    
                                    {% if orchid.ai_description %}
                                    <div class="mb-2">
                                        <span class="badge bg-success">
                                            <i data-feather="cpu" style="width: 12px; height: 12px;"></i>
                                            AI Analyzed
                                        </span>
                                    </div>
                                    {% endif %}
                                    
                                    <div class="d-flex gap-2">
                                        <a href="/orchid/{{ orchid.id }}" class="btn btn-sm btn-outline-primary flex-fill">
                                            <i data-feather="eye" class="me-1"></i>View
                                        </a>
                                        {% if orchid.google_drive_id %}
                                        <button class="btn btn-sm btn-outline-secondary" onclick="downloadPhoto({{ orchid.id }})">
                                            <i data-feather="download"></i>
                                        </button>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    
                    <!-- List View (initially hidden) -->
                    <div id="orchid-list" style="display: none;">
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Species</th>
                                        <th>Region</th>
                                        <th>Photos</th>
                                        <th>AI Analysis</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for orchid in orchids %}
                                    <tr>
                                        <td>{{ orchid.display_name or orchid.scientific_name }}</td>
                                        <td>
                                            {% if orchid.species %}
                                                <span class="badge bg-primary">{{ orchid.species }}</span>
                                            {% else %}
                                                <span class="text-muted">-</span>
                                            {% endif %}
                                        </td>
                                        <td>{{ orchid.region or '-' }}</td>
                                        <td>
                                            {% if orchid.google_drive_id %}
                                                <span class="text-success">
                                                    <i data-feather="check-circle" style="width: 16px; height: 16px;"></i>
                                                    Available
                                                </span>
                                            {% else %}
                                                <span class="text-muted">
                                                    <i data-feather="x-circle" style="width: 16px; height: 16px;"></i>
                                                    None
                                                </span>
                                            {% endif %}
                                        </td>
                                        <td>
                                            {% if orchid.ai_description %}
                                                <span class="badge bg-success">
                                                    <i data-feather="cpu" style="width: 12px; height: 12px;"></i>
                                                    Analyzed
                                                </span>
                                            {% else %}
                                                <span class="badge bg-secondary">Pending</span>
                                            {% endif %}
                                        </td>
                                        <td>
                                            <a href="/orchid/{{ orchid.id }}" class="btn btn-sm btn-outline-primary">
                                                <i data-feather="eye" class="me-1"></i>View
                                            </a>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                    {% else %}
                    <div class="text-center py-5">
                        <i data-feather="search" class="text-muted mb-3" style="width: 64px; height: 64px;"></i>
                        <h4 class="text-muted">No {{ genus_details.genus }} Orchids Found</h4>
                        <p class="text-muted">This genus may have been recently added or is still being processed.</p>
                        <a href="/upload" class="btn btn-primary">
                            <i data-feather="upload" class="me-2"></i>Contribute {{ genus_details.genus }} Orchids
                        </a>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function viewOrchid(orchidId) {
    window.location.href = `/orchid/${orchidId}`;
}

function downloadPhoto(orchidId) {
    // Implementation for photo download
    window.open(`/api/download-photo/${orchidId}`, '_blank');
}

function toggleView(viewType) {
    const gridView = document.getElementById('orchid-grid');
    const listView = document.getElementById('orchid-list');
    
    if (viewType === 'grid') {
        gridView.style.display = 'block';
        listView.style.display = 'none';
    } else {
        gridView.style.display = 'none';
        listView.style.display = 'block';
    }
}

// Initialize page
document.addEventListener('DOMContentLoaded', function() {
    feather.replace();
});
</script>
{% endblock %}