{% extends "base.html" %}

{% block title %}Orchid Validation - Admin{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h2 class="fw-bold" style="color: #7A4B8E;">
                        <i data-feather="eye" class="me-2"></i>
                        Orchid Validation Center
                    </h2>
                    <p class="text-muted">Validate orchid taxonomy, approve for galleries, and assign display IDs</p>
                </div>
                <a href="{{ url_for('orchid_approval.approval_dashboard') }}" class="btn btn-outline-secondary">
                    <i data-feather="arrow-left" class="me-1"></i> Back to Dashboard
                </a>
            </div>
        </div>
    </div>

    <!-- Validation Filters -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3">
                            <label class="form-label">Filter by Source</label>
                            <select class="form-select" id="sourceFilter" onchange="filterOrchids()">
                                <option value="">All Sources</option>
                                <option value="gbif">GBIF Records</option>
                                <option value="upload">User Uploads</option>
                                <option value="scraper">Web Scraped</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Image Quality</label>
                            <select class="form-select" id="imageFilter" onchange="filterOrchids()">
                                <option value="">All Images</option>
                                <option value="with_image">With Images</option>
                                <option value="google_drive">Google Drive</option>
                                <option value="external_url">External URLs</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Validation Status</label>
                            <select class="form-select" id="statusFilter" onchange="filterOrchids()">
                                <option value="">All Status</option>
                                <option value="unreviewed">Unreviewed</option>
                                <option value="pending">Pending</option>
                                <option value="rejected">Rejected</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Quick Actions</label>
                            <div>
                                <button class="btn btn-success btn-sm me-2" onclick="bulkApprove()">
                                    <i data-feather="check-square" class="me-1"></i> Bulk Approve
                                </button>
                                <button class="btn btn-warning btn-sm" onclick="exportForReview()">
                                    <i data-feather="download" class="me-1"></i> Export
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Orchids to Validate -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header" style="background-color: #F8F9FA;">
                    <h5 class="card-title mb-0">
                        <i data-feather="list" class="me-2"></i>
                        Orchids Requiring Validation ({{ orchids|length }})
                    </h5>
                </div>
                <div class="card-body">
                    {% if orchids %}
                    {% for orchid in orchids %}
                    <div class="orchid-validation-card mb-4 border rounded p-3" data-orchid-id="{{ orchid.id }}">
                        <div class="row">
                            <!-- Orchid Image -->
                            <div class="col-md-3">
                                <div class="orchid-image-preview">
                                    {% if orchid.google_drive_id %}
                                    <img src="/api/drive-photo/{{ orchid.google_drive_id }}" 
                                         alt="{{ orchid.display_name }}" 
                                         class="img-fluid rounded"
                                         style="max-height: 200px; width: 100%; object-fit: cover;"
                                         onerror="this.src='/static/images/fcos_placeholder_rect.png';">
                                    {% elif orchid.image_url %}
                                    <img src="{{ orchid.image_url }}" 
                                         alt="{{ orchid.display_name }}" 
                                         class="img-fluid rounded"
                                         style="max-height: 200px; width: 100%; object-fit: cover;"
                                         onerror="this.src='/static/images/fcos_placeholder_rect.png';">
                                    {% else %}
                                    <div class="bg-light rounded d-flex align-items-center justify-content-center" 
                                         style="height: 200px;">
                                        <i data-feather="image" style="width: 48px; height: 48px;" class="text-muted"></i>
                                    </div>
                                    {% endif %}
                                </div>
                            </div>

                            <!-- Orchid Details -->
                            <div class="col-md-9">
                                <div class="row">
                                    <div class="col-md-8">
                                        <h5 class="text-danger mb-2">
                                            {% if orchid.genus and orchid.species %}
                                                <em>{{ orchid.genus }} {{ orchid.species }}</em>
                                            {% else %}
                                                {{ orchid.display_name or orchid.scientific_name or "Unnamed Orchid" }}
                                            {% endif %}
                                            {% if not validate_orchid_name(orchid.genus, orchid.species) %}
                                            <span class="badge bg-danger ms-2">
                                                <i data-feather="alert-triangle" style="width: 12px; height: 12px;"></i>
                                                Invalid Name
                                            </span>
                                            {% endif %}
                                        </h5>
                                        
                                        <div class="row mb-3">
                                            <div class="col-sm-6">
                                                <small class="text-muted">Original Genus:</small>
                                                <div>{{ orchid.genus or "Not specified" }}</div>
                                            </div>
                                            <div class="col-sm-6">
                                                <small class="text-muted">Original Species:</small>
                                                <div>{{ orchid.species or "Not specified" }}</div>
                                            </div>
                                        </div>

                                        <div class="row mb-3">
                                            <div class="col-sm-6">
                                                <small class="text-muted">Country:</small>
                                                <div>{{ orchid.country or "Unknown" }}</div>
                                            </div>
                                            <div class="col-sm-6">
                                                <small class="text-muted">Source:</small>
                                                <div>
                                                    {% if orchid.data_source %}
                                                        <span class="badge bg-info">{{ orchid.data_source }}</span>
                                                    {% elif orchid.image_url and 'gbif.org' in orchid.image_url %}
                                                        <span class="badge bg-info">GBIF</span>
                                                    {% else %}
                                                        <span class="badge bg-secondary">Unknown</span>
                                                    {% endif %}
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Validation Form -->
                                        <div class="validation-form">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <label class="form-label">Corrected Genus <span class="text-danger">*</span></label>
                                                    <select class="form-select genus-select" 
                                                            name="approved_genus_{{ orchid.id }}"
                                                            onchange="updateSpeciesOptions({{ orchid.id }})">
                                                        <option value="">Select Genus</option>
                                                        {% for genus in valid_genera %}
                                                        <option value="{{ genus }}" 
                                                                {% if orchid.genus and genus.lower() == orchid.genus.lower() %}selected{% endif %}>
                                                            {{ genus }}
                                                        </option>
                                                        {% endfor %}
                                                    </select>
                                                </div>
                                                <div class="col-md-6">
                                                    <label class="form-label">Corrected Species <span class="text-danger">*</span></label>
                                                    <input type="text" class="form-control" 
                                                           name="approved_species_{{ orchid.id }}"
                                                           value="{{ orchid.species or '' }}"
                                                           placeholder="Enter species epithet">
                                                </div>
                                            </div>
                                            
                                            <div class="row mt-2">
                                                <div class="col-md-6">
                                                    <label class="form-label">Common Name</label>
                                                    <input type="text" class="form-control" 
                                                           name="approved_common_name_{{ orchid.id }}"
                                                           placeholder="e.g., Dancing Lady Orchid">
                                                </div>
                                                <div class="col-md-6">
                                                    <label class="form-label">Gallery Assignment</label>
                                                    <select class="form-select" name="gallery_type_{{ orchid.id }}">
                                                        <option value="main_gallery">Main Gallery</option>
                                                        <option value="featured_gallery">Featured Gallery</option>
                                                        <option value="orchid_of_the_day">Orchid of the Day</option>
                                                        <option value="species_spotlight">Species Spotlight</option>
                                                        <option value="premium_showcase">Premium Showcase</option>
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="row mt-2">
                                                <div class="col-12">
                                                    <label class="form-label">Custom Description</label>
                                                    <textarea class="form-control" rows="2" 
                                                              name="custom_description_{{ orchid.id }}"
                                                              placeholder="Optional custom description for display"></textarea>
                                                </div>
                                            </div>

                                            <!-- Quality Checks -->
                                            <div class="row mt-3">
                                                <div class="col-12">
                                                    <div class="form-check-inline">
                                                        <input class="form-check-input" type="checkbox" 
                                                               id="imageQuality_{{ orchid.id }}" 
                                                               name="image_quality_approved_{{ orchid.id }}"
                                                               checked>
                                                        <label class="form-check-label" for="imageQuality_{{ orchid.id }}">
                                                            Image quality approved
                                                        </label>
                                                    </div>
                                                    <div class="form-check-inline ms-3">
                                                        <input class="form-check-input" type="checkbox" 
                                                               id="metadataComplete_{{ orchid.id }}" 
                                                               name="metadata_complete_{{ orchid.id }}">
                                                        <label class="form-check-label" for="metadataComplete_{{ orchid.id }}">
                                                            Metadata complete
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Action Buttons -->
                                    <div class="col-md-4">
                                        <div class="d-grid gap-2">
                                            <button class="btn btn-success" onclick="approveOrchid({{ orchid.id }})">
                                                <i data-feather="check-circle" class="me-2"></i>
                                                Approve Orchid
                                            </button>
                                            <button class="btn btn-warning" onclick="showRejectionModal({{ orchid.id }})">
                                                <i data-feather="x-circle" class="me-2"></i>
                                                Reject
                                            </button>
                                            <button class="btn btn-info btn-sm" onclick="previewOrchid({{ orchid.id }})">
                                                <i data-feather="eye" class="me-2"></i>
                                                Preview Display
                                            </button>
                                        </div>

                                        <!-- Validation Status -->
                                        <div class="mt-3">
                                            <div class="validation-status" id="status_{{ orchid.id }}">
                                                <span class="badge bg-warning">Pending Validation</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                    {% else %}
                    <div class="text-center py-5">
                        <i data-feather="check-circle" style="width: 64px; height: 64px;" class="text-success mb-3"></i>
                        <h4 class="text-success">All Caught Up!</h4>
                        <p class="text-muted">No orchids currently require validation.</p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Rejection Modal -->
<div class="modal fade" id="rejectionModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Reject Orchid</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label">Rejection Reason <span class="text-danger">*</span></label>
                    <textarea class="form-control" id="rejectionReason" rows="4" 
                              placeholder="Please specify why this orchid is being rejected..."></textarea>
                </div>
                <div class="alert alert-info">
                    <strong>Common rejection reasons:</strong>
                    <ul class="mb-0">
                        <li>Invalid taxonomy (not a real orchid species)</li>
                        <li>Poor image quality or unclear subject</li>
                        <li>Duplicate entry</li>
                        <li>Incorrect identification</li>
                        <li>Missing required metadata</li>
                    </ul>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" onclick="confirmRejection()">
                    <i data-feather="x-circle" class="me-1"></i> Reject Orchid
                </button>
            </div>
        </div>
    </div>
</div>

<!-- JavaScript -->
<script>
let currentOrchidId = null;

function approveOrchid(orchidId) {
    const genus = document.querySelector(`select[name="approved_genus_${orchidId}"]`).value.trim();
    const species = document.querySelector(`input[name="approved_species_${orchidId}"]`).value.trim();
    
    if (!genus || !species) {
        alert('Genus and species are required for approval');
        return;
    }
    
    const approvalData = {
        orchid_id: orchidId,
        approved_genus: genus,
        approved_species: species,
        approved_common_name: document.querySelector(`input[name="approved_common_name_${orchidId}"]`).value.trim(),
        gallery_type: document.querySelector(`select[name="gallery_type_${orchidId}"]`).value,
        custom_description: document.querySelector(`textarea[name="custom_description_${orchidId}"]`).value.trim(),
        image_quality_approved: document.querySelector(`input[name="image_quality_approved_${orchidId}"]`).checked,
        metadata_complete: document.querySelector(`input[name="metadata_complete_${orchidId}"]`).checked
    };
    
    fetch('/admin/orchid-approval/approve-orchid', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(approvalData)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            document.getElementById(`status_${orchidId}`).innerHTML = 
                `<span class="badge bg-success">Approved - ${data.special_display_id}</span>`;
            document.querySelector(`[data-orchid-id="${orchidId}"]`).style.opacity = '0.6';
            alert(`Orchid approved successfully! Display ID: ${data.special_display_id}`);
        } else {
            alert(`Error: ${data.message}`);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error approving orchid');
    });
}

function showRejectionModal(orchidId) {
    currentOrchidId = orchidId;
    document.getElementById('rejectionReason').value = '';
    new bootstrap.Modal(document.getElementById('rejectionModal')).show();
}

function confirmRejection() {
    const reason = document.getElementById('rejectionReason').value.trim();
    
    if (!reason) {
        alert('Rejection reason is required');
        return;
    }
    
    fetch('/admin/orchid-approval/reject-orchid', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            orchid_id: currentOrchidId,
            rejection_reason: reason
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            document.getElementById(`status_${currentOrchidId}`).innerHTML = 
                '<span class="badge bg-danger">Rejected</span>';
            document.querySelector(`[data-orchid-id="${currentOrchidId}"]`).style.opacity = '0.6';
            bootstrap.Modal.getInstance(document.getElementById('rejectionModal')).hide();
            alert('Orchid rejected successfully');
        } else {
            alert(`Error: ${data.message}`);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error rejecting orchid');
    });
}

function filterOrchids() {
    // Implementation for filtering orchids by source, image, status
    console.log('Filtering orchids...');
}

function bulkApprove() {
    // Implementation for bulk approval
    alert('Bulk approval functionality will be implemented');
}

function exportForReview() {
    // Implementation for exporting orchids for external review
    alert('Export functionality will be implemented');
}

function previewOrchid(orchidId) {
    // Implementation for previewing how orchid will appear
    alert('Preview functionality will be implemented');
}

function updateSpeciesOptions(orchidId) {
    // Implementation for updating species options based on genus selection
    console.log(`Updating species options for orchid ${orchidId}`);
}

// Initialize feather icons
feather.replace();
</script>
{% endblock %}