{% extends "base.html" %}

{% block title %}Upload Adaptation (BETA) - Video Master{% endblock %}

{% block extra_head %}
<style>
    .upload-zone {
        border: 3px dashed #ccc;
        border-radius: 8px;
        padding: 60px 20px;
        text-align: center;
        transition: all 0.3s;
        cursor: pointer;
    }

    .upload-zone:hover, .upload-zone.dragover {
        border-color: var(--hm-yellow);
        background-color: #fffef0;
    }

    .upload-icon {
        font-size: 4rem;
        color: var(--hm-yellow);
    }
</style>
{% endblock %}

{% block content %}
<div class="container mt-4">
    <h2><i class="bi bi-upload me-2"></i>Upload Adaptation Video <span class="badge bg-warning text-dark">BETA</span></h2>
    <p class="text-muted">Upload an adaptation video to find its matching master source</p>

    <div class="row mt-4">
        <div class="col-md-8 offset-md-2">
            <div class="upload-zone" id="uploadZone">
                <i class="bi bi-film upload-icon"></i>
                <h4 class="mt-3">Drag & Drop Adaptation Video Here</h4>
                <p class="text-muted">or click to browse</p>
                <p><small>Supported: MP4, MOV, AVI, MKV, WEBM (max 2 GB)</small></p>
                <input type="file" id="fileInput" style="display: none;"
                       accept=".mp4,.mov,.avi,.mkv,.webm">
            </div>

            <div id="uploadProgress" class="mt-4" style="display: none;">
                <div class="progress">
                    <div class="progress-bar progress-bar-striped progress-bar-animated"
                         id="uploadProgressBar" style="width: 0%"></div>
                </div>
                <p class="text-center mt-2" id="uploadStatus">Uploading...</p>
            </div>

            <div class="alert alert-info mt-4">
                <i class="bi bi-info-circle me-2"></i>
                <strong>Note:</strong> Video Master matching engine is in BETA. Upload functionality coming soon.
            </div>
        </div>
    </div>

    <div class="row mt-4">
        <div class="col-md-8 offset-md-2">
            <div class="card">
                <div class="card-header">
                    <i class="bi bi-gear me-2"></i>
                    Matching Configuration
                </div>
                <div class="card-body">
                    <div class="form-check form-switch mb-3">
                        <input class="form-check-input" type="checkbox" id="enableMetadataFilter" checked>
                        <label class="form-check-label" for="enableMetadataFilter">
                            <strong>Stage 0:</strong> Metadata filtering (filename parsing)
                        </label>
                        <small class="form-text text-muted d-block">Reduces search space by 80-95%</small>
                    </div>

                    <div class="form-check form-switch mb-3">
                        <input class="form-check-input" type="checkbox" id="enablePerceptualHash" checked>
                        <label class="form-check-label" for="enablePerceptualHash">
                            <strong>Tier 1:</strong> Perceptual hash matching
                        </label>
                        <small class="form-text text-muted d-block">Audio + video fingerprinting</small>
                    </div>

                    <div class="form-check form-switch mb-3">
                        <input class="form-check-input" type="checkbox" id="enableAkaze">
                        <label class="form-check-label" for="enableAkaze">
                            <strong>Tier 2:</strong> AKAZE feature verification (optional)
                        </label>
                        <small class="form-text text-muted d-block">Verifies top candidates with feature matching</small>
                    </div>

                    <div class="form-check form-switch mb-3">
                        <input class="form-check-input" type="checkbox" id="enableAiVision" checked>
                        <label class="form-check-label" for="enableAiVision">
                            <strong>Tier 3:</strong> AI Vision fallback (smart triggering)
                        </label>
                        <small class="form-text text-muted d-block">Semantic analysis for cross-aspect matches (~$0.005-0.007 per comparison)</small>
                    </div>

                    <hr>

                    <div class="mb-3">
                        <label for="confidenceThreshold" class="form-label">Confidence Threshold: <span id="thresholdValue">80</span>%</label>
                        <input type="range" class="form-range" id="confidenceThreshold" min="50" max="100" value="80" step="5">
                        <small class="form-text text-muted">Minimum confidence score for match results</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
    const uploadZone = document.getElementById('uploadZone');
    const fileInput = document.getElementById('fileInput');
    const uploadProgress = document.getElementById('uploadProgress');
    const uploadProgressBar = document.getElementById('uploadProgressBar');
    const uploadStatus = document.getElementById('uploadStatus');
    const thresholdSlider = document.getElementById('confidenceThreshold');
    const thresholdValue = document.getElementById('thresholdValue');

    uploadZone.addEventListener('click', () => fileInput.click());

    uploadZone.addEventListener('dragover', (e) => {
        e.preventDefault();
        uploadZone.classList.add('dragover');
    });

    uploadZone.addEventListener('dragleave', () => {
        uploadZone.classList.remove('dragover');
    });

    uploadZone.addEventListener('drop', (e) => {
        e.preventDefault();
        uploadZone.classList.remove('dragover');
        if (e.dataTransfer.files.length > 0) {
            handleFileUpload(e.dataTransfer.files[0]);
        }
    });

    fileInput.addEventListener('change', (e) => {
        if (e.target.files.length > 0) {
            handleFileUpload(e.target.files[0]);
        }
    });

    thresholdSlider.addEventListener('input', (e) => {
        thresholdValue.textContent = e.target.value;
    });

    async function handleFileUpload(file) {
        uploadProgress.style.display = 'block';
        uploadZone.style.display = 'none';

        // Show BETA message
        uploadProgressBar.style.width = '50%';
        uploadStatus.textContent = 'Video Master matching engine coming soon (BETA)';
        uploadProgressBar.classList.remove('progress-bar-animated');
        uploadProgressBar.classList.add('bg-warning');

        showNotification('Video Master matching functionality will be available soon', 'info');

        // Reset after 3 seconds
        setTimeout(() => {
            uploadProgress.style.display = 'none';
            uploadZone.style.display = 'block';
            uploadProgressBar.style.width = '0%';
            uploadProgressBar.classList.add('progress-bar-animated');
            uploadProgressBar.classList.remove('bg-warning');
        }, 3000);
    }
</script>
{% endblock %}