{% extends "base/layouts.html" %}

{% block content %}
<div class="flex flex-col h-full bg-neutral-50 dark:bg-neutral-900">
    <!-- Header / Controls -->
    <div
        class="px-6 py-4 flex flex-col md:flex-row items-center justify-between gap-4 border-b border-neutral-300 dark:border-neutral-700 bg-white dark:bg-neutral-950 shadow-sm z-10">
        <div class="flex items-center gap-4">
            <h1 class="text-xl font-bold text-neutral-800 dark:text-neutral-100">Graph View</h1>
            <div class="h-6 w-px bg-neutral-300 dark:bg-neutral-700"></div>
            <div class="flex gap-2">
                <button id="fetch-data-btn"
                    class="px-3 py-1.5 text-sm font-medium text-white bg-green-600 rounded-md hover:bg-green-700 transition">
                    <i class="fas fa-sync-alt mr-1"></i> Fetch Data
                </button>
                <button id="clear-btn"
                    class="px-3 py-1.5 text-sm font-medium text-white bg-red-600 rounded-md hover:bg-red-700 transition">
                    <i class="fas fa-trash-alt mr-1"></i> Delete Data
                </button>
            </div>
        </div>

        <div class="flex items-center gap-2 flex-grow justify-end">
            <div id="stats-container" class="hidden md:flex items-center gap-3 mr-4">
                <span
                    class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400">
                    <i class="fas fa-user mr-1"></i> <span id="stats-users">0</span>
                </span>
                <span
                    class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400">
                    <i class="fas fa-users mr-1"></i> <span id="stats-groups">0</span>
                </span>
                <span
                    class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400">
                    <i class="fas fa-desktop mr-1"></i> <span id="stats-computers">0</span>
                </span>
                <span
                    class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-pink-100 text-pink-800 dark:bg-pink-900/30 dark:text-pink-400">
                    <i class="fas fa-building mr-1"></i> <span id="stats-ous">0</span>
                </span>
                <span
                    class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-cyan-100 text-cyan-800 dark:bg-cyan-900/30 dark:text-cyan-400">
                    <i class="fas fa-file-contract mr-1"></i> <span id="stats-gpos">0</span>
                </span>
            </div>
            <div class="relative w-full max-w-xl flex gap-2">
                <div class="relative flex-1">
                    <i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400"></i>
                    <input type="text" id="graph-search" placeholder="Search (e.g., user:admin, group:domain admins)"
                        autocomplete="off"
                        class="pl-9 pr-4 py-2 text-sm border border-neutral-300 dark:border-neutral-700 rounded-md bg-neutral-50 dark:bg-neutral-900 text-neutral-800 dark:text-neutral-200 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full shadow-sm">
                    <!-- Autocomplete Dropdown -->
                    <div id="search-results"
                        class="hidden absolute top-full left-0 right-0 mt-1 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-700 rounded-md shadow-lg max-h-60 overflow-y-auto z-[100]">
                    </div>
                </div>
                <button id="search-submit-btn"
                    class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 transition shadow-sm">
                    <i class="fas fa-search mr-1"></i> Search
                </button>
            </div>
        </div>
    </div>

    <!-- Canvas -->
    <div class="flex-grow w-full h-full relative overflow-hidden bg-neutral-50 dark:bg-neutral-900">
        <div id="cy" class="w-full h-full text-neutral-800 dark:text-neutral-100"></div>

        <!-- Floating Action Buttons -->
        <div class="absolute bottom-6 right-6 flex flex-col gap-3 z-20">
            <!-- Back to Center Button -->
            <button id="center-graph-btn"
                class="p-4 bg-white dark:bg-neutral-800 text-blue-600 dark:text-blue-500 rounded-full shadow-lg border border-neutral-200 dark:border-neutral-700 hover:bg-neutral-50 dark:hover:bg-neutral-700 transition-all group"
                title="Back to Center">
                <i class="fas fa-compress-arrows-alt text-xl"></i>
                <span
                    class="absolute right-full mr-3 px-2 py-1 bg-neutral-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none">
                    Back to Center
                </span>
            </button>

            <!-- Clear Graph Button -->
            <button id="clear-graph-btn"
                class="p-4 bg-white dark:bg-neutral-800 text-red-600 dark:text-red-500 rounded-full shadow-lg border border-neutral-200 dark:border-neutral-700 hover:bg-neutral-50 dark:hover:bg-neutral-700 transition-all group"
                title="Clear Canvas">
                <i class="fas fa-eraser text-xl"></i>
                <span
                    class="absolute right-full mr-3 px-2 py-1 bg-neutral-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none">
                    Clear Canvas
                </span>
            </button>
        </div>

        <!-- Loading Overlay -->
        <div id="loading-overlay"
            class="hidden absolute inset-0 bg-white/80 dark:bg-black/50 flex items-center justify-center z-20">
            <div class="flex flex-col items-center">
                <i class="fas fa-circle-notch fa-spin text-4xl text-blue-600 mb-3"></i>
                <p class="text-neutral-600 dark:text-neutral-300 font-medium">Loading Graph Data...</p>
                <p id="loading-status" class="text-sm text-neutral-500 dark:text-neutral-400 mt-1">Fetching objects...
                </p>
            </div>
        </div>
    </div>

    <!-- Side Details Panel -->
    <div id="details-panel"
        class="fixed top-0 right-0 h-full w-full md:w-96 bg-white dark:bg-neutral-950 border-l border-neutral-200 dark:border-neutral-800 shadow-2xl z-[60] transform translate-x-full transition-transform duration-300 ease-in-out">
        <!-- Resize Handle -->
        <div id="panel-resizer" class="absolute left-0 top-0 w-1 h-full cursor-col-resize hover:bg-blue-500 transition-colors z-20 group">
            <div class="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 w-4 h-12 flex flex-col justify-between items-center opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
                <div class="w-0.5 h-full bg-blue-500 rounded-full mx-0.5"></div>
                <div class="w-0.5 h-full bg-blue-500 rounded-full mx-0.5"></div>
            </div>
        </div>
        
        <div class="flex flex-col h-full">
            <div class="flex items-center justify-between px-6 py-4 border-b border-neutral-200 dark:border-neutral-800 sticky top-0 bg-white dark:bg-neutral-950 z-10">
                <h2 class="text-lg font-bold text-neutral-800 dark:text-neutral-100">Object Details</h2>
                <button id="close-panel-btn" class="p-2 text-neutral-500 hover:text-neutral-800 dark:hover:text-neutral-200 transition">
                    <i class="fas fa-times text-xl"></i>
                </button>
            </div>
            <div id="panel-content" class="p-6 overflow-y-auto flex-grow">
                <!-- Content dynamically populated by graph.js -->
            </div>
        </div>
    </div>

    <!-- Context Menu -->
    <div id="graph-context-menu" class="hidden fixed z-[200] bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-lg shadow-xl py-1 min-w-[180px]">
        <div class="px-4 py-2 border-b border-neutral-100 dark:border-neutral-800">
            <span id="menu-node-label" class="text-xs font-bold text-neutral-400 uppercase tracking-wider truncate block">Node Actions</span>
        </div>
        <button id="menu-fetch-inbound" class="w-full text-left px-4 py-2 text-sm text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 flex items-center gap-2 transition">
            <i class="fas fa-sign-in-alt text-green-500"></i>
            <span>Fetch Inbound ACL</span>
        </button>
        <button id="menu-fetch-outbound" class="w-full text-left px-4 py-2 text-sm text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 flex items-center gap-2 transition">
            <i class="fas fa-sign-out-alt text-blue-500"></i>
            <span>Fetch Outbound ACL</span>
        </button>
    </div>
</div>

<!-- OPSEC Warning Modal (Global Fixed) -->
<div id="opsec-modal"
    class="hidden fixed inset-0 bg-black/60 flex items-center justify-center z-[100] backdrop-blur-sm">
    <div
        class="bg-white dark:bg-neutral-900 rounded-lg shadow-xl max-w-md w-full p-6 border border-neutral-200 dark:border-neutral-800">
        <div class="flex items-center gap-3 mb-4">
            <div class="p-3 bg-yellow-100 dark:bg-yellow-900/30 rounded-full">
                <i class="fas fa-exclamation-triangle text-yellow-600 dark:text-yellow-500 text-xl"></i>
            </div>
            <h2 class="text-lg font-bold text-neutral-800 dark:text-neutral-100">OPSEC Warning</h2>
        </div>

        <p class="text-neutral-600 dark:text-neutral-400 mb-6 leading-relaxed">
            Initializing the graph will fetch <strong>all domain users, groups, and computers</strong> via LDAP.
            This generates a significant amount of network traffic and may be detected by monitoring solutions.
        </p>

        <div class="flex justify-end gap-3">
            <button id="cancel-load-btn"
                class="px-4 py-2 text-sm font-medium text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md transition">
                Cancel
            </button>
            <button id="confirm-load-btn"
                class="px-4 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-700 rounded-md transition shadow-sm">
                I understand, proceed
            </button>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.28.1/cytoscape.min.js"></script>
<script type="module" src="{{ url_for('static', filename='js/graph/main.js') }}"></script>
{% endblock %}