<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>NEXUS | @yield('page-title', 'Dashboard')</title>
    <link rel="shortcut icon" href="{{ asset('images/logo-sm.png') }}">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=IBM+Plex+Mono:wght@300;400;500&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/nexus/nexus-core.css?v={{ time() }}">
    <link rel="stylesheet" href="/nexus/nexus-interactive.css?v={{ time() }}">
    <link rel="stylesheet" href="/nexus/nexus-bot.css?v={{ time() }}">

    {{-- Page loader: inline styles so it renders before external CSS --}}
    <style>
        .page-loader {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 99999;
            background: #0a0a0a;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }

        .page-loader.dismissed {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        .page-loader-content {
            text-align: center;
        }

        .page-loader-mark {
            width: 36px;
            height: 36px;
            border: 1px solid #e8842a;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 16px;
        }

        .page-loader-mark span {
            font-family: 'Bebas Neue', sans-serif;
            font-size: 20px;
            color: #e8842a;
            line-height: 1;
        }

        .page-loader-text {
            font-family: 'IBM Plex Mono', monospace;
            font-size: 9px;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: #7a7a7a;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .page-loader-dot {
            width: 5px;
            height: 5px;
            background: #e8842a;
            display: inline-block;
            animation: loader-blink 1s ease infinite;
        }

        @keyframes loader-blink {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.15;
            }
        }

        @media (max-width: 768px) {
            .sys-bar-manual { display: none; }
        }
    </style>

    @yield('head')
</head>

<body>

    {{-- PAGE LOADER --}}
    <div class="page-loader" id="pageLoader">
        <div class="page-loader-content">
            <div class="page-loader-mark"><span>N</span></div>
            <div class="page-loader-text">
                Initializing
                <span class="page-loader-dot"></span>
            </div>
        </div>
    </div>

    {{-- SYS-BAR --}}
    <div class="sys-bar">
        <div class="sys-bar-left">
           <a href="/nexus/overview" class="sys-bar-mark" title="System Overview" style="text-decoration:none;"><span>N</span></a>
            <span class="sys-bar-item live">GE-AS NEXUS</span>
            <span class="sys-bar-item sys-bar-context" id="nexusMode">@yield('sys-mode', 'DASHBOARD')</span>
        </div>
        <div class="sys-bar-right">
            <span class="sys-bar-user">{{ auth('nexus')->user()->name ?? 'ADMIN' }}</span>
            <span id="sysTime">--:--:-- UTC</span>
            <a href="https://manual.ge-as.com/admin/" target="_blank" class="btn-disconnect sys-bar-manual" style="text-decoration:none;">MANUAL</a>
            <form method="POST" action="{{ route('nexus.logout') }}" style="display:inline;">
                @csrf
                <button type="submit" class="btn-disconnect">DISCONNECT</button>
            </form>
        </div>
    </div>

    {{-- NAV --}}
    <nav class="nav-bar">
        <a href="/nexus/dashboard" class="nav-link {{ request()->is('nexus/dashboard') ? 'active' : '' }}">Overview</a>
        <a href="/nexus/users" class="nav-link {{ request()->is('nexus/users') ? 'active' : '' }}">Users</a>
        <a href="/nexus/markets" class="nav-link {{ request()->is('nexus/markets') ? 'active' : '' }}">Markets</a>
        <a href="/nexus/controls" class="nav-link {{ request()->is('nexus/controls') ? 'active' : '' }}">Controls</a>
        <a href="/nexus/bots" class="nav-link {{ request()->is('nexus/bots') ? 'active' : '' }}">Bots</a>
        <a href="/nexus/audit" class="nav-link {{ request()->is('nexus/audit') ? 'active' : '' }}">Audit Log</a>
        <a href="/nexus/terminal" class="nav-link {{ request()->is('nexus/terminal') ? 'active' : '' }}">Terminal</a>
    </nav>

    {{-- EMERGENCY BANNER --}}
    @php
    $emergencyPaused = false;
    try {
    $epVal = \App\Nexus\Models\NexusConfig::where('key', 'emergency_pause')->value('value');
    $emergencyPaused = $epVal === '1' || $epVal === 1;
    } catch (\Exception $e) {}
    @endphp

    <div class="emergency-banner {{ $emergencyPaused ? 'visible' : '' }}" id="emergencyBanner">
        <span class="emergency-banner-icon">!</span>
        <span class="emergency-banner-text">EMERGENCY PAUSE ACTIVE -- All trading operations halted</span>
    </div>

    {{-- CONTENT --}}
    <main class="main">
        @yield('content')
    </main>

    {{-- BOTTOM BAR --}}
    <div class="bottom-bar">
        <span>&copy; {{ date('Y') }} GE-AS.COM -- Internal system. Restricted access.</span>
        <span>NEXUS ENGINE &bull; v<span class="orange">1.0</span></span>
    </div>

    {{-- TOAST --}}
    <div id="toast" class="toast"></div>

    {{-- MODAL --}}
    <div class="modal-overlay" id="confirmModal">
        <div class="modal-box">
            <div class="modal-title" id="confirmModalTitle">Confirm Action</div>
            <div class="modal-body" id="confirmModalBody">Are you sure?</div>
            <div class="modal-actions">
                <button class="btn-sm btn-ghost" id="confirmModalCancel" onclick="nexus.closeModal()">CANCEL</button>
                <button class="btn-sm btn-danger" id="confirmModalConfirm">CONFIRM</button>
            </div>
        </div>
    </div>

    {{-- AUDIT TRAIL MODAL --}}
    <div class="modal-overlay" id="auditTrailModal">
        <div class="modal-box" style="max-width: 720px;">
            <div class="modal-title" style="display: flex; justify-content: space-between; align-items: center;">
                <span id="auditTrailTitle">Audit Trail</span>
                <button class="btn-sm btn-ghost" onclick="nexus.closeAuditTrail()" style="padding: 3px 10px; font-size: 10px;">CLOSE</button>
            </div>
            <div class="modal-body" id="auditTrailBody" style="padding: 0; max-height: 60vh; overflow-y: auto;">
                <div style="padding: 20px; text-align: center;">
                    <span class="ajax-loading-spinner">Loading <span class="loading-dot"></span></span>
                </div>
            </div>
            <div class="modal-actions" style="justify-content: space-between;">
                <a href="#" id="auditTrailFullLink" class="btn-sm btn-ghost" style="text-decoration: none; font-size: 10px;">VIEW FULL TRAIL</a>
                <button class="btn-sm btn-ghost" onclick="nexus.closeAuditTrail()">CLOSE</button>
            </div>
        </div>
    </div>

    {{-- JS --}}
    <script>
        (function() {
            function dismissLoader() {
                var loader = document.getElementById('pageLoader');
                if (loader) {
                    setTimeout(function() {
                        loader.classList.add('dismissed');
                    }, 120);
                    setTimeout(function() {
                        if (loader.parentNode) loader.parentNode.removeChild(loader);
                    }, 500);
                }
            }
            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', dismissLoader);
            } else {
                dismissLoader();
            }
        })();
    </script>
    <script src="/nexus/nexus.js?v={{ time() }}"></script>
    @yield('scripts')

</body>

</html>