{% extends "base.html" %}
{% load static %}

{% block title %}Cloud Malware Detection Web App - Home{% endblock %}

{% block content %}
<section class="hero-section py-5 mb-5">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <h1 class="display-4 fw-bold mb-3 font-heading">Cloud Malware Detection Web App</h1>
                <p class="lead mb-4 text-secondary">Securely scan your files for potential threats using advanced static analysis and hash matching.</p>
                <div class="d-flex gap-3">
                    <a href="#scan-area" class="btn btn-accent btn-lg px-4 shadow-sm">Start Scanning</a>
                    <a href="#recent-scans" class="btn btn-outline-light btn-lg px-4">View History</a>
                </div>
            </div>
            <div class="col-lg-6 d-none d-lg-block">
                <div class="hero-image-placeholder text-center p-5">
                    <i class="bi bi-shield-check-fill display-1 text-accent animate-glow"></i>
                </div>
            </div>
        </div>
    </div>
</section>

<div class="container" id="scan-area">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card bg-secondary-dark border-secondary shadow-lg mb-5">
                <div class="card-body p-4 p-md-5">
                    <h3 class="card-title mb-4 font-heading">Upload File for Analysis</h3>
                    <form action="{% url 'scan_file' %}" method="post" enctype="multipart/form-data" id="scanForm">
                        {% csrf_token %}
                        <div class="upload-zone mb-4" id="dropZone">
                            <input type="file" name="file" id="fileInput" class="d-none" required>
                            <div class="text-center p-5 border border-2 border-dashed border-secondary rounded-3 cursor-pointer" id="uploadTrigger">
                                <i class="bi bi-cloud-arrow-up display-4 text-secondary mb-3"></i>
                                <h5 class="text-light" id="fileLabel">Click or drag file here to upload</h5>
                                <p class="text-secondary small">Maximum file size: 10MB</p>
                            </div>
                        </div>
                        <div class="d-grid">
                            <button type="submit" class="btn btn-accent btn-lg fw-bold py-3" id="submitBtn">
                                <span id="btnText">Scan File</span>
                                <span id="btnSpinner" class="spinner-border spinner-border-sm d-none" role="status"></span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            {% if result %}
            <div class="result-card card {% if result.risk_level == 'HIGH' %}border-danger{% elif result.risk_level == 'MEDIUM' %}border-warning{% else %}border-success{% endif %} bg-secondary-dark mb-5 shadow-lg">
                <div class="card-header {% if result.risk_level == 'HIGH' %}bg-danger{% elif result.risk_level == 'MEDIUM' %}bg-warning text-dark{% else %}bg-success{% endif %} fw-bold">
                    Scan Result: {{ result.risk_level }} RISK
                </div>
                <div class="card-body">
                    <h4 class="mb-3">{{ result.filename }}</h4>
                    <p class="mb-2"><strong>SHA256 Hash:</strong> <code class="text-accent">{{ result.file_hash }}</code></p>
                    <p class="mb-0"><strong>Reasons for Assessment:</strong></p>
                    <ul class="mt-2">
                        {% for reason in result.reasons.split|slice:":-1" %}
                            <li>{{ reason }}</li>
                        {% empty %}
                            <li>{{ result.reasons }}</li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
            {% endif %}

            <div id="recent-scans" class="mb-5">
                <h3 class="mb-4 font-heading">Recent Scans</h3>
                <div class="table-responsive">
                    <table class="table table-dark table-hover border-secondary">
                        <thead class="table-secondary-dark">
                            <tr>
                                <th>Filename</th>
                                <th>Risk Level</th>
                                <th>Date</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for scan in recent_scans %}
                            <tr>
                                <td>{{ scan.filename }}</td>
                                <td>
                                    <span class="badge {% if scan.risk_level == 'HIGH' %}bg-danger{% elif scan.risk_level == 'MEDIUM' %}bg-warning text-dark{% else %}bg-success{% endif %}">
                                        {{ scan.risk_level }}
                                    </span>
                                </td>
                                <td>{{ scan.created_at|date:"M d, Y H:i" }}</td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="3" class="text-center text-secondary">No recent scans found.</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    const dropZone = document.getElementById('dropZone');
    const uploadTrigger = document.getElementById('uploadTrigger');
    const fileInput = document.getElementById('fileInput');
    const fileLabel = document.getElementById('fileLabel');
    const scanForm = document.getElementById('scanForm');
    const submitBtn = document.getElementById('submitBtn');
    const btnText = document.getElementById('btnText');
    const btnSpinner = document.getElementById('btnSpinner');

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

    fileInput.addEventListener('change', () => {
        if (fileInput.files.length > 0) {
            fileLabel.textContent = fileInput.files[0].name;
            uploadTrigger.classList.add('border-accent');
        }
    });

    scanForm.addEventListener('submit', () => {
        submitBtn.disabled = true;
        btnText.textContent = 'Analyzing...';
        btnSpinner.classList.remove('d-none');
    });

    // Drag and drop logic
    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        dropZone.addEventListener(eventName, e => {
            e.preventDefault();
            e.stopPropagation();
        }, false);
    });

    ['dragenter', 'dragover'].forEach(eventName => {
        dropZone.addEventListener(eventName, () => dropZone.classList.add('bg-secondary'), false);
    });

    ['dragleave', 'drop'].forEach(eventName => {
        dropZone.addEventListener(eventName, () => dropZone.classList.remove('bg-secondary'), false);
    });

    dropZone.addEventListener('drop', e => {
        const dt = e.dataTransfer;
        const files = dt.files;
        fileInput.files = files;
        if (files.length > 0) {
            fileLabel.textContent = files[0].name;
            uploadTrigger.classList.add('border-accent');
        }
    }, false);
</script>
{% endblock %}
