{% extends "base.html" %}
{% set title = "AI Orchid Identification" %}

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

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

.upload-zone {
    border: 2px dashed #00d4aa;
    border-radius: 15px;
    padding: 3rem;
    text-align: center;
    background: rgba(0, 212, 170, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
}

.upload-zone:hover {
    background: rgba(0, 212, 170, 0.2);
    transform: translateY(-2px);
}

.upload-zone.dragover {
    background: rgba(0, 212, 170, 0.3);
    border-color: #00a085;
}

.identification-results {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 15px;
    padding: 2rem;
    margin-top: 2rem;
    display: none;
}

.confidence-bar {
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 0.5rem;
}

.confidence-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff6b6b 0%, #feca57 50%, #48ca43 100%);
    border-radius: 10px;
    transition: width 0.5s ease;
}

.characteristic-item {
    background: rgba(255, 255, 255, 0.05);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.alternative-match {
    background: rgba(255, 193, 7, 0.1);
    border-left: 4px solid #ffc107;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 0 8px 8px 0;
}

.database-match {
    background: rgba(40, 167, 69, 0.1);
    border-left: 4px solid #28a745;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 0 8px 8px 0;
}

.ai-logo {
    color: #00d4aa;
    font-size: 3rem;
    text-shadow: 0 0 30px rgba(0, 212, 170, 0.5);
}

.preview-image {
    max-width: 100%;
    max-height: 400px;
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.loading-spinner {
    display: none;
    text-align: center;
    padding: 2rem;
}

.spinner {
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top: 4px solid #00d4aa;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.care-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.care-item {
    background: rgba(255, 255, 255, 0.05);
    padding: 1rem;
    border-radius: 8px;
}

.feature-highlight {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 2rem;
    border-radius: 15px;
    text-align: center;
    margin-bottom: 2rem;
}
</style>
{% endblock %}

{% block content %}
<div class="identify-container">
    <div class="container py-5">
        <!-- Header -->
        <div class="text-center mb-5">
            <div class="ai-logo mb-3">🤖</div>
            <h1 class="display-4 mb-3"><strong>AI Orchid Identification</strong></h1>
            <p class="lead text-muted">Upload an orchid photo for expert-level identification powered by artificial intelligence</p>
        </div>

        <!-- Feature Highlight -->
        <div class="feature-highlight mb-5">
            <h3 class="mb-3">🌟 Revolutionary Orchid Intelligence</h3>
            <p class="mb-0">The world's first AI system trained with botanical expertise to identify orchids like a professional taxonomist. Powered by 35,000+ GBIF specimens and decades of orchid knowledge.</p>
        </div>

        <!-- Upload Section -->
        <div class="row justify-content-center">
            <div class="col-md-10">
                <div class="identify-card">
                    <h3 class="mb-4"><i data-feather="camera"></i> Upload Orchid Photo</h3>
                    
                    <!-- Upload Zone -->
                    <div class="upload-zone" id="uploadZone" onclick="document.getElementById('fileInput').click()">
                        <i data-feather="upload-cloud" style="width: 64px; height: 64px; color: #00d4aa;"></i>
                        <h4 class="mt-3 mb-2">Drop your orchid photo here</h4>
                        <p class="text-muted mb-3">or click to browse files</p>
                        <p class="small text-muted">Supports JPG, PNG, WebP • Max 10MB</p>
                    </div>

                    <input type="file" id="fileInput" accept="image/*" style="display: none;">
                    
                    <!-- Image Preview -->
                    <div id="imagePreview" class="text-center mt-4" style="display: none;">
                        <img id="previewImg" class="preview-image" alt="Orchid preview">
                        <div class="mt-3">
                            <button class="btn btn-primary btn-lg" onclick="identifyOrchid()">
                                <i data-feather="zap"></i> Identify This Orchid
                            </button>
                            <button class="btn btn-outline-light ml-3" onclick="clearUpload()">
                                <i data-feather="x"></i> Clear
                            </button>
                        </div>
                    </div>
                    
                    <!-- Loading -->
                    <div class="loading-spinner" id="loadingSpinner">
                        <div class="spinner"></div>
                        <h5>🔬 Analyzing orchid characteristics...</h5>
                        <p class="text-muted">Our AI expert is examining flower structure, growth habits, and botanical features</p>
                    </div>
                    
                    <!-- Results Section -->
                    <div class="identification-results" id="resultsSection">
                        <h3 class="mb-4"><i data-feather="search"></i> Identification Results</h3>
                        
                        <!-- Primary Identification -->
                        <div class="mb-4">
                            <h4 class="text-success">🏆 Primary Identification</h4>
                            <div id="primaryResult">
                                <!-- Results will be populated here -->
                            </div>
                        </div>
                        
                        <!-- Confidence Score -->
                        <div class="mb-4">
                            <h5>📊 Confidence Score</h5>
                            <div class="d-flex justify-content-between">
                                <span>Identification Confidence</span>
                                <span id="confidenceText">0%</span>
                            </div>
                            <div class="confidence-bar">
                                <div class="confidence-fill" id="confidenceFill" style="width: 0%"></div>
                            </div>
                        </div>
                        
                        <!-- Botanical Characteristics -->
                        <div class="mb-4">
                            <h5>🌿 Botanical Characteristics</h5>
                            <div id="characteristicsGrid">
                                <!-- Characteristics will be populated here -->
                            </div>
                        </div>
                        
                        <!-- Growing Information -->
                        <div class="mb-4">
                            <h5>🌱 Growing Information</h5>
                            <div class="care-grid" id="careGrid">
                                <!-- Care information will be populated here -->
                            </div>
                        </div>
                        
                        <!-- Alternative Possibilities -->
                        <div class="mb-4">
                            <h5>🤔 Alternative Possibilities</h5>
                            <div id="alternativeResults">
                                <!-- Alternative matches will be populated here -->
                            </div>
                        </div>
                        
                        <!-- Database Matches -->
                        <div class="mb-4">
                            <h5>🔗 Database Matches</h5>
                            <div id="databaseMatches">
                                <!-- Database matches will be populated here -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- How It Works -->
        <div class="row mt-5">
            <div class="col-md-4">
                <div class="identify-card text-center">
                    <i data-feather="eye" style="width: 48px; height: 48px; color: #00d4aa;"></i>
                    <h5 class="mt-3">AI Vision Analysis</h5>
                    <p class="text-muted">Advanced computer vision examines flower structure, leaves, pseudobulbs, and growth patterns</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="identify-card text-center">
                    <i data-feather="database" style="width: 48px; height: 48px; color: #00d4aa;"></i>
                    <h5 class="mt-3">Expert Knowledge</h5>
                    <p class="text-muted">Trained on 35,000+ GBIF specimens and decades of professional orchid expertise</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="identify-card text-center">
                    <i data-feather="award" style="width: 48px; height: 48px; color: #00d4aa;"></i>
                    <h5 class="mt-3">Professional Results</h5>
                    <p class="text-muted">Get identification accuracy comparable to orchid judges and botanical experts</p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
let currentImageFile = null;

// File upload handling
document.getElementById('fileInput').addEventListener('change', handleFileSelect);

// Drag and drop handling
const uploadZone = document.getElementById('uploadZone');
uploadZone.addEventListener('dragover', handleDragOver);
uploadZone.addEventListener('dragleave', handleDragLeave);
uploadZone.addEventListener('drop', handleDrop);

function handleFileSelect(event) {
    const file = event.target.files[0];
    if (file) {
        previewImage(file);
    }
}

function handleDragOver(event) {
    event.preventDefault();
    uploadZone.classList.add('dragover');
}

function handleDragLeave() {
    uploadZone.classList.remove('dragover');
}

function handleDrop(event) {
    event.preventDefault();
    uploadZone.classList.remove('dragover');
    
    const files = event.dataTransfer.files;
    if (files.length > 0) {
        previewImage(files[0]);
    }
}

function previewImage(file) {
    // Validate file type
    if (!file.type.startsWith('image/')) {
        alert('Please upload an image file (JPG, PNG, WebP)');
        return;
    }
    
    // Validate file size (10MB limit)
    if (file.size > 10 * 1024 * 1024) {
        alert('Image size must be less than 10MB');
        return;
    }
    
    currentImageFile = file;
    
    const reader = new FileReader();
    reader.onload = function(e) {
        document.getElementById('previewImg').src = e.target.result;
        document.getElementById('imagePreview').style.display = 'block';
        document.getElementById('resultsSection').style.display = 'none';
    };
    reader.readAsDataURL(file);
}

function clearUpload() {
    currentImageFile = null;
    document.getElementById('fileInput').value = '';
    document.getElementById('imagePreview').style.display = 'none';
    document.getElementById('resultsSection').style.display = 'none';
    document.getElementById('loadingSpinner').style.display = 'none';
}

async function identifyOrchid() {
    if (!currentImageFile) {
        alert('Please select an image first');
        return;
    }
    
    // Show loading
    document.getElementById('loadingSpinner').style.display = 'block';
    document.getElementById('resultsSection').style.display = 'none';
    
    try {
        // Create FormData for file upload
        const formData = new FormData();
        formData.append('orchid_image', currentImageFile);
        
        // Send to AI identification endpoint
        const response = await fetch('/ai/identify-orchid', {
            method: 'POST',
            body: formData
        });
        
        const result = await response.json();
        
        // Hide loading
        document.getElementById('loadingSpinner').style.display = 'none';
        
        if (result.success) {
            displayResults(result);
        } else {
            alert('Identification failed: ' + (result.error || 'Unknown error'));
        }
        
    } catch (error) {
        document.getElementById('loadingSpinner').style.display = 'none';
        alert('Network error: ' + error.message);
    }
}

function displayResults(result) {
    const ai = result.ai_identification;
    const primary = ai.primary_identification;
    
    // Primary identification
    document.getElementById('primaryResult').innerHTML = `
        <h3 class="text-success">${primary.full_name || (primary.genus + ' ' + primary.species)}</h3>
        <p class="text-muted">${primary.variety_cultivar || ''}</p>
    `;
    
    // Confidence score
    const confidence = primary.confidence || 0;
    document.getElementById('confidenceText').textContent = confidence + '%';
    document.getElementById('confidenceFill').style.width = confidence + '%';
    
    // Botanical characteristics
    if (ai.botanical_characteristics) {
        const chars = ai.botanical_characteristics;
        document.getElementById('characteristicsGrid').innerHTML = `
            <div class="characteristic-item">
                <strong>Growth Habit:</strong> ${chars.growth_habit || 'Not specified'}
            </div>
            <div class="characteristic-item">
                <strong>Pseudobulb Type:</strong> ${chars.pseudobulb_type || 'Not specified'}
            </div>
            <div class="characteristic-item">
                <strong>Leaf Form:</strong> ${chars.leaf_form || 'Not specified'}
            </div>
            <div class="characteristic-item">
                <strong>Key Features:</strong> ${chars.key_features ? chars.key_features.join(', ') : 'Not specified'}
            </div>
        `;
    }
    
    // Growing information
    if (ai.growing_conditions) {
        const grow = ai.growing_conditions;
        document.getElementById('careGrid').innerHTML = `
            <div class="care-item">
                <h6>🌡️ Temperature</h6>
                <p>${grow.temperature || 'Not specified'}</p>
            </div>
            <div class="care-item">
                <h6>💡 Light</h6>
                <p>${grow.light || 'Not specified'}</p>
            </div>
            <div class="care-item">
                <h6>💧 Humidity</h6>
                <p>${grow.humidity || 'Not specified'}</p>
            </div>
            <div class="care-item">
                <h6>📈 Difficulty</h6>
                <p>${grow.difficulty || 'Not specified'}</p>
            </div>
        `;
    }
    
    // Alternative possibilities
    if (ai.alternative_possibilities && ai.alternative_possibilities.length > 0) {
        let altHtml = '';
        ai.alternative_possibilities.forEach(alt => {
            altHtml += `
                <div class="alternative-match">
                    <strong>${alt.name}</strong> (${alt.confidence}% confidence)
                    <br><small class="text-muted">${alt.reason}</small>
                </div>
            `;
        });
        document.getElementById('alternativeResults').innerHTML = altHtml;
    } else {
        document.getElementById('alternativeResults').innerHTML = '<p class="text-muted">No alternative matches found</p>';
    }
    
    // Database matches
    if (result.database_matches && result.database_matches.length > 0) {
        let dbHtml = '';
        result.database_matches.forEach(match => {
            dbHtml += `
                <div class="database-match">
                    <strong>${match.scientific_name}</strong>
                    <br><small class="text-muted">${match.region} • Source: ${match.ingestion_source}</small>
                </div>
            `;
        });
        document.getElementById('databaseMatches').innerHTML = dbHtml;
    } else {
        document.getElementById('databaseMatches').innerHTML = '<p class="text-muted">No database matches found</p>';
    }
    
    // Show results
    document.getElementById('resultsSection').style.display = 'block';
}

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