{% extends "layout.html" %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="card shadow">
            <div class="card-header bg-dark">
                <h2 class="text-center mb-0">
                    <i class="fas fa-rocket text-info me-2"></i>
                    Render.com Deployment Optimizer
                </h2>
            </div>
            <div class="card-body">
                <p class="lead text-center mb-4">
                    Upload your project to analyze, optimize, and prepare it for seamless deployment on Render.com.
                </p>
                
                <div class="card mb-4 bg-light">
                    <div class="card-body">
                        <h4 class="card-title">
                            <i class="fas fa-check-circle text-success me-2"></i>
                            What this tool does:
                        </h4>
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item bg-transparent">
                                <i class="fas fa-search me-2"></i>
                                Analyzes up to 1000 project files to detect technologies
                            </li>
                            <li class="list-group-item bg-transparent">
                                <i class="fas fa-wrench me-2"></i>
                                Optimizes configurations and fixes common issues
                            </li>
                            <li class="list-group-item bg-transparent">
                                <i class="fas fa-file-code me-2"></i>
                                Generates missing deployment files (render.yaml, Dockerfile, etc.)
                            </li>
                            <li class="list-group-item bg-transparent">
                                <i class="fas fa-download me-2"></i>
                                Outputs a deployment-ready project for Render.com
                            </li>
                        </ul>
                    </div>
                </div>
                
                <form action="{{ url_for('upload_file') }}" method="post" enctype="multipart/form-data" id="upload-form">
                    <div class="mb-4">
                        <label for="project_file" class="form-label">
                            <i class="fas fa-upload me-2"></i>
                            Upload your project archive:
                        </label>
                        <input class="form-control form-control-lg" type="file" id="project_file" name="project_file" accept=".zip,.tar,.gz,.tgz" required>
                        <div class="form-text">
                            <i class="fas fa-info-circle me-1"></i>
                            Accepted formats: .zip, .tar, .gz, .tgz (max 100MB)
                        </div>
                    </div>
                    
                    <div class="d-grid">
                        <button type="submit" class="btn btn-primary btn-lg" id="analyze-btn">
                            <i class="fas fa-cogs me-2"></i>
                            Analyze Project
                        </button>
                    </div>
                </form>
            </div>
        </div>
        
        <div class="card shadow mt-4">
            <div class="card-header bg-dark">
                <h3 class="mb-0">
                    <i class="fas fa-question-circle text-info me-2"></i>
                    How It Works
                </h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3 text-center mb-3 mb-md-0">
                        <div class="bg-dark rounded-circle mx-auto d-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
                            <i class="fas fa-upload fa-2x text-info"></i>
                        </div>
                        <h5 class="mt-2">Upload</h5>
                        <p class="small">Submit your project archive</p>
                    </div>
                    <div class="col-md-3 text-center mb-3 mb-md-0">
                        <div class="bg-dark rounded-circle mx-auto d-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
                            <i class="fas fa-search fa-2x text-info"></i>
                        </div>
                        <h5 class="mt-2">Analyze</h5>
                        <p class="small">Detect technologies & issues</p>
                    </div>
                    <div class="col-md-3 text-center mb-3 mb-md-0">
                        <div class="bg-dark rounded-circle mx-auto d-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
                            <i class="fas fa-magic fa-2x text-info"></i>
                        </div>
                        <h5 class="mt-2">Optimize</h5>
                        <p class="small">Apply optimizations & fixes</p>
                    </div>
                    <div class="col-md-3 text-center">
                        <div class="bg-dark rounded-circle mx-auto d-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
                            <i class="fas fa-download fa-2x text-info"></i>
                        </div>
                        <h5 class="mt-2">Deploy</h5>
                        <p class="small">Get Render.com-ready code</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Loading Overlay (initially hidden) -->
<div id="loading-overlay" class="position-fixed top-0 start-0 w-100 h-100 d-none" style="background-color: rgba(0,0,0,0.7); z-index: 9999;">
    <div class="position-absolute top-50 start-50 translate-middle text-center text-white">
        <div class="spinner-border text-info mb-3" role="status" style="width: 3rem; height: 3rem;">
            <span class="visually-hidden">Loading...</span>
        </div>
        <h4 id="loading-message">Analyzing your project...</h4>
        <div class="progress mt-3" style="height: 10px; width: 250px;">
            <div id="loading-progress" class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar" style="width: 0%"></div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    document.getElementById('upload-form').addEventListener('submit', function() {
        const fileInput = document.getElementById('project_file');
        if (fileInput.files.length > 0) {
            const loadingOverlay = document.getElementById('loading-overlay');
            loadingOverlay.classList.remove('d-none');
            
            // Simulate progress
            let progress = 0;
            const progressBar = document.getElementById('loading-progress');
            const loadingMessage = document.getElementById('loading-message');
            
            const interval = setInterval(function() {
                progress += Math.random() * 5;
                if (progress > 90) {
                    clearInterval(interval);
                    progress = 90; // Cap at 90% until actual completion
                }
                progressBar.style.width = progress + '%';
                
                // Update loading message based on progress
                if (progress < 30) {
                    loadingMessage.textContent = "Analyzing your project...";
                } else if (progress < 60) {
                    loadingMessage.textContent = "Detecting technologies...";
                } else {
                    loadingMessage.textContent = "Preparing optimization report...";
                }
            }, 300);
        }
    });
</script>
{% endblock %}