#!/usr/bin/env python3
"""
YouTube Video Downloader Backend
Works with the provided HTML frontend
"""

from flask import Flask, request, jsonify, send_file, render_template
from flask_cors import CORS
import requests
import os
import json
import uuid
import logging
from urllib.parse import quote, urlencode
from werkzeug.utils import secure_filename

# Configuration
app = Flask(__name__)
CORS(app)  # Enable CORS for frontend

# API Configuration
API_URL = "https://don.aalyan.za.com/api.php"
API_KEY = "demo_key_123"

# Setup logging
logging.basicConfig(level=logging.INFO)
logger = logging.getLogger(__name__)

# Create downloads directory
DOWNLOAD_DIR = "downloads"
os.makedirs(DOWNLOAD_DIR, exist_ok=True)

def get_video_info_from_api(youtube_url):
    """Fetch video information from API"""
    try:
        params = {
            'endpoint': 'video-info',
            'api_key': API_KEY,
            'url': youtube_url
        }
        
        logger.info(f"Fetching video info for: {youtube_url}")
        response = requests.get(API_URL, params=params, timeout=30)
        
        if response.status_code == 200:
            data = response.json()
            logger.info(f"API Response: {json.dumps(data, indent=2)[:500]}")
            return data
        else:
            logger.error(f"API Error: {response.status_code}")
            return None
            
    except Exception as e:
        logger.error(f"Error fetching video info: {str(e)}")
        return None

def download_video_from_api(youtube_url, quality, format_type='mp4'):
    """Download video using API"""
    try:
        params = {
            'endpoint': 'download',
            'api_key': API_KEY,
            'url': youtube_url,
            'quality': quality,
            'format': format_type
        }
        
        logger.info(f"Downloading video with params: {params}")
        
        # First, check if download works
        test_response = requests.get(API_URL, params=params, timeout=30, stream=True)
        
        if test_response.status_code == 200:
            # Generate unique filename
            filename = f"video_{uuid.uuid4().hex[:8]}.{format_type}"
            filepath = os.path.join(DOWNLOAD_DIR, filename)
            
            # Download file
            with open(filepath, 'wb') as f:
                for chunk in test_response.iter_content(chunk_size=8192):
                    if chunk:
                        f.write(chunk)
            
            logger.info(f"Video downloaded to: {filepath}")
            return {
                'success': True,
                'filepath': filepath,
                'filename': filename,
                'direct_url': f"{API_URL}?{urlencode(params)}"
            }
        else:
            logger.error(f"Download failed: {test_response.status_code}")
            return {
                'success': False,
                'error': f"API returned status {test_response.status_code}"
            }
            
    except Exception as e:
        logger.error(f"Download error: {str(e)}")
        return {
            'success': False,
            'error': str(e)
        }

# API Routes
@app.route('/')
def index():
    """Serve the HTML frontend"""
    return render_template('index.html')

@app.route('/api/video-info', methods=['GET'])
def video_info():
    """Get video information"""
    youtube_url = request.args.get('url')
    
    if not youtube_url:
        return jsonify({
            'success': False,
            'error': 'YouTube URL is required'
        }), 400
    
    # Validate YouTube URL
    if 'youtube.com' not in youtube_url and 'youtu.be' not in youtube_url:
        return jsonify({
            'success': False,
            'error': 'Invalid YouTube URL'
        }), 400
    
    # Fetch video info from API
    video_data = get_video_info_from_api(youtube_url)
    
    if video_data:
        # Process API response
        if 'videos' in video_data:
            # Extract available formats
            formats = []
            for video in video_data.get('videos', []):
                if isinstance(video, dict):
                    formats.append({
                        'quality': video.get('quality', 'Unknown'),
                        'size': video.get('size', 'N/A'),
                        'format': video.get('ext', 'mp4'),
                        'url': video.get('url', '')
                    })
            
            # Extract thumbnail (if available)
            thumbnail = ''
            if 'thumbnail' in video_data:
                thumbnail = video_data['thumbnail']
            elif 'thumb' in video_data:
                thumbnail = video_data['thumb']
            
            return jsonify({
                'success': True,
                'data': {
                    'title': video_data.get('title', 'YouTube Video'),
                    'thumbnail': thumbnail,
                    'duration': video_data.get('duration', 0),
                    'formats': formats,
                    'raw_data': video_data  # Include raw data for debugging
                }
            })
        else:
            return jsonify({
                'success': True,
                'data': {
                    'title': 'YouTube Video',
                    'thumbnail': '',
                    'duration': 0,
                    'formats': [],
                    'raw_data': video_data
                }
            })
    else:
        return jsonify({
            'success': False,
            'error': 'Could not fetch video information'
        }), 500

@app.route('/api/download', methods=['POST'])
def download_video():
    """Download video endpoint"""
    try:
        data = request.json
        youtube_url = data.get('url')
        format_type = data.get('format', 'mp4')
        quality = data.get('quality', '360')
        
        if not youtube_url:
            return jsonify({
                'success': False,
                'error': 'YouTube URL is required'
            }), 400
        
        # Download video
        result = download_video_from_api(youtube_url, quality, format_type)
        
        if result['success']:
            # Return download URL
            download_url = f"/api/download-file/{result['filename']}"
            
            return jsonify({
                'success': True,
                'data': {
                    'download_url': download_url,
                    'direct_url': result['direct_url'],
                    'filename': result['filename']
                }
            })
        else:
            return jsonify({
                'success': False,
                'error': result['error']
            }), 500
            
    except Exception as e:
        logger.error(f"Download endpoint error: {str(e)}")
        return jsonify({
            'success': False,
            'error': str(e)
        }), 500

@app.route('/api/download-file/<filename>', methods=['GET'])
def download_file(filename):
    """Serve downloaded file"""
    try:
        filepath = os.path.join(DOWNLOAD_DIR, secure_filename(filename))
        
        if not os.path.exists(filepath):
            return jsonify({
                'success': False,
                'error': 'File not found'
            }), 404
        
        # Determine MIME type
        ext = os.path.splitext(filename)[1].lower()
        mime_types = {
            '.mp4': 'video/mp4',
            '.mp3': 'audio/mpeg',
            '.webm': 'video/webm',
            '.mkv': 'video/x-matroska'
        }
        
        mimetype = mime_types.get(ext, 'application/octet-stream')
        
        return send_file(
            filepath,
            as_attachment=True,
            download_name=filename,
            mimetype=mimetype
        )
        
    except Exception as e:
        logger.error(f"File download error: {str(e)}")
        return jsonify({
            'success': False,
            'error': str(e)
        }), 500

@app.route('/api/formats', methods=['GET'])
def available_formats():
    """Get available formats for a video"""
    youtube_url = request.args.get('url')
    
    if not youtube_url:
        return jsonify({
            'success': False,
            'error': 'YouTube URL is required'
        }), 400
    
    # Get video info
    video_data = get_video_info_from_api(youtube_url)
    
    if video_data and 'videos' in video_data:
        formats = []
        
        # Video formats
        for video in video_data.get('videos', []):
            if isinstance(video, dict) and video.get('url'):
                formats.append({
                    'type': 'video',
                    'quality': video.get('quality', 'Unknown'),
                    'format': video.get('ext', 'mp4'),
                    'size': video.get('size', 'N/A'),
                    'code': f"mp4-{video.get('quality', '360').replace('p', '')}"
                })
        
        # Audio formats
        for audio in video_data.get('audios', []):
            if isinstance(audio, dict) and audio.get('url'):
                formats.append({
                    'type': 'audio',
                    'quality': audio.get('quality', 'MP3'),
                    'format': audio.get('ext', 'mp3'),
                    'size': audio.get('size', 'N/A'),
                    'code': f"mp3-{audio.get('quality', 'high').lower()}"
                })
        
        return jsonify({
            'success': True,
            'formats': formats
        })
    
    # Return default formats if API fails
    return jsonify({
        'success': True,
        'formats': [
            {'type': 'video', 'quality': '720p', 'format': 'mp4', 'size': 'HD', 'code': 'mp4-720'},
            {'type': 'video', 'quality': '480p', 'format': 'mp4', 'size': 'SD', 'code': 'mp4-480'},
            {'type': 'video', 'quality': '360p', 'format': 'mp4', 'size': 'Medium', 'code': 'mp4-360'},
            {'type': 'video', 'quality': '240p', 'format': 'mp4', 'size': 'Low', 'code': 'mp4-240'},
            {'type': 'audio', 'quality': 'High', 'format': 'mp3', 'size': '128kbps', 'code': 'mp3-high'},
            {'type': 'audio', 'quality': 'Medium', 'format': 'mp3', 'size': '64kbps', 'code': 'mp3-medium'}
        ]
    })

@app.route('/api/health', methods=['GET'])
def health_check():
    """Health check endpoint"""
    return jsonify({
        'status': 'healthy',
        'service': 'YouTube Downloader API',
        'api_available': True
    })

# Error handlers
@app.errorhandler(404)
def not_found(error):
    return jsonify({
        'success': False,
        'error': 'Endpoint not found'
    }), 404

@app.errorhandler(500)
def server_error(error):
    return jsonify({
        'success': False,
        'error': 'Internal server error'
    }), 500

if __name__ == '__main__':
    # Create templates directory
    os.makedirs('templates', exist_ok=True)
    
    # Save HTML to templates directory
    html_content = """
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YouTube Video Downloader</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        /* Your CSS styles here (same as provided) */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #e8f0fe 50%, #e0f7fa 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            padding-top: 40px;
        }

        .header {
            text-align: center;
            margin-bottom: 40px;
            animation: fadeInDown 0.6s ease;
        }

        .header h1 {
            font-size: 2.8rem;
            background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 10px;
            font-weight: 700;
        }

        .header p {
            color: #64748b;
            font-size: 1.05rem;
        }

        .rating {
            margin: 15px 0;
        }

        .stars {
            color: #fbbf24;
            font-size: 1.2rem;
            animation: starPulse 2s ease-in-out infinite;
        }

        .trust-text {
            color: #64748b;
            font-size: 0.95rem;
            margin-top: 8px;
        }

        .count {
            color: #7c3aed;
            font-weight: 600;
        }

        .main-card {
            background: white;
            border-radius: 24px;
            padding: 40px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
            animation: fadeInUp 0.6s ease;
        }

        .search-container {
            display: flex;
            gap: 12px;
            margin-bottom: 20px;
        }

        .url-input {
            flex: 1;
            padding: 16px 20px;
            border: 2px solid #e2e8f0;
            border-radius: 12px;
            font-size: 1rem;
            font-family: 'Inter', sans-serif;
            transition: all 0.3s ease;
        }

        .url-input:focus {
            outline: none;
            border-color: #7c3aed;
            box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.1);
        }

        .search-btn {
            padding: 16px 32px;
            background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .search-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(124, 58, 237, 0.3);
        }

        .search-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }

        .video-preview {
            margin-top: 30px;
            padding: 30px;
            background: linear-gradient(135deg, #f8fafc 0%, #e0f2fe 100%);
            border: 2px solid #e2e8f0;
            border-radius: 20px;
            display: none;
            animation: fadeInUp 0.6s ease;
        }

        .video-preview.active {
            display: block;
        }

        .video-preview-content {
            display: grid;
            grid-template-columns: 300px 1fr;
            gap: 25px;
            align-items: start;
        }

        .video-thumbnail {
            width: 100%;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .video-thumbnail img {
            width: 100%;
            height: auto;
            display: block;
        }

        .video-info {
            flex: 1;
        }

        .video-title {
            font-size: 1.3rem;
            font-weight: 600;
            color: #1e293b;
            margin-bottom: 15px;
            line-height: 1.4;
        }

        .quality-selector {
            margin-top: 20px;
        }

        .quality-label {
            font-size: 0.95rem;
            font-weight: 500;
            color: #64748b;
            margin-bottom: 10px;
            display: block;
        }

        .quality-dropdown {
            width: 100%;
            padding: 14px 18px;
            border: 2px solid #e2e8f0;
            border-radius: 12px;
            font-size: 1rem;
            font-family: 'Inter', sans-serif;
            background: white;
            color: #1e293b;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .quality-dropdown:focus {
            outline: none;
            border-color: #7c3aed;
            box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.1);
        }

        .download-btn {
            width: 100%;
            padding: 16px 32px;
            background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 1.05rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .download-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(124, 58, 237, 0.3);
        }

        .download-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }

        .progress-container {
            margin-top: 25px;
            display: none;
        }

        .progress-wrapper {
            position: relative;
        }

        .progress-bar {
            height: 14px;
            background: #e2e8f0;
            border-radius: 10px;
            overflow: hidden;
            position: relative;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #7c3aed 0%, #a855f7 100%);
            width: 0%;
            transition: width 0.4s ease;
            position: relative;
        }

        .progress-fill::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            animation: shimmer 1.5s infinite;
        }

        @keyframes shimmer {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }

        .progress-percentage {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 0.75rem;
            font-weight: 600;
            color: #1e293b;
            z-index: 1;
        }

        .status-text {
            text-align: center;
            margin-top: 12px;
            color: #64748b;
            font-size: 0.95rem;
        }

        .message {
            padding: 18px 24px;
            border-radius: 12px;
            margin-top: 20px;
            display: none;
            animation: slideIn 0.4s ease;
        }

        @keyframes slideIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .success-message {
            background: #d1fae5;
            color: #065f46;
            border: 2px solid #6ee7b7;
        }

        .error-message {
            background: #fee2e2;
            color: #991b1b;
            border: 2px solid #fca5a5;
        }

        .message i {
            margin-right: 8px;
        }

        .footer {
            text-align: center;
            margin-top: 40px;
            color: #64748b;
            font-size: 0.9rem;
        }

        .footer i {
            color: #ef4444;
            animation: heartbeat 1.5s ease-in-out infinite;
        }

        @keyframes fadeInDown {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes starPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }

        @keyframes heartbeat {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.2); }
        }

        @media (max-width: 768px) {
            .header h1 { font-size: 2.2rem; }
            .main-card { padding: 30px 20px; }
            .search-container { flex-direction: column; }
            .search-btn { width: 100%; }
            .video-preview-content { grid-template-columns: 1fr; }
        }

        .spinner {
            display: inline-block;
            width: 18px;
            height: 18px;
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-top-color: white;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- Header -->
        <div class="header">
            <h1>YouTube Video Downloader</h1>
            <p>Download YouTube videos effortlessly for offline viewing and ad-free access.</p>

            <div class="rating">
                <div class="stars">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                </div>
            </div>
            <p class="trust-text">Trusted by <span class="count">1,000,000</span> users</p>
        </div>

        <!-- Main Card -->
        <div class="main-card">
            <form id="searchForm">
                <!-- Search Box -->
                <div class="search-container">
                    <input type="text" id="url" class="url-input" placeholder="Paste a Youtube video URL here" required>
                    <button type="submit" class="search-btn" id="searchBtn">
                        <i class="fas fa-search"></i>
                        Search
                    </button>
                </div>

                <div style="text-align: center; color: #64748b; font-size: 0.9rem;">
                    If you want to convert YouTube to Video, you agree to the <a href="#" style="color: #7c3aed; text-decoration: none;">Usage Guidelines</a>.
                </div>

                <!-- Video Preview Section -->
                <div class="video-preview" id="videoPreview">
                    <div class="video-preview-content">
                        <div class="video-thumbnail">
                            <img id="videoThumbnail" src="" alt="Video Thumbnail" onerror="this.src='https://img.youtube.com/vi/dQw4w9WgXcQ/hqdefault.jpg'">
                        </div>
                        <div class="video-info">
                            <h3 class="video-title" id="videoTitle">Video Title</h3>

                            <div class="quality-selector">
                                <label class="quality-label">Select Quality & Format</label>
                                <select class="quality-dropdown" id="qualitySelect">
                                    <!-- Options will be populated dynamically -->
                                </select>
                            </div>

                            <!-- Download Button -->
                            <button type="button" class="download-btn" id="downloadBtn">
                                <i class="fas fa-download"></i>
                                Download
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Progress -->
                <div class="progress-container" id="progressContainer">
                    <div class="progress-wrapper">
                        <div class="progress-bar">
                            <div class="progress-fill" id="progressFill"></div>
                        </div>
                        <div class="progress-percentage" id="progressPercentage">0%</div>
                    </div>
                    <div class="status-text" id="statusText">Processing...</div>
                </div>

                <!-- Messages -->
                <div class="message success-message" id="successMessage">
                    <i class="fas fa-check-circle"></i>
                    Download completed successfully!
                </div>

                <div class="message error-message" id="errorMessage">
                    <i class="fas fa-exclamation-triangle"></i>
                    An error occurred. Please try again.
                </div>
            </form>
        </div>

        <!-- Footer -->
        <div class="footer">
            <p>Made with <i class="fas fa-heart"></i> | For personal use only</p>
        </div>
    </div>

    <script>
        // API Base URL
        const API_BASE_URL = window.location.origin;

        // DOM Elements
        const searchForm = document.getElementById('searchForm');
        const urlInput = document.getElementById('url');
        const searchBtn = document.getElementById('searchBtn');
        const videoPreview = document.getElementById('videoPreview');
        const videoThumbnail = document.getElementById('videoThumbnail');
        const videoTitle = document.getElementById('videoTitle');
        const qualitySelect = document.getElementById('qualitySelect');
        const downloadBtn = document.getElementById('downloadBtn');
        const progressContainer = document.getElementById('progressContainer');
        const progressFill = document.getElementById('progressFill');
        const progressPercentage = document.getElementById('progressPercentage');
        const statusText = document.getElementById('statusText');
        const successMessage = document.getElementById('successMessage');
        const errorMessage = document.getElementById('errorMessage');

        // Search Form Submission
        searchForm.addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const youtubeUrl = urlInput.value.trim();
            
            if (!youtubeUrl) {
                showError('Please enter a YouTube URL');
                return;
            }

            if (!isValidYouTubeUrl(youtubeUrl)) {
                showError('Please enter a valid YouTube URL');
                return;
            }

            await fetchVideoInfo(youtubeUrl);
        });

        // Download Button Click
        downloadBtn.addEventListener('click', async function() {
            const youtubeUrl = urlInput.value.trim();
            const selectedOption = qualitySelect.options[qualitySelect.selectedIndex];
            const qualityCode = selectedOption.value;
            
            if (!youtubeUrl) {
                showError('Please enter a YouTube URL first');
                return;
            }

            await startDownload(youtubeUrl, qualityCode);
        });

        // Helper Functions
        function isValidYouTubeUrl(url) {
            return url.includes('youtube.com') || url.includes('youtu.be');
        }

        function showLoading(button, text = 'Loading...') {
            button.disabled = true;
            button.innerHTML = `<span class="spinner"></span> ${text}`;
        }

        function hideLoading(button, originalText) {
            button.disabled = false;
            button.innerHTML = originalText;
        }

        function showError(message) {
            hideMessages();
            errorMessage.innerHTML = `<i class="fas fa-exclamation-triangle"></i> ${message}`;
            errorMessage.style.display = 'block';
            progressContainer.style.display = 'none';
        }

        function showSuccess(message) {
            hideMessages();
            successMessage.innerHTML = `<i class="fas fa-check-circle"></i> ${message}`;
            successMessage.style.display = 'block';
        }

        function hideMessages() {
            successMessage.style.display = 'none';
            errorMessage.style.display = 'none';
        }

        function updateProgress(percent, message) {
            progressFill.style.width = percent + '%';
            progressPercentage.textContent = percent + '%';
            statusText.textContent = message;
        }

        // Fetch video information
        async function fetchVideoInfo(youtubeUrl) {
            showLoading(searchBtn, 'Fetching...');
            hideMessages();
            videoPreview.classList.remove('active');
            
            try {
                const response = await fetch(`${API_BASE_URL}/api/video-info?url=${encodeURIComponent(youtubeUrl)}`);
                const data = await response.json();
                
                if (data.success) {
                    // Update UI with video info
                    if (data.data.thumbnail) {
                        videoThumbnail.src = data.data.thumbnail;
                    }
                    
                    videoTitle.textContent = data.data.title;
                    
                    // Fetch available formats
                    await loadAvailableFormats(youtubeUrl);
                    
                    // Show video preview
                    videoPreview.classList.add('active');
                    progressContainer.style.display = 'none';
                    
                    showSuccess('Video information loaded successfully!');
                } else {
                    showError(data.error || 'Failed to fetch video information');
                }
            } catch (error) {
                showError('Network error: ' + error.message);
            } finally {
                hideLoading(searchBtn, '<i class="fas fa-search"></i> Search');
            }
        }

        // Load available formats
        async function loadAvailableFormats(youtubeUrl) {
            try {
                const response = await fetch(`${API_BASE_URL}/api/formats?url=${encodeURIComponent(youtubeUrl)}`);
                const data = await response.json();
                
                // Clear existing options
                qualitySelect.innerHTML = '';
                
                if (data.success && data.formats.length > 0) {
                    // Add format options
                    data.formats.forEach(format => {
                        const option = document.createElement('option');
                        option.value = format.code;
                        option.textContent = `${format.type === 'video' ? 'Video' : 'Audio'} ${format.format.toUpperCase()} - ${format.quality} (${format.size})`;
                        qualitySelect.appendChild(option);
                    });
                } else {
                    // Add default options
                    const defaultFormats = [
                        {code: 'mp4-720', text: 'Video MP4 - 720p (HD)'},
                        {code: 'mp4-480', text: 'Video MP4 - 480p'},
                        {code: 'mp4-360', text: 'Video MP4 - 360p'},
                        {code: 'mp4-240', text: 'Video MP4 - 240p'},
                        {code: 'mp3-high', text: 'Audio MP3 - High Quality'},
                        {code: 'mp3-medium', text: 'Audio MP3 - Medium Quality'}
                    ];
                    
                    defaultFormats.forEach(format => {
                        const option = document.createElement('option');
                        option.value = format.code;
                        option.textContent = format.text;
                        qualitySelect.appendChild(option);
                    });
                }
            } catch (error) {
                console.error('Error loading formats:', error);
            }
        }

        // Start download
        async function startDownload(youtubeUrl, qualityCode) {
            showLoading(downloadBtn, 'Downloading...');
            hideMessages();
            progressContainer.style.display = 'block';
            videoPreview.classList.remove('active');
            
            // Parse quality code
            const [format, resolution] = qualityCode.split('-');
            
            // Simulate progress
            let progress = 0;
            updateProgress(0, 'Initializing download...');
            
            const progressInterval = setInterval(() => {
                progress += Math.random() * 15;
                if (progress > 95) progress = 95;
                
                let statusMsg = 'Downloading...';
                if (progress < 20) statusMsg = 'Connecting to server...';
                else if (progress < 40) statusMsg = 'Fetching video data...';
                else if (progress < 70) statusMsg = 'Downloading video...';
                else if (progress < 95) statusMsg = 'Almost done...';
                
                updateProgress(Math.floor(progress), statusMsg);
            }, 500);
            
            try {
                // Send download request
                const response = await fetch(`${API_BASE_URL}/api/download`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        url: youtubeUrl,
                        format: format,
                        quality: resolution
                    })
                });
                
                clearInterval(progressInterval);
                
                const data = await response.json();
                
                if (data.success) {
                    updateProgress(100, 'Download Complete!');
                    
                    setTimeout(() => {
                        // Trigger download
                        if (data.data.download_url) {
                            window.open(API_BASE_URL + data.data.download_url, '_blank');
                        } else if (data.data.direct_url) {
                            window.open(data.data.direct_url, '_blank');
                        }
                        
                        showSuccess('Download started! Check your browser downloads.');
                        progressContainer.style.display = 'none';
                        videoPreview.classList.add('active');
                    }, 1000);
                } else {
                    showError(data.error || 'Download failed');
                    videoPreview.classList.add('active');
                }
            } catch (error) {
                clearInterval(progressInterval);
                showError('Network error: ' + error.message);
                videoPreview.classList.add('active');
            } finally {
                hideLoading(downloadBtn, '<i class="fas fa-download"></i> Download');
            }
        }

        // Initialize
        console.log('YouTube Downloader initialized');
        console.log('API Base URL:', API_BASE_URL);
    </script>
</body>
</html>
"""
    
    with open('templates/index.html', 'w', encoding='utf-8') as f:
        f.write(html_content)
    
    print("="*60)
    print("🤖 YouTube Video Downloader Backend")
    print("="*60)
    print(f"📁 Downloads directory: {DOWNLOAD_DIR}")
    print(f"🌐 API Base URL: http://localhost:5000")
    print(f"📱 Frontend: http://localhost:5000/")
    print(f"🔧 Health Check: http://localhost:5000/api/health")
    print("="*60)
    print("\n🚀 Starting server...")
    
    # Run Flask app
    app.run(host='0.0.0.0', port=5000, debug=True)