{% extends "base.html" %}

{% block title %}Orchid Gallery - Orchid Continuum{% endblock %}

{% block content %}
<div class="container my-4">
    <!-- Gallery Header -->
    <div class="row mb-4">
        <div class="col-12">
            <h1 class="display-5 mb-3">
                <i data-feather="grid" class="me-2"></i>Orchid Gallery
            </h1>
            <p class="lead text-muted mb-2">Explore our collection of orchid photos and their AI-generated insights</p>
            <p class="text-muted fst-italic">"Where every orchid has a story — and every photo has a home."</p>
        </div>
    </div>
    
    <!-- Filters -->
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body">
            <form method="GET" action="{{ url_for('gallery') }}" class="row g-3">
                <div class="col-md-3">
                    <label for="genus" class="form-label">Genus</label>
                    <select class="form-select" id="genus" name="genus">
                        <option value="">All Genera</option>
                        {% for genus in genera %}
                            <option value="{{ genus }}" {% if current_genus == genus %}selected{% endif %}>
                                {{ genus }}
                            </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="climate" class="form-label">Climate Preference</label>
                    <select class="form-select" id="climate" name="climate">
                        <option value="">All Climates</option>
                        {% for climate in climates %}
                            <option value="{{ climate }}" {% if current_climate == climate %}selected{% endif %}>
                                {{ climate|title }}
                            </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="growth_habit" class="form-label">Growth Habit</label>
                    <select class="form-select" id="growth_habit" name="growth_habit">
                        <option value="">All Habits</option>
                        {% for habit in growth_habits %}
                            <option value="{{ habit }}" {% if current_growth_habit == habit %}selected{% endif %}>
                                {{ habit|title }}
                            </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-3 d-flex align-items-end">
                    <div class="btn-group w-100">
                        <button type="submit" class="btn btn-primary">
                            <i data-feather="filter" class="me-1"></i>Filter
                        </button>
                        <a href="{{ url_for('gallery') }}" class="btn btn-outline-secondary">
                            <i data-feather="x" class="me-1"></i>Clear
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>
    
    <!-- Photo Attribution Blurb -->
    <div class="row mb-3">
        <div class="col-12">
            <div class="alert alert-light border-0 mb-0 text-center">
                <small class="text-muted">
                    Photos in the Orchid Continuum are shared by our members, partners, and open sources. 
                    Contributors keep ownership and receive full credit. 
                    <a href="#" class="text-decoration-none" data-bs-toggle="modal" data-bs-target="#photoModal">
                        <strong>Read More →</strong>
                    </a>
                </small>
            </div>
        </div>
    </div>
    
    {% if orchids.items %}
        <!-- Gallery Grid -->
        <div class="row g-4 mb-4">
            {% for orchid in orchids.items %}
            <div class="col-md-6 col-lg-4 col-xl-3">
                <div class="card border-0 shadow-sm h-100 gallery-card">
                    {% if orchid.image_url or orchid.google_drive_id %}
                        <div class="position-relative">
                            {% set image_url = '/api/drive-photo/' + orchid.google_drive_id if orchid.google_drive_id else orchid.image_url %}
                            <img src="{{ image_url }}" class="card-img-top" alt="{{ orchid.display_name }}"
                                 style="height: 250px; object-fit: cover; cursor: pointer;"
                                 onerror="this.onerror=null; this.src='/static/images/fcos_placeholder_rect.png'; console.error('Image failed to load:', '{{ image_url }}');"
                                 onload="console.log('Image loaded successfully:', '{{ image_url }}');"
                                 onclick="showImageModal('{{ image_url }}', '{{ orchid.display_name }}')">
                            
                            <!-- Overlay badges -->
                            <div class="position-absolute top-0 end-0 p-2">
                                {% if orchid.is_featured %}
                                    <span class="badge bg-warning">
                                        <i data-feather="star" style="width: 12px; height: 12px;"></i>
                                    </span>
                                {% endif %}
                                {% if orchid.ai_confidence and orchid.ai_confidence > 0.8 %}
                                    <span class="badge bg-success ms-1">High Confidence</span>
                                {% elif orchid.ai_confidence and orchid.ai_confidence > 0.5 %}
                                    <span class="badge bg-warning ms-1">Medium Confidence</span>
                                {% endif %}
                            </div>
                            
                            <!-- Photo Source Badge -->
                            <div class="position-absolute top-0 start-0 p-2">
                                {% if orchid.google_drive_id %}
                                    <span class="badge bg-success" title="Five Cities Orchid Society Collection - Society Verified">
                                        <i data-feather="check-circle" style="width: 12px; height: 12px;"></i> FCOS
                                    </span>
                                {% elif orchid.image_url %}
                                    {% if 'garyyonggee' in orchid.image_url or 'orchids.yonggee.name' in orchid.image_url %}
                                        <span class="badge bg-info" title="Gary Yong Gee Collection - Expert Verified">
                                            <i data-feather="user-check" style="width: 12px; height: 12px;"></i> GYG
                                        </span>
                                    {% elif 'robertafox' in orchid.image_url or 'aos.org' in orchid.image_url %}
                                        <span class="badge bg-primary" title="American Orchid Society - AOS Verified">
                                            <i data-feather="award" style="width: 12px; height: 12px;"></i> AOS
                                        </span>
                                    {% elif 'gbif.org' in orchid.image_url %}
                                        <span class="badge bg-dark" title="GBIF Scientific Database - Scientifically Verified">
                                            <i data-feather="database" style="width: 12px; height: 12px;"></i> GBIF
                                        </span>
                                    {% else %}
                                        <span class="badge bg-warning text-dark" title="External Source - Verification Needed">
                                            <i data-feather="help-circle" style="width: 12px; height: 12px;"></i> Web
                                        </span>
                                    {% endif %}
                                {% else %}
                                    <span class="badge bg-secondary" title="No Photo Available">
                                        <i data-feather="x-circle" style="width: 12px; height: 12px;"></i> No Photo
                                    </span>
                                {% endif %}
                            </div>
                        </div>
                    {% else %}
                        <div class="card-img-top bg-light d-flex align-items-center justify-content-center" 
                             style="height: 250px;">
                            <i data-feather="image" class="text-muted" style="width: 48px; height: 48px;"></i>
                        </div>
                    {% endif %}
                    
                    <div class="card-body">
                        <h6 class="card-title mb-2">
                            {% if orchid.genus and orchid.species %}
                                <em>{{ orchid.genus }} {{ orchid.species }}</em>
                            {% elif orchid.scientific_name %}
                                <em>{{ orchid.scientific_name }}</em>
                            {% else %}
                                {{ orchid.display_name }}
                            {% endif %}
                        </h6>
                        
                        {% if orchid.display_name and orchid.scientific_name and orchid.display_name != orchid.scientific_name %}
                            <p class="text-muted small mb-2">{{ orchid.display_name }}</p>
                        {% endif %}
                        
                        <div class="row g-2 mb-3">
                            {% if orchid.genus %}
                                <div class="col-6">
                                    <small class="text-muted">Genus:</small><br>
                                    <small><strong>{{ orchid.genus }}</strong></small>
                                </div>
                            {% endif %}
                            {% if orchid.species %}
                                <div class="col-6">
                                    <small class="text-muted">Species:</small><br>
                                    <small><strong>{{ orchid.species }}</strong></small>
                                </div>
                            {% endif %}
                            {% if orchid.climate_preference %}
                                <div class="col-6">
                                    <small class="text-muted">Climate:</small><br>
                                    <small><strong>{{ orchid.climate_preference|title }}</strong></small>
                                </div>
                            {% endif %}
                        </div>
                        
                        {% if orchid.ai_description %}
                            <p class="card-text small">{{ orchid.ai_description[:80] }}...</p>
                        {% endif %}
                        
                        <div class="d-flex justify-content-between align-items-center mt-auto">
                            <a href="{{ url_for('orchid_detail', id=orchid.id) }}" class="btn btn-sm btn-primary">
                                View Details
                            </a>
                            <div class="d-flex align-items-center text-muted">
                                <i data-feather="eye" class="me-1" style="width: 16px; height: 16px;"></i>
                                <small>{{ orchid.view_count or 0 }}</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        
        <!-- Pagination -->
        {% if orchids.pages > 1 %}
        <div class="row">
            <div class="col-12">
                <nav aria-label="Gallery pagination">
                    <ul class="pagination justify-content-center">
                        {% if orchids.has_prev %}
                            <li class="page-item">
                                <a class="page-link" href="{{ url_for('gallery', page=orchids.prev_num, genus=current_genus, climate=current_climate, growth_habit=current_growth_habit) }}">
                                    <i data-feather="chevron-left"></i> Previous
                                </a>
                            </li>
                        {% endif %}
                        
                        {% for page_num in orchids.iter_pages() %}
                            {% if page_num %}
                                {% if page_num != orchids.page %}
                                    <li class="page-item">
                                        <a class="page-link" href="{{ url_for('gallery', page=page_num, genus=current_genus, climate=current_climate, growth_habit=current_growth_habit) }}">
                                            {{ page_num }}
                                        </a>
                                    </li>
                                {% else %}
                                    <li class="page-item active">
                                        <span class="page-link">{{ page_num }}</span>
                                    </li>
                                {% endif %}
                            {% else %}
                                <li class="page-item disabled">
                                    <span class="page-link">…</span>
                                </li>
                            {% endif %}
                        {% endfor %}
                        
                        {% if orchids.has_next %}
                            <li class="page-item">
                                <a class="page-link" href="{{ url_for('gallery', page=orchids.next_num, genus=current_genus, climate=current_climate, growth_habit=current_growth_habit) }}">
                                    Next <i data-feather="chevron-right"></i>
                                </a>
                            </li>
                        {% endif %}
                    </ul>
                </nav>
            </div>
        </div>
        {% endif %}
        
    {% else %}
        <!-- Empty State -->
        <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 Orchids Found</h4>
            <p class="text-muted mb-4">Try adjusting your filters or browse all orchids.</p>
            <div class="d-flex gap-3 justify-content-center">
                <a href="{{ url_for('gallery') }}" class="btn btn-outline-secondary">
                    <i data-feather="grid" class="me-2"></i>Show All
                </a>
                <a href="{{ url_for('upload') }}" class="btn btn-primary">
                    <i data-feather="upload" class="me-2"></i>Upload First Orchid
                </a>
            </div>
        </div>
    {% endif %}
</div>

<!-- Image Modal -->
<div class="modal fade" id="imageModal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="imageModalTitle">Orchid Image</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body text-center">
                <img id="modalImage" src="" alt="" class="img-fluid">
            </div>
        </div>
    </div>
</div>

<!-- Photo Policy Modal -->
<div class="modal fade" id="photoModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i data-feather="camera" class="me-2"></i>Photo Policy
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="text-center mb-4">
                    <h6 class="text-muted">The Orchid Continuum is built on community trust.</h6>
                </div>
                
                <p>Every photo in this gallery is contributed by orchid lovers, researchers, or shared under open licenses.</p>
                
                <div class="row g-3 mb-4">
                    <div class="col-md-6">
                        <div class="d-flex align-items-start">
                            <span class="me-2">📷</span>
                            <div>
                                <strong>Contributors always retain ownership</strong> of their images.
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="d-flex align-items-start">
                            <span class="me-2">🌱</span>
                            <div>
                                <strong>Every photo is credited</strong> to its source.
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="d-flex align-items-start">
                            <span class="me-2">✨</span>
                            <div>
                                <strong>Sharing your photos</strong> helps expand orchid knowledge, supports education, and strengthens conservation efforts.
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="d-flex align-items-start">
                            <span class="me-2">🚫</span>
                            <div>
                                <strong>We do not scrape or republish</strong> copyrighted images without permission.
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="text-center">
                    <p class="text-muted mb-3">Together, we are creating a living gallery of orchids for everyone to enjoy.</p>
                    <a href="{{ url_for('upload') }}" class="btn btn-primary">
                        <i data-feather="upload" class="me-2"></i>Contribute Your Photos
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function showImageModal(imageUrl, title) {
    document.getElementById('modalImage').src = imageUrl;
    document.getElementById('imageModalTitle').textContent = title;
    new bootstrap.Modal(document.getElementById('imageModal')).show();
}

// Initialize feather icons for dynamically loaded content
document.addEventListener('DOMContentLoaded', function() {
    feather.replace();
});
</script>
{% endblock %}