{% extends "base.html" %}

{% block title %}Home - {{ title }}{% endblock %}

{% block content %}
<div class="row">
    <div class="col-lg-8 offset-lg-2">
        <div class="card mb-4">
            <div class="card-body">
                <h1 class="card-title mb-4">
                    <i class="bi bi-cpu"></i> Protocol Analysis
                </h1>
                <p class="lead">
                    Upload signal capture files for automated protocol reverse engineering.
                    Supports VCD, WAV, PCAP, and other formats.
                </p>
            </div>
        </div>

        <!-- File Upload -->
        <div class="card">
            <div class="card-body">
                <h5 class="card-title mb-4">Upload Capture File</h5>

                <form id="uploadForm" enctype="multipart/form-data">
                    <!-- Dropzone -->
                    <div class="dropzone mb-4" id="dropzone">
                        <i class="bi bi-cloud-upload" style="font-size: 3rem; opacity: 0.5;"></i>
                        <h5 class="mt-3">Drag & Drop File Here</h5>
                        <p class="text-muted">or click to browse</p>
                        <p class="text-muted small">Maximum file size: {{ max_file_size_mb }} MB</p>
                        <input type="file" id="fileInput" name="file" class="d-none" accept=".vcd,.wav,.pcap,.pcapng,.csv,.bin">
                    </div>

                    <div id="fileInfo" class="mb-3 d-none">
                        <div class="alert alert-info">
                            <i class="bi bi-file-earmark"></i>
                            <strong>Selected:</strong> <span id="fileName"></span>
                            (<span id="fileSize"></span>)
                        </div>
                    </div>

                    <!-- Analysis Options -->
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="protocolHint" class="form-label">
                                <i class="bi bi-hint"></i> Protocol Hint (Optional)
                            </label>
                            <select class="form-select" id="protocolHint" name="protocol_hint">
                                <option value="">Auto-detect</option>
                                <option value="uart">UART</option>
                                <option value="spi">SPI</option>
                                <option value="i2c">I2C</option>
                                <option value="can">CAN Bus</option>
                                <option value="usb">USB</option>
                                <option value="ethernet">Ethernet</option>
                            </select>
                        </div>
                    </div>

                    <div class="row mb-4">
                        <div class="col-md-4">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="autoCRC" name="auto_crc" checked>
                                <label class="form-check-label" for="autoCRC">
                                    Auto-detect CRC
                                </label>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="detectCrypto" name="detect_crypto" checked>
                                <label class="form-check-label" for="detectCrypto">
                                    Detect Crypto
                                </label>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="generateTests" name="generate_tests" checked>
                                <label class="form-check-label" for="generateTests">
                                    Generate Tests
                                </label>
                            </div>
                        </div>
                    </div>

                    <!-- Submit Button -->
                    <button type="submit" class="btn btn-primary btn-lg w-100" id="analyzeBtn">
                        <i class="bi bi-play-circle"></i> Start Analysis
                    </button>
                </form>

                <!-- Progress Indicator -->
                <div id="progressContainer" class="mt-4 d-none">
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" id="progressBar" style="width: 0%"></div>
                    </div>
                    <p class="text-center mt-2" id="progressText">Initializing...</p>
                </div>
            </div>
        </div>

        <!-- Recent Sessions -->
        <div class="card mt-4">
            <div class="card-body">
                <h5 class="card-title mb-3">
                    <i class="bi bi-clock-history"></i> Quick Actions
                </h5>
                <div class="d-grid gap-2">
                    <a href="/sessions" class="btn btn-outline-primary">
                        <i class="bi bi-list-task"></i> View All Sessions
                    </a>
                    <a href="/protocols" class="btn btn-outline-primary">
                        <i class="bi bi-diagram-3"></i> Browse Protocols
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
    const dropzone = document.getElementById('dropzone');
    const fileInput = document.getElementById('fileInput');
    const fileInfo = document.getElementById('fileInfo');
    const fileName = document.getElementById('fileName');
    const fileSize = document.getElementById('fileSize');
    const uploadForm = document.getElementById('uploadForm');
    const progressContainer = document.getElementById('progressContainer');
    const progressBar = document.getElementById('progressBar');
    const progressText = document.getElementById('progressText');
    const analyzeBtn = document.getElementById('analyzeBtn');

    // Dropzone click
    dropzone.addEventListener('click', () => fileInput.click());

    // Drag and drop
    dropzone.addEventListener('dragover', (e) => {
        e.preventDefault();
        dropzone.classList.add('drag-over');
    });

    dropzone.addEventListener('dragleave', () => {
        dropzone.classList.remove('drag-over');
    });

    dropzone.addEventListener('drop', (e) => {
        e.preventDefault();
        dropzone.classList.remove('drag-over');

        const files = e.dataTransfer.files;
        if (files.length > 0) {
            fileInput.files = files;
            updateFileInfo(files[0]);
        }
    });

    // File selection
    fileInput.addEventListener('change', (e) => {
        const file = e.target.files[0];
        if (file) {
            updateFileInfo(file);
        }
    });

    function updateFileInfo(file) {
        fileName.textContent = file.name;
        fileSize.textContent = formatFileSize(file.size);
        fileInfo.classList.remove('d-none');
    }

    function formatFileSize(bytes) {
        if (bytes < 1024) return bytes + ' B';
        if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(2) + ' KB';
        return (bytes / (1024 * 1024)).toFixed(2) + ' MB';
    }

    // Form submission
    uploadForm.addEventListener('submit', async (e) => {
        e.preventDefault();

        const file = fileInput.files[0];
        if (!file) {
            alert('Please select a file first');
            return;
        }

        // Show progress
        progressContainer.classList.remove('d-none');
        analyzeBtn.disabled = true;
        progressBar.style.width = '10%';
        progressText.textContent = 'Uploading file...';

        // Create form data
        const formData = new FormData();
        formData.append('file', file);
        formData.append('protocol_hint', document.getElementById('protocolHint').value);
        formData.append('auto_crc', document.getElementById('autoCRC').checked);
        formData.append('detect_crypto', document.getElementById('detectCrypto').checked);
        formData.append('generate_tests', document.getElementById('generateTests').checked);

        try {
            // Upload file
            const response = await fetch('/api/upload', {
                method: 'POST',
                body: formData
            });

            if (!response.ok) {
                throw new Error('Upload failed');
            }

            const data = await response.json();
            const sessionId = data.session_id;

            // Update progress
            progressBar.style.width = '30%';
            progressText.textContent = 'Analysis started...';

            // Connect WebSocket for real-time updates
            const ws = new WebSocket(`ws://${window.location.host}/ws/${sessionId}`);

            ws.onmessage = (event) => {
                const update = JSON.parse(event.data);

                if (update.type === 'status') {
                    progressBar.style.width = update.progress + '%';
                    progressText.textContent = update.message;

                    if (update.status === 'complete') {
                        setTimeout(() => {
                            window.location.href = `/session/${sessionId}`;
                        }, 1000);
                    }
                } else if (update.type === 'error') {
                    progressBar.classList.add('bg-danger');
                    progressText.textContent = 'Error: ' + update.message;
                    analyzeBtn.disabled = false;
                }
            };

            ws.onerror = () => {
                // Fallback to polling if WebSocket fails
                pollSessionStatus(sessionId);
            };

        } catch (error) {
            alert('Upload failed: ' + error.message);
            progressContainer.classList.add('d-none');
            analyzeBtn.disabled = false;
        }
    });

    // Fallback polling function
    async function pollSessionStatus(sessionId) {
        const interval = setInterval(async () => {
            try {
                const response = await fetch(`/api/session/${sessionId}/status`);
                const data = await response.json();

                progressText.textContent = `Status: ${data.status}`;

                if (data.status === 'complete') {
                    clearInterval(interval);
                    progressBar.style.width = '100%';
                    setTimeout(() => {
                        window.location.href = `/session/${sessionId}`;
                    }, 1000);
                } else if (data.status === 'error') {
                    clearInterval(interval);
                    progressBar.classList.add('bg-danger');
                    progressText.textContent = 'Error: ' + data.error;
                    analyzeBtn.disabled = false;
                }
            } catch (error) {
                console.error('Poll error:', error);
            }
        }, 2000);
    }
</script>
{% endblock %}
