{% extends "layout.html" %}
{% set page_title = "Media Migration - Admin" %}

{% 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">
                <h1 class="h3 text-light">
                    <i data-feather="download-cloud" class="me-2"></i>
                    Media Migration System
                </h1>
                <a href="{{ url_for('admin_dashboard') }}" class="btn btn-outline-secondary">
                    <i data-feather="arrow-left" class="me-1"></i>Back to Admin
                </a>
            </div>
            <p class="text-muted">Import videos, newsletters, and pictures from your old website</p>
        </div>
    </div>

    <!-- Website Analysis -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card bg-dark text-light">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i data-feather="search" class="me-2"></i>Step 1: Analyze Old Website
                    </h5>
                </div>
                <div class="card-body">
                    <form id="websiteAnalysisForm" onsubmit="analyzeWebsite(event)">
                        <div class="row g-3">
                            <div class="col-md-8">
                                <label for="websiteUrl" class="form-label">Old Website URL</label>
                                <input type="url" class="form-control form-control-lg" 
                                       id="websiteUrl" name="website_url" 
                                       placeholder="https://your-old-orchid-website.com"
                                       required>
                                <div class="form-text">Enter your old website URL to scan for media content</div>
                            </div>
                            <div class="col-md-4 d-flex align-items-end">
                                <button type="submit" class="btn btn-primary btn-lg w-100">
                                    <i data-feather="search" class="me-2"></i>Analyze Website
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Analysis Results -->
    <div id="analysisResults" class="row mb-4" style="display: none;">
        <div class="col-12">
            <div class="card bg-dark text-light">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i data-feather="pie-chart" class="me-2"></i>Website Analysis Results
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row g-4">
                        <!-- Images Found -->
                        <div class="col-md-4">
                            <div class="card bg-primary text-white">
                                <div class="card-body text-center">
                                    <i data-feather="image" style="width: 48px; height: 48px; opacity: 0.8;"></i>
                                    <h3 class="mt-2" id="imagesCount">0</h3>
                                    <p class="mb-0">Images Found</p>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Videos Found -->
                        <div class="col-md-4">
                            <div class="card bg-success text-white">
                                <div class="card-body text-center">
                                    <i data-feather="video" style="width: 48px; height: 48px; opacity: 0.8;"></i>
                                    <h3 class="mt-2" id="videosCount">0</h3>
                                    <p class="mb-0">Videos Found</p>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Documents Found -->
                        <div class="col-md-4">
                            <div class="card bg-warning text-white">
                                <div class="card-body text-center">
                                    <i data-feather="file-text" style="width: 48px; height: 48px; opacity: 0.8;"></i>
                                    <h3 class="mt-2" id="documentsCount">0</h3>
                                    <p class="mb-0">Newsletters Found</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Migration Options -->
                    <div class="mt-4">
                        <h6 class="text-success">Migration Options:</h6>
                        <div class="row g-3">
                            <div class="col-md-4">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="migrateImages" checked>
                                    <label class="form-check-label" for="migrateImages">
                                        <strong>Import Images</strong><br>
                                        <small class="text-muted">AI will analyze for orchid content</small>
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="migrateVideos" checked>
                                    <label class="form-check-label" for="migrateVideos">
                                        <strong>Import Videos</strong><br>
                                        <small class="text-muted">Create embedded video gallery</small>
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="migrateNewsletters" checked>
                                    <label class="form-check-label" for="migrateNewsletters">
                                        <strong>Import Newsletters</strong><br>
                                        <small class="text-muted">Create searchable archive</small>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Start Migration Button -->
                    <div class="mt-4 text-center">
                        <button class="btn btn-success btn-lg" onclick="startMigration()">
                            <i data-feather="download" class="me-2"></i>Start Migration
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Migration Progress -->
    <div id="migrationProgress" class="row mb-4" style="display: none;">
        <div class="col-12">
            <div class="card bg-dark text-light">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i data-feather="activity" class="me-2"></i>Migration Progress
                    </h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <div class="d-flex justify-content-between">
                            <span>Overall Progress</span>
                            <span id="progressText">0%</span>
                        </div>
                        <div class="progress" style="height: 10px;">
                            <div id="progressBar" class="progress-bar bg-success" role="progressbar" style="width: 0%"></div>
                        </div>
                    </div>
                    
                    <div id="progressDetails">
                        <!-- Progress details will be inserted here -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Migration Results -->
    <div id="migrationResults" class="row" style="display: none;">
        <div class="col-12">
            <div class="card bg-dark text-light">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i data-feather="check-circle" class="me-2"></i>Migration Complete
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row g-4">
                        <div class="col-md-4">
                            <div class="text-center">
                                <h4 class="text-success" id="totalSuccess">0</h4>
                                <p class="mb-0">Items Migrated</p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="text-center">
                                <h4 class="text-warning" id="totalErrors">0</h4>
                                <p class="mb-0">Errors</p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="text-center">
                                <h4 class="text-info" id="orchidsIdentified">0</h4>
                                <p class="mb-0">Orchids Identified</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mt-4">
                        <h6>What's Next:</h6>
                        <ul class="text-light">
                            <li>Review imported orchid images in the <a href="/gallery" class="text-primary">Gallery</a></li>
                            <li>Check video content in the new Media section</li>
                            <li>Browse archived newsletters with full-text search</li>
                            <li>Verify AI-identified orchids and update metadata as needed</li>
                        </ul>
                    </div>
                    
                    <div class="mt-4 text-center">
                        <a href="/gallery" class="btn btn-primary me-2">
                            <i data-feather="grid" class="me-1"></i>View Gallery
                        </a>
                        <a href="/admin/dashboard" class="btn btn-outline-light">
                            <i data-feather="home" class="me-1"></i>Back to Admin
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
let analysisData = null;

async function analyzeWebsite(event) {
    event.preventDefault();
    
    const button = event.target.querySelector('button[type="submit"]');
    const originalHTML = button.innerHTML;
    button.innerHTML = '<i data-feather="loader" class="me-2"></i>Analyzing...';
    button.disabled = true;
    
    try {
        const formData = new FormData(event.target);
        const response = await fetch('/admin/migration/analyze', {
            method: 'POST',
            body: formData
        });
        
        const result = await response.json();
        
        if (result.success) {
            analysisData = result;
            displayAnalysisResults(result.media_inventory);
        } else {
            alert('Error analyzing website: ' + result.error);
        }
        
    } catch (error) {
        alert('Network error: ' + error.message);
    } finally {
        button.innerHTML = originalHTML;
        button.disabled = false;
        feather.replace();
    }
}

function displayAnalysisResults(inventory) {
    document.getElementById('imagesCount').textContent = inventory.images.length;
    document.getElementById('videosCount').textContent = inventory.videos.length;
    document.getElementById('documentsCount').textContent = inventory.newsletters.length;
    
    document.getElementById('analysisResults').style.display = 'block';
    
    // Scroll to results
    document.getElementById('analysisResults').scrollIntoView({ behavior: 'smooth' });
}

async function startMigration() {
    if (!analysisData) {
        alert('Please analyze the website first');
        return;
    }
    
    const migrateImages = document.getElementById('migrateImages').checked;
    const migrateVideos = document.getElementById('migrateVideos').checked;
    const migrateNewsletters = document.getElementById('migrateNewsletters').checked;
    
    if (!migrateImages && !migrateVideos && !migrateNewsletters) {
        alert('Please select at least one migration option');
        return;
    }
    
    document.getElementById('migrationProgress').style.display = 'block';
    document.getElementById('migrationProgress').scrollIntoView({ behavior: 'smooth' });
    
    const migrationData = {
        base_url: analysisData.base_url,
        migrate_images: migrateImages,
        migrate_videos: migrateVideos,
        migrate_newsletters: migrateNewsletters,
        images: migrateImages ? analysisData.media_inventory.images : [],
        videos: migrateVideos ? analysisData.media_inventory.videos : [],
        newsletters: migrateNewsletters ? analysisData.media_inventory.newsletters : []
    };
    
    try {
        const response = await fetch('/admin/migration/migrate', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(migrationData)
        });
        
        const result = await response.json();
        
        if (result.success) {
            displayMigrationResults(result);
        } else {
            alert('Migration error: ' + result.error);
        }
        
    } catch (error) {
        alert('Network error: ' + error.message);
    }
}

function displayMigrationResults(result) {
    document.getElementById('migrationProgress').style.display = 'none';
    
    document.getElementById('totalSuccess').textContent = result.total_migrated;
    document.getElementById('totalErrors').textContent = result.total_errors;
    
    // Count orchids identified from images
    const orchidsIdentified = result.results.images.details.filter(item => item.orchid_id).length;
    document.getElementById('orchidsIdentified').textContent = orchidsIdentified;
    
    document.getElementById('migrationResults').style.display = 'block';
    document.getElementById('migrationResults').scrollIntoView({ behavior: 'smooth' });
}

// Update progress (placeholder for real-time updates)
function updateProgress(percent, text) {
    document.getElementById('progressBar').style.width = percent + '%';
    document.getElementById('progressText').textContent = percent + '%';
}
</script>
{% endblock %}