<!-- app/templates/summary.html -->

{% extends "base.html" %}

{% block page_title %}Results Summary{% endblock %}

{% block content %}
<div class="max-w-6xl mx-auto px-4 py-6">
    <!-- Header Section -->
    <div class="flex items-center justify-between mb-6">
        <div>
            <p class="text-base text-gray-400 mt-1">Manage analysis results and uploaded files</p>
        </div>
        
        <!-- Action Buttons -->
        <div class="flex items-center space-x-3">
            <button onclick="window.location.href='/'" 
                    class="px-4 py-2 text-base text-white bg-red-500/10 border border-red-500/30 rounded-lg hover:bg-red-500/20 transition-colors flex items-center space-x-2">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                </svg>
                <span>Upload New File</span>
            </button>
            <button onclick="showSummaryCleanupWarning()" 
                    class="px-4 py-2 text-base text-red-500 border border-red-900/20 rounded-lg hover:bg-red-500/10 transition-colors flex items-center space-x-2">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                </svg>
                <span>Clean All</span>
            </button>
            <!-- New Toggle Button -->
            <button onclick="toggleProcessAnalysis()" 
                    aria-controls="processAnalysisCard" 
                    aria-expanded="false"
                    class="px-4 py-2 text-purple-500 border border-purple-500/30 rounded-lg hover:bg-purple-500/10 transition-colors flex items-center space-x-2">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <!-- Example SVG icon -->
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
                <span>Show Process Analysis</span>
            </button>

            <button onclick="loadFiles()" class="p-2 text-blue-500 border border-blue-900/20 rounded-lg hover:bg-blue-500/10 transition-colors">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                </svg>
            </button>

        </div>
    </div>

    <!-- Main Content -->
    <div class="bg-black/60 backdrop-blur-sm rounded-xl border border-gray-800 shadow-lg">
        <!-- File List -->
        <div class="p-6">
            <h2 class="text-xl font-medium text-gray-100 mb-4">File Analysis Results</h2>

            <!-- Stats Overview -->
            <div class="grid grid-cols-3 gap-4 mb-6">
                <div class="bg-gray-900/30 rounded-lg border border-gray-800 p-4">
                    <div class="text-sm text-gray-500">Total Files</div>
                    <div class="text-2xl font-semibold text-gray-300" id="totalFiles">0</div>
                </div>
                <div class="bg-gray-900/30 rounded-lg border border-gray-800 p-4">
                    <div class="text-sm text-gray-500">Storage Used</div>
                    <div class="text-2xl font-semibold text-gray-300" id="storageUsed">0 MB</div>
                </div>
                <div class="bg-gray-900/30 rounded-lg border border-gray-800 p-4">
                    <div class="text-sm text-gray-500">Average Risk</div>
                    <div class="flex flex-col items-start mt-1">
                        <span id="averageRisk" class="px-2 py-1 text-sm rounded-lg inline-flex items-center justify-center font-medium">-</span>
                        <span id="averageEntropy" class="text-xs text-gray-400 mt-1">Entropy: -</span>
                    </div>
                </div>
            </div>

            <!-- Search and Filter -->
            <div class="flex items-center justify-between mb-6">
                <div class="relative flex-1 max-w-md">
                    <input type="text" 
                           id="searchFiles" 
                           placeholder="Search files..." 
                           class="w-full bg-gray-900/30 border border-gray-800 rounded-lg px-4 py-2 text-gray-300 placeholder-gray-600 focus:outline-none focus:border-red-500 focus:ring-1 focus:ring-red-500/50">
                    <svg class="w-5 h-5 text-gray-500 absolute right-3 top-2.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                    </svg>
                </div>
                <div class="flex items-center space-x-3">
                    <select id="filterType" 
                            class="bg-gray-900/30 border border-gray-800 rounded-lg px-3 py-2 text-gray-300 focus:outline-none focus:border-red-500 focus:ring-1 focus:ring-red-500/50">
                        <option value="all">All Types</option>
                        <option value="exe">.exe</option>
                        <option value="dll">.dll</option>
                        <option value="bin">.bin</option>
                        <option value="docx">.docx</option>
                        <option value="xlsx">.xlsx</option>
                        <option value="lnk">.lnk</option>
                        <option value="sys">.sys</option>
                    </select>
                    <select id="filterRisk" class="bg-gray-900/30 border border-gray-800 rounded-lg px-3 py-2 text-gray-300 focus:outline-none focus:border-red-500 focus:ring-1 focus:ring-red-500/50">
                        <option value="all">All Risks</option>
                        <option value="critical">Critical Risk</option>
                        <option value="high">High Risk</option>
                        <option value="medium">Medium Risk</option>
                        <option value="low">Low Risk</option>
                    </select>

                    <!-- Add risk sorting option -->
                    <select id="sortBy" class="bg-gray-900/30 border border-gray-800 rounded-lg px-3 py-2 text-gray-300 focus:outline-none focus:border-red-500 focus:ring-1 focus:ring-red-500/50">
                        <option value="newest">Newest First</option>
                        <option value="oldest">Oldest First</option>
                        <option value="name">Name</option>
                        <option value="size">Size</option>
                        <option value="risk">Risk Score</option>
                    </select>
                </div>
            </div>

            <!-- File Table -->
            <div class="relative overflow-x-auto">
                <table class="w-full text-left">
                    <thead>
                        <tr class="border-b border-gray-800">
                            <th class="px-6 py-3 text-base font-medium text-gray-300">File Name</th>
                            <!--<th class="px-6 py-3 text-base font-medium text-gray-300">Type</th>-->
                            <th class="px-6 py-3 text-base font-medium text-gray-300">Risk</th>
                            <th class="px-6 py-3 text-base font-medium text-gray-300">Size</th>
                            <th class="px-6 py-3 text-base font-medium text-gray-300">Upload Date</th>
                            <th class="px-6 py-3 text-base font-medium text-gray-300">Analysis Status</th>
                            <th class="px-6 py-3 text-base font-medium text-gray-300">Actions</th>
                        </tr>
                    </thead>
                    <tbody id="fileList" class="divide-y divide-gray-800">
                        <!-- File rows will be populated via JavaScript -->
                    </tbody>
                </table>
            </div>

            <!-- Empty State -->
            <div id="emptyState" class="hidden text-center py-12">
                <svg class="w-16 h-16 text-gray-600 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                </svg>
                <h3 class="text-lg font-medium text-gray-300 mb-2">No files uploaded</h3>
                <p class="text-gray-500">Upload a file to get started with analysis</p>
            </div>
        </div>
        <!-- After the existing file-based div, add: -->
        <div id="processAnalysisCard" class="hidden bg-black/60 backdrop-blur-sm rounded-xl border border-gray-800 shadow-lg mt-6">
            <!-- Process Analysis List -->
            <div class="p-6">
                <h2 class="text-xl font-medium text-gray-100 mb-4">Process Analysis Results</h2>
                
                <!-- Process Stats Overview -->
                <div class="grid grid-cols-3 gap-4 mb-6">
                    <div class="bg-gray-900/30 rounded-lg border border-gray-800 p-4">
                        <div class="text-sm text-gray-500">Total Processes</div>
                        <div class="text-2xl font-semibold text-gray-300" id="totalProcesses">0</div>
                    </div>
                    <div class="bg-gray-900/30 rounded-lg border border-gray-800 p-4">
                        <div class="text-sm text-gray-500">High Risk Processes</div>
                        <div class="text-2xl font-semibold text-gray-300" id="highRiskProcesses">0</div>
                    </div>
                    <div class="bg-gray-900/30 rounded-lg border border-gray-800 p-4">
                        <div class="text-sm text-gray-500">Average Risk</div>
                        <div class="flex flex-col items-start mt-1">
                            <span id="processAverageRisk" class="px-2 py-1 text-sm rounded-lg inline-flex items-center justify-center font-medium">-</span>
                        </div>
                    </div>
                </div>

                <!-- Process Table -->
                <div class="relative overflow-x-auto">
                    <table class="w-full text-left">
                        <thead>
                            <tr class="border-b border-gray-800">
                                <th class="px-6 py-3 text-base font-medium text-gray-300">Process Name</th>
                                <th class="px-6 py-3 text-base font-medium text-gray-300">PID</th>
                                <th class="px-6 py-3 text-base font-medium text-gray-300">Arch</th>
                                <th class="px-6 py-3 text-base font-medium text-gray-300">Risk</th>
                                <th class="px-6 py-3 text-base font-medium text-gray-300">Actions</th>
                            </tr>
                        </thead>
                        <tbody id="processList" class="divide-y divide-gray-800">
                            <!-- Process rows will be populated via JavaScript -->
                        </tbody>
                    </table>
                </div>

                <!-- Empty State for Processes -->
                <div id="processEmptyState" class="hidden text-center py-12">
                    <svg class="w-16 h-16 text-gray-600 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                    </svg>
                    <h3 class="text-lg font-medium text-gray-300 mb-2">No process analysis results</h3>
                    <p class="text-gray-500">No processes have been analyzed yet</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- File Row Template -->
<template id="fileRowTemplate">
    <tr class="border-b border-gray-800">
        <td class="py-4">
            <div class="flex flex-col">
                <span data-field="fileName" class="text-gray-200"></span>
                <span data-field="fileHash" class="text-sm text-gray-500 font-mono"></span>
            </div>
        </td>
        <td class="text-left px-6">
            <span data-field="fileRisk" class="inline-block min-w-[70px]"></span>
            <br/>
            <span data-field="fileEntropy" class="text-xs text-gray-400"></span>
        </td>
        <td class="text-center">
            <span data-field="fileSize" class="text-gray-400"></span>
        </td>
        <td class="text-center">
            <span data-field="fileUploadDate" class="text-gray-400"></span>
        </td>
        <td class="text-center">
            <span data-field="fileAnalysisStatus"></span>
        </td>
        <td>
            <div class="flex justify-end space-x-2">
                <button data-action="view" class="p-2 text-gray-400 hover:text-blue-500 rounded-lg hover:bg-blue-500/10 transition-colors">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                    </svg>
                </button>
                <button data-action="delete" class="p-2 text-gray-400 hover:text-red-500 rounded-lg hover:bg-red-500/10 transition-colors">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                    </svg>
                </button>
            </div>
        </td>
    </tr>
</template>

<!-- Process Row Template -->
<template id="processRowTemplate">
    <tr class="border-b border-gray-800">
        <td class="py-4 px-6">
            <div class="flex flex-col">
                <span data-field="processName" class="text-gray-200"></span>
                <span data-field="processPath" class="text-sm text-gray-500"></span>
            </div>
        </td>
        <td class="text-left px-6">
            <span data-field="pid" class="text-gray-200 font-mono"></span>
        </td>
        <td class="text-center px-6">
            <span data-field="processArch" class="text-gray-400"></span>
        </td>
        <td class="text-left px-6">
            <span data-field="processRisk" class="inline-block min-w-[70px]"></span>
        </td>
        <td>
            <div class="flex justify-end space-x-2">
                <button data-action="view" class="p-2 text-gray-400 hover:text-blue-500 rounded-lg hover:bg-blue-500/10 transition-colors">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                    </svg>
                </button>
                <button data-action="delete" class="p-2 text-gray-400 hover:text-red-500 rounded-lg hover:bg-red-500/10 transition-colors">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                    </svg>
                </button>
            </div>
        </td>
    </tr>
</template>


<!-- Cleanup Warning Modal -->
<div id="summaryCleanupWarningModal" class="hidden fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center">
    <div class="bg-gray-900 rounded-xl border border-red-900/20 p-6 max-w-lg w-full mx-4">
        <!-- Header -->
        <div class="flex items-center space-x-3 mb-4">
            <svg class="w-6 h-6 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
            </svg>
            <h3 class="text-lg font-medium text-gray-100">Warning: System Cleanup</h3>
        </div>
        
        <!-- Content -->
        <div class="text-gray-300 mb-6">
            <p class="mb-4">This will permanently remove all uploaded files and analysis data.</p>
            <p class="text-red-500">Are you sure you want to proceed?</p>
        </div>

        <!-- Buttons -->
        <div class="flex justify-end space-x-3">
            <button onclick="hideCleanupWarning()" 
                    class="px-4 py-2 text-gray-400 hover:text-white">
                Cancel
            </button>
            <button onclick="cleanupFiles()" 
                    class="px-4 py-2 text-red-500 border border-red-900/20 rounded-lg hover:bg-red-500/10">
                Proceed
            </button>
        </div>
    </div>
</div>

<!-- File Delete Warning Modal -->
<div id="fileDeleteWarningModal" class="hidden fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center">
    <div class="bg-gray-900 rounded-xl border border-red-900/20 p-6 max-w-lg w-full mx-4">
        <!-- Header -->
        <div class="flex items-center space-x-3 mb-4">
            <svg class="w-6 h-6 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
            </svg>
            <h3 class="text-lg font-medium text-gray-100">Warning: Delete File</h3>
        </div>
        
        <!-- Content -->
        <div class="text-gray-300 mb-6">
            <p class="mb-4">This will permanently remove the selected file and its analysis data.</p>
            <p class="text-red-500">Are you sure you want to proceed?</p>
        </div>

        <!-- Buttons -->
        <div class="flex justify-end space-x-3">
            <button onclick="hideFileDeleteWarning()" 
                    class="px-4 py-2 text-gray-400 hover:text-white">
                Cancel
            </button>
            <button id="confirmDeleteButton"
                    class="px-4 py-2 text-red-500 border border-red-900/20 rounded-lg hover:bg-red-500/10">
                Delete
            </button>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/summary.js') }}"></script>
{% endblock %} 