{% extends "base.html" %}

{% block title %}Show & Tell Galleries - My Collection{% endblock %}

{% block extra_css %}
<link href="/api/mobile-widget-styles.css" rel="stylesheet">
<style>
.show-tell-dashboard {
    padding: 20px;
}

.gallery-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin-bottom: 30px;
}

.stat-card {
    background: linear-gradient(135deg, #6b73ff 0%, #000dff 100%);
    color: white;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.stat-number {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 5px;
}

.stat-label {
    font-size: 0.85rem;
    opacity: 0.9;
}

.create-gallery-section {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 30px;
    border: 2px dashed #dee2e6;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.gallery-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    position: relative;
}

.gallery-card:hover {
    transform: translateY(-3px);
}

.gallery-header {
    padding: 15px;
    border-bottom: 1px solid #e9ecef;
}

.gallery-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 5px;
}

.gallery-species {
    font-style: italic;
    color: #7f8c8d;
    font-size: 0.95rem;
}

.gallery-orchids {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 15px;
    min-height: 120px;
    max-height: 200px;
    overflow-y: auto;
}

.orchid-thumbnail {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.gallery-footer {
    padding: 15px;
    background: #f8f9fa;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.status-badge {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
}

.status-badge.draft {
    background: #6c757d;
    color: white;
}

.status-badge.member_published {
    background: #28a745;
    color: white;
}

.status-badge.pending_approval {
    background: #ffc107;
    color: #212529;
}

.status-badge.public_approved {
    background: #007bff;
    color: white;
}

.status-badge.public_rejected {
    background: #dc3545;
    color: white;
}

.gallery-actions {
    display: flex;
    gap: 8px;
}

.gallery-notes {
    padding: 15px;
    background: #f8f9fa;
    font-size: 0.9rem;
    color: #6c757d;
    border-top: 1px solid #e9ecef;
}

.orchid-selector {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    margin: 20px 0;
    max-height: 300px;
    overflow-y: auto;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
}

.orchid-select-item {
    display: flex;
    align-items: center;
    padding: 10px;
    background: white;
    border-radius: 8px;
    border: 2px solid #e9ecef;
    cursor: pointer;
    transition: all 0.3s ease;
}

.orchid-select-item:hover {
    border-color: #007bff;
}

.orchid-select-item.selected {
    border-color: #007bff;
    background: #e7f3ff;
}

.orchid-select-image {
    width: 50px;
    height: 50px;
    border-radius: 6px;
    object-fit: cover;
    margin-right: 10px;
}

.orchid-select-info {
    flex: 1;
}

.orchid-select-name {
    font-weight: bold;
    font-size: 0.9rem;
    color: #2c3e50;
}

.orchid-select-species {
    font-size: 0.8rem;
    color: #7f8c8d;
    font-style: italic;
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #7f8c8d;
}

.empty-state-icon {
    font-size: 4rem;
    margin-bottom: 20px;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .show-tell-dashboard {
        padding: 10px;
    }
    
    .gallery-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .gallery-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .orchid-selector {
        grid-template-columns: 1fr;
    }
    
    .gallery-actions {
        flex-direction: column;
    }
    
    .gallery-actions .btn {
        width: 100%;
        margin-bottom: 5px;
    }
}
</style>
{% endblock %}

{% block content %}
<div class="show-tell-dashboard">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="text-light">
                <i data-feather="camera" class="me-2"></i>
                Show & Tell Galleries
            </h1>
            <p class="text-muted mb-0">Share your orchid collection with the community</p>
        </div>
        <div>
            <a href="{{ url_for('user_collection_dashboard') }}" class="btn btn-outline-light me-2">
                <i data-feather="arrow-left" class="me-1"></i>Back to Collection
            </a>
            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createGalleryModal">
                <i data-feather="plus" class="me-1"></i>Create Gallery
            </button>
        </div>
    </div>

    <!-- Statistics -->
    <div class="gallery-stats">
        <div class="stat-card">
            <div class="stat-number">{{ show_tell.statistics.total_galleries }}</div>
            <div class="stat-label">Total Galleries</div>
        </div>
        <div class="stat-card">
            <div class="stat-number">{{ show_tell.statistics.member_published }}</div>
            <div class="stat-label">Published</div>
        </div>
        <div class="stat-card">
            <div class="stat-number">{{ show_tell.statistics.pending_approval }}</div>
            <div class="stat-label">Pending Approval</div>
        </div>
        <div class="stat-card">
            <div class="stat-number">{{ show_tell.statistics.public_approved }}</div>
            <div class="stat-label">Public Approved</div>
        </div>
        <div class="stat-card">
            <div class="stat-number">{{ show_tell.statistics.total_views }}</div>
            <div class="stat-label">Total Views</div>
        </div>
    </div>

    <!-- Gallery Cards -->
    {% if show_tell.all_galleries %}
    <div class="section-header">
        <h3><i data-feather="grid" class="me-2"></i>My Galleries</h3>
        <span class="badge bg-secondary">{{ show_tell.statistics.total_galleries }} galleries</span>
    </div>

    <div class="gallery-grid">
        {% for gallery in show_tell.all_galleries %}
        <div class="gallery-card" data-gallery-id="{{ gallery.id }}">
            <div class="gallery-header">
                <div class="gallery-title">{{ gallery.title or 'Untitled Gallery' }}</div>
                <div class="gallery-species">{{ gallery.genus_species or 'Mixed species' }}</div>
            </div>
            
            {% if gallery.selected_orchids %}
            <div class="gallery-orchids">
                {% for orchid_id in gallery.selected_orchids[:6] %}
                    {% set orchid = collection.owned_orchids | selectattr('orchid_id', 'equalto', orchid_id) | first %}
                    {% if orchid %}
                    <img src="{{ orchid.image_url or '/static/images/placeholder.png' }}" 
                         alt="{{ orchid.display_name }}" 
                         class="orchid-thumbnail"
                         title="{{ orchid.display_name }}">
                    {% endif %}
                {% endfor %}
                {% if gallery.selected_orchids|length > 6 %}
                <div class="d-flex align-items-center justify-content-center bg-light" 
                     style="width: 60px; height: 60px; border-radius: 8px; font-weight: bold; color: #6c757d;">
                    +{{ gallery.selected_orchids|length - 6 }}
                </div>
                {% endif %}
            </div>
            {% else %}
            <div class="gallery-orchids d-flex align-items-center justify-content-center">
                <div class="text-muted">
                    <i data-feather="image" style="width: 48px; height: 48px;"></i>
                    <p class="mt-2 mb-0">No orchids selected</p>
                </div>
            </div>
            {% endif %}
            
            {% if gallery.notes %}
            <div class="gallery-notes">
                {{ gallery.notes[:150] }}{% if gallery.notes|length > 150 %}...{% endif %}
            </div>
            {% endif %}
            
            <div class="gallery-footer">
                <span class="status-badge {{ gallery.status }}">
                    {% if gallery.status == 'draft' %}Draft
                    {% elif gallery.status == 'member_published' %}Published to Members
                    {% elif gallery.status == 'pending_approval' %}Pending Admin Approval
                    {% elif gallery.status == 'public_approved' %}Public Approved
                    {% elif gallery.status == 'public_rejected' %}Public Rejected
                    {% endif %}
                </span>
                
                <div class="gallery-actions">
                    <button class="btn btn-sm btn-outline-primary edit-gallery-btn" 
                            data-gallery-id="{{ gallery.id }}">
                        <i data-feather="edit-2" style="width: 14px; height: 14px;"></i>
                    </button>
                    
                    {% if gallery.status == 'public_approved' or gallery.status == 'member_published' %}
                    <a href="/show-tell/gallery/{{ gallery.id }}" class="btn btn-sm btn-outline-success">
                        <i data-feather="eye" style="width: 14px; height: 14px;"></i>
                    </a>
                    {% endif %}
                    
                    {% if gallery.status in ['draft', 'member_published'] %}
                    <button class="btn btn-sm btn-outline-danger delete-gallery-btn" 
                            data-gallery-id="{{ gallery.id }}">
                        <i data-feather="trash-2" style="width: 14px; height: 14px;"></i>
                    </button>
                    {% endif %}
                    
                    {% if gallery.view_count > 0 %}
                    <small class="text-muted ms-2">{{ gallery.view_count }} views</small>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="empty-state">
        <div class="empty-state-icon">📸</div>
        <h4>Create Your First Show & Tell Gallery</h4>
        <p>Share your beautiful orchid collection with the Five Cities Orchid Society community.</p>
        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createGalleryModal">
            <i data-feather="plus" class="me-1"></i>Create Gallery
        </button>
    </div>
    {% endif %}
</div>

<!-- Create Gallery Modal -->
<div class="modal fade" id="createGalleryModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Create Show & Tell Gallery</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="createGalleryForm">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="galleryTitle" class="form-label">Gallery Title *</label>
                            <input type="text" class="form-control" id="galleryTitle" required 
                                   placeholder="e.g., My Spring Orchid Collection">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="genusSpecies" class="form-label">Genus & Species</label>
                            <input type="text" class="form-control" id="genusSpecies" 
                                   placeholder="e.g., Phalaenopsis amabilis">
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="galleryNotes" class="form-label">Gallery Notes</label>
                        <textarea class="form-control" id="galleryNotes" rows="3" 
                                  placeholder="Tell us about your orchids, growing tips, or special stories..."></textarea>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Select Orchids from Your Collection</label>
                        {% if collection.owned_orchids %}
                        <div class="orchid-selector" id="orchidSelector">
                            {% for orchid in collection.owned_orchids %}
                            <div class="orchid-select-item" data-orchid-id="{{ orchid.orchid_id }}">
                                <img src="{{ orchid.image_url or '/static/images/placeholder.png' }}" 
                                     alt="{{ orchid.display_name }}" class="orchid-select-image">
                                <div class="orchid-select-info">
                                    <div class="orchid-select-name">{{ orchid.display_name }}</div>
                                    <div class="orchid-select-species">{{ orchid.scientific_name or 'Unknown species' }}</div>
                                </div>
                                <input type="checkbox" class="form-check-input orchid-checkbox" 
                                       value="{{ orchid.orchid_id }}" style="margin-left: 10px;">
                            </div>
                            {% endfor %}
                        </div>
                        {% else %}
                        <p class="text-muted">No orchids in your collection yet. <a href="{{ url_for('gallery') }}">Add some orchids</a> first.</p>
                        {% endif %}
                    </div>
                    
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="publishMemberPortal">
                            <label class="form-check-label" for="publishMemberPortal">
                                <strong>Publish to Member Portal</strong> - Visible to all society members
                            </label>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="applyPublicDisplay">
                            <label class="form-check-label" for="applyPublicDisplay">
                                <strong>Apply for Public Display</strong> - Submit for admin review to appear on public website
                            </label>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="saveGallery">Create Gallery</button>
            </div>
        </div>
    </div>
</div>

<!-- Edit Gallery Modal -->
<div class="modal fade" id="editGalleryModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Gallery</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="editGalleryForm">
                    <input type="hidden" id="editGalleryId">
                    <!-- Same form fields as create modal -->
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="editGalleryTitle" class="form-label">Gallery Title *</label>
                            <input type="text" class="form-control" id="editGalleryTitle" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="editGenusSpecies" class="form-label">Genus & Species</label>
                            <input type="text" class="form-control" id="editGenusSpecies">
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="editGalleryNotes" class="form-label">Gallery Notes</label>
                        <textarea class="form-control" id="editGalleryNotes" rows="3"></textarea>
                    </div>
                    
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="editPublishMemberPortal">
                            <label class="form-check-label" for="editPublishMemberPortal">
                                <strong>Publish to Member Portal</strong>
                            </label>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="editApplyPublicDisplay">
                            <label class="form-check-label" for="editApplyPublicDisplay">
                                <strong>Apply for Public Display</strong>
                            </label>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="updateGallery">Update Gallery</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="/api/mobile-touch-controls.js?widget_type=collection"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    
    // Orchid selection handling
    document.querySelectorAll('.orchid-select-item').forEach(item => {
        item.addEventListener('click', function(e) {
            if (e.target.type !== 'checkbox') {
                const checkbox = this.querySelector('.orchid-checkbox');
                checkbox.checked = !checkbox.checked;
            }
            
            if (this.querySelector('.orchid-checkbox').checked) {
                this.classList.add('selected');
            } else {
                this.classList.remove('selected');
            }
        });
    });
    
    // Create gallery
    document.getElementById('saveGallery').addEventListener('click', function() {
        const selectedOrchids = Array.from(document.querySelectorAll('.orchid-checkbox:checked'))
                                    .map(cb => parseInt(cb.value));
        
        const galleryData = {
            title: document.getElementById('galleryTitle').value,
            genus_species: document.getElementById('genusSpecies').value,
            notes: document.getElementById('galleryNotes').value,
            selected_orchids: selectedOrchids,
            publish_member_portal: document.getElementById('publishMemberPortal').checked,
            apply_public_display: document.getElementById('applyPublicDisplay').checked
        };
        
        if (!galleryData.title.trim()) {
            alert('Please enter a gallery title');
            return;
        }
        
        if (selectedOrchids.length === 0) {
            alert('Please select at least one orchid for your gallery');
            return;
        }
        
        fetch('/api/show-tell', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(galleryData)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                bootstrap.Modal.getInstance(document.getElementById('createGalleryModal')).hide();
                showOrchidToast('Gallery created successfully!', 'success');
                setTimeout(() => location.reload(), 1000);
            } else {
                alert('Error creating gallery: ' + data.error);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Network error occurred');
        });
    });
    
    // Edit gallery
    document.querySelectorAll('.edit-gallery-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const galleryId = this.dataset.galleryId;
            // In a real implementation, fetch gallery data and populate edit form
            document.getElementById('editGalleryId').value = galleryId;
            new bootstrap.Modal(document.getElementById('editGalleryModal')).show();
        });
    });
    
    // Delete gallery
    document.querySelectorAll('.delete-gallery-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            if (confirm('Are you sure you want to delete this gallery?')) {
                const galleryId = this.dataset.galleryId;
                
                fetch(`/api/show-tell?gallery_id=${galleryId}`, {
                    method: 'DELETE'
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showOrchidToast('Gallery deleted successfully', 'success');
                        setTimeout(() => location.reload(), 1000);
                    } else {
                        alert('Error deleting gallery: ' + data.error);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Network error occurred');
                });
            }
        });
    });
    
    // Initialize feather icons
    feather.replace();
});
</script>
{% endblock %}