{% extends "base.html" %}

{% block content %}
<div class="row g-4 mb-5">
    <div class="col-lg-8">
        <div class="dashboard-card mb-4 border-0 p-0" style="background: transparent;">
            <a href="{% url 'index' %}" class="text-accent text-decoration-none small fw-bold mb-3 d-block">← BACK_TO_DASHBOARD</a>
            <h1 class="fw-bold mb-3 display-5 lh-1">REPORT_{{ scan.id }}_{{ scan.target_value|truncatechars:10 }}</h1>
            <div class="d-flex gap-4">
                <span class="text-muted fs-5 fw-medium">TARGET: {{ scan.target_value }}</span>
                <span class="text-accent fs-5 fw-bold">TYPE: {{ scan.target_type|upper }}</span>
            </div>
        </div>
    </div>
    <div class="col-lg-4 text-end">
        <div class="dashboard-card bg-dark border-accent d-inline-block text-center p-4">
            <h3 class="fs-4 fw-bold text-accent mb-0">RISK_SCORE</h3>
            <div class="display-3 fw-bold my-2 {% if scan.risk_score > 50 %}text-danger{% else %}text-success{% endif %}">
                {{ scan.risk_score }}
            </div>
            <div class="text-muted extra-small">CONFIDENCE: HIGH</div>
        </div>
    </div>
</div>

<div class="row g-4">
    <!-- Main Results Column -->
    <div class="col-lg-7">
        <h2 class="fs-5 mb-4 fw-bold">MODULE_OUTPUTS</h2>
        
        {% for module, data in results.items %}
            {% if module != 'serp_results' %}
            <div class="dashboard-card mb-4">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h3 class="fs-6 fw-bold text-uppercase m-0">{{ module }}_DATA</h3>
                    <span class="badge bg-dark border border-secondary text-accent small">LIVE_FEED</span>
                </div>
                <div class="module-content">
                    <pre>{{ data|pprint }}</pre>
                </div>
            </div>
            {% endif %}
        {% endfor %}

        <!-- Serp Results / Public Mentions -->
        {% if results.serp_results %}
        <div class="dashboard-card">
            <h3 class="fs-6 fw-bold text-uppercase mb-4 m-0 text-info">PUBLIC_MENTIONS_EXTRACT</h3>
            <div class="serp-list">
                {% for item in results.serp_results %}
                <div class="mb-4 pb-3 border-bottom border-secondary last-border-none">
                    <a href="{{ item.link }}" target="_blank" class="text-info text-decoration-none fw-bold d-block mb-1 fs-6">
                        {{ item.title }}
                    </a>
                    <p class="text-muted small mb-1">{{ item.snippet }}</p>
                    <div class="text-accent extra-small fw-bold" style="font-size: 0.7rem;">SOURCE: {{ item.displayed_link }}</div>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}
    </div>

    <!-- Actions / Insights Column -->
    <div class="col-lg-5">
        <div class="dashboard-card mb-4">
            <h2 class="fs-6 fw-bold mb-4">INVESTIGATIVE_ACTIONS</h2>
            <div class="d-grid gap-3">
                <button class="btn btn-outline-info text-start py-3 fw-bold small letter-spacing-1">
                    GENERATE_PDF_REPORT
                </button>
                <button class="btn btn-outline-warning text-start py-3 fw-bold small letter-spacing-1">
                    FLAG_AS_SUSPICIOUS
                </button>
                <button class="btn btn-outline-danger text-start py-3 fw-bold small letter-spacing-1">
                    EXPORT_FOR_MALTEGO
                </button>
                <button class="btn btn-outline-secondary text-start py-3 fw-bold small letter-spacing-1">
                    SHARE_SECURE_LINK
                </button>
            </div>
        </div>

        <div class="dashboard-card">
            <h2 class="fs-6 fw-bold mb-4">FORENSIC_TIMELINE</h2>
            <div class="timeline ps-3 border-start border-secondary py-2">
                <div class="mb-4 position-relative">
                    <div class="position-absolute bg-accent rounded-circle" style="width: 10px; height: 10px; left: -21px; top: 5px;"></div>
                    <div class="small fw-bold">SCAN_INITIATED</div>
                    <div class="text-muted extra-small">{{ scan.created_at|date:"Y-m-d H:i:s" }}</div>
                </div>
                <div class="mb-4 position-relative">
                    <div class="position-absolute bg-info rounded-circle" style="width: 10px; height: 10px; left: -21px; top: 5px;"></div>
                    <div class="small fw-bold">API_ENRICHMENT_COMPLETE</div>
                    <div class="text-muted extra-small">SUCCESSFUL DATA FETCH</div>
                </div>
                <div class="position-relative">
                    <div class="position-absolute bg-success rounded-circle" style="width: 10px; height: 10px; left: -21px; top: 5px;"></div>
                    <div class="small fw-bold">REPORT_FINALIZED</div>
                    <div class="text-muted extra-small">READY FOR REVIEW</div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}