<?php

/**
 * Developer Console Layout
 *
 * A distinct terminal-inspired dark layout for the Developer Console.
 * Separate from the Admin Portal layout — Developer Console is a maintenance
 * tool, not part of the normal administrative workflow.
 *
 * @package Inveetaire
 * @ref     DX001
 */

$title      = isset($title) && is_string($title) ? $title . ' • DEV CONSOLE' : 'Developer Console • INVEETAIRE';
$activePage = $active_page ?? '';

// Helper for sidebar active states
$navActive = function (string $page) use ($activePage): string {
    return $activePage === $page
        ? 'dev-nav-link active'
        : 'dev-nav-link';
};

?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= escape_html($title) ?></title>
    <meta name="robots" content="noindex, nofollow">

    <link rel="icon" type="image/png" sizes="32x32" href="<?= asset('/assets/branding/favicon/light-bg/favicon-32x32.png') ?>">
    <link rel="stylesheet" href="<?= asset('/assets/css/all.min.css') ?>">
    <link rel="stylesheet" href="<?= asset('/assets/css/app.css') ?>?v=<?= time() ?>">
    <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=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

    <style>
        /* ── Developer Console Design System ── */
        :root {
            --dev-bg:         #0d1117;
            --dev-surface:    #161b22;
            --dev-surface2:   #1c2128;
            --dev-border:     #30363d;
            --dev-border2:    #21262d;
            --dev-text:       #e6edf3;
            --dev-text-muted: #7d8590;
            --dev-accent:     #58a6ff;   /* GitHub-style blue */
            --dev-accent2:    #3fb950;   /* GitHub-style green */
            --dev-warn:       #d29922;
            --dev-danger:     #f85149;
            --dev-purple:     #bc8cff;
            --dev-rose:       #D4A28C;   /* Brand rose gold */
            --mono:           'JetBrains Mono', monospace;
            --sans:           'Inter', system-ui, sans-serif;
        }

        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        html, body { height: 100%; background: var(--dev-bg); color: var(--dev-text); font-family: var(--sans); }

        /* ── Layout Shell ── */
        .dev-shell {
            display: flex;
            height: 100vh;
            overflow: hidden;
        }

        /* ── Sidebar ── */
        .dev-sidebar {
            width: 240px;
            min-width: 240px;
            background: var(--dev-surface);
            border-right: 1px solid var(--dev-border);
            display: flex;
            flex-direction: column;
            height: 100%;
            overflow-y: auto;
        }

        .dev-sidebar-brand {
            padding: 1.25rem 1rem;
            border-bottom: 1px solid var(--dev-border2);
        }

        .dev-sidebar-brand .brand-label {
            font-family: var(--mono);
            font-size: 0.625rem;
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--dev-accent);
            margin-bottom: 0.25rem;
        }

        .dev-sidebar-brand .brand-title {
            font-size: 0.875rem;
            font-weight: 700;
            color: var(--dev-text);
        }

        .dev-sidebar-brand .brand-badge {
            display: inline-block;
            margin-top: 0.375rem;
            padding: 0.125rem 0.5rem;
            background: rgba(88, 166, 255, 0.1);
            border: 1px solid rgba(88, 166, 255, 0.3);
            border-radius: 4px;
            font-family: var(--mono);
            font-size: 0.5625rem;
            color: var(--dev-accent);
        }

        .dev-sidebar-section {
            padding: 0.75rem 0.5rem 0.25rem;
        }

        .dev-sidebar-section-label {
            font-family: var(--mono);
            font-size: 0.5625rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--dev-text-muted);
            padding: 0 0.5rem;
            margin-bottom: 0.375rem;
        }

        .dev-nav-link {
            display: flex;
            align-items: center;
            gap: 0.625rem;
            padding: 0.5rem 0.75rem;
            border-radius: 6px;
            font-size: 0.8125rem;
            font-weight: 500;
            text-decoration: none;
            color: var(--dev-text-muted);
            transition: background 0.15s, color 0.15s;
            margin-bottom: 2px;
        }

        .dev-nav-link:hover {
            background: rgba(255, 255, 255, 0.05);
            color: var(--dev-text);
        }

        .dev-nav-link.active {
            background: rgba(88, 166, 255, 0.1);
            color: var(--dev-accent);
            border-left: 2px solid var(--dev-accent);
        }

        .dev-nav-link .nav-icon {
            width: 1rem;
            text-align: center;
            font-size: 0.8125rem;
        }

        .dev-nav-coming {
            display: flex;
            align-items: center;
            gap: 0.625rem;
            padding: 0.5rem 0.75rem;
            border-radius: 6px;
            font-size: 0.8125rem;
            font-weight: 500;
            color: #444c56;
            cursor: not-allowed;
            margin-bottom: 2px;
        }

        .coming-badge {
            margin-left: auto;
            font-family: var(--mono);
            font-size: 0.5rem;
            font-weight: 700;
            padding: 0.1rem 0.35rem;
            border-radius: 3px;
            background: rgba(255,255,255,0.05);
            color: var(--dev-text-muted);
            border: 1px solid var(--dev-border);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .dev-sidebar-footer {
            margin-top: auto;
            padding: 0.75rem 0.5rem;
            border-top: 1px solid var(--dev-border2);
        }

        /* ── Main Content ── */
        .dev-main {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            height: 100%;
        }

        /* ── Topbar ── */
        .dev-topbar {
            height: 56px;
            min-height: 56px;
            background: var(--dev-surface);
            border-bottom: 1px solid var(--dev-border);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 1.5rem;
        }

        .dev-topbar-path {
            font-family: var(--mono);
            font-size: 0.75rem;
            color: var(--dev-text-muted);
            display: flex;
            align-items: center;
            gap: 0.375rem;
        }

        .dev-topbar-path .sep { color: #444c56; }
        .dev-topbar-path .current { color: var(--dev-accent); }

        .dev-topbar-right {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .dev-topbar-tag {
            font-family: var(--mono);
            font-size: 0.6rem;
            font-weight: 700;
            padding: 0.2rem 0.5rem;
            border-radius: 4px;
            background: rgba(63, 185, 80, 0.1);
            border: 1px solid rgba(63, 185, 80, 0.3);
            color: var(--dev-accent2);
            text-transform: uppercase;
            letter-spacing: 0.075em;
        }

        /* ── Content Area ── */
        .dev-content {
            flex: 1;
            overflow-y: auto;
            padding: 2rem;
            background: var(--dev-bg);
        }

        /* ── Cards ── */
        .dev-card {
            background: var(--dev-surface);
            border: 1px solid var(--dev-border);
            border-radius: 8px;
            overflow: hidden;
        }

        .dev-card-header {
            padding: 0.875rem 1.25rem;
            border-bottom: 1px solid var(--dev-border2);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .dev-card-title {
            font-family: var(--mono);
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--dev-text);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .dev-card-body { padding: 1.25rem; }

        /* ── Status Badges ── */
        .badge-ok {
            display: inline-flex; align-items: center; gap: 0.3rem;
            padding: 0.2rem 0.6rem; border-radius: 4px;
            font-family: var(--mono); font-size: 0.625rem; font-weight: 700;
            background: rgba(63,185,80,0.1); border: 1px solid rgba(63,185,80,0.3);
            color: var(--dev-accent2); text-transform: uppercase;
        }
        .badge-warn {
            display: inline-flex; align-items: center; gap: 0.3rem;
            padding: 0.2rem 0.6rem; border-radius: 4px;
            font-family: var(--mono); font-size: 0.625rem; font-weight: 700;
            background: rgba(210,153,34,0.1); border: 1px solid rgba(210,153,34,0.3);
            color: var(--dev-warn); text-transform: uppercase;
        }
        .badge-err {
            display: inline-flex; align-items: center; gap: 0.3rem;
            padding: 0.2rem 0.6rem; border-radius: 4px;
            font-family: var(--mono); font-size: 0.625rem; font-weight: 700;
            background: rgba(248,81,73,0.1); border: 1px solid rgba(248,81,73,0.3);
            color: var(--dev-danger); text-transform: uppercase;
        }
        .badge-soon {
            display: inline-flex; align-items: center; gap: 0.3rem;
            padding: 0.2rem 0.6rem; border-radius: 4px;
            font-family: var(--mono); font-size: 0.625rem; font-weight: 700;
            background: rgba(188,140,255,0.08); border: 1px solid rgba(188,140,255,0.2);
            color: var(--dev-purple); text-transform: uppercase;
        }
        .badge-dev {
            display: inline-flex; align-items: center; gap: 0.3rem;
            padding: 0.2rem 0.6rem; border-radius: 4px;
            font-family: var(--mono); font-size: 0.625rem; font-weight: 700;
            background: rgba(212,162,140,0.12); border: 1px solid rgba(212,162,140,0.3);
            color: var(--dev-rose); text-transform: uppercase;
        }
        .badge-busy {
            display: inline-flex; align-items: center; gap: 0.3rem;
            padding: 0.2rem 0.6rem; border-radius: 4px;
            font-family: var(--mono); font-size: 0.625rem; font-weight: 700;
            background: rgba(88,166,255,0.12); border: 1px solid rgba(88,166,255,0.3);
            color: var(--dev-accent); text-transform: uppercase;
        }

        /* ── Data Table ── */
        .dev-table { width: 100%; border-collapse: collapse; }
        .dev-table th {
            font-family: var(--mono); font-size: 0.5625rem; font-weight: 700;
            text-transform: uppercase; letter-spacing: 0.075em;
            color: var(--dev-text-muted); text-align: left;
            padding: 0.625rem 1rem; background: var(--dev-surface2);
            border-bottom: 1px solid var(--dev-border);
        }
        .dev-table td {
            padding: 0.625rem 1rem; border-bottom: 1px solid var(--dev-border2);
            font-size: 0.8125rem; color: var(--dev-text);
            vertical-align: middle;
        }
        .dev-table tr:last-child td { border-bottom: none; }
        .dev-table tr:hover td { background: rgba(255,255,255,0.02); }
        .dev-table td.mono { font-family: var(--mono); font-size: 0.75rem; }
        .dev-table td.muted { color: var(--dev-text-muted); }

        /* ── Feature Card ── */
        .dev-feature-card {
            background: var(--dev-surface);
            border: 1px solid var(--dev-border);
            border-radius: 10px;
            padding: 1.5rem;
            text-decoration: none;
            color: inherit;
            display: block;
            transition: border-color 0.2s, transform 0.15s;
            position: relative;
            overflow: hidden;
        }
        .dev-feature-card:hover:not(.disabled) {
            border-color: var(--dev-accent);
            transform: translateY(-2px);
        }
        .dev-feature-card.disabled { cursor: default; opacity: 0.6; }
        .dev-feature-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--dev-accent), var(--dev-purple));
            opacity: 0;
            transition: opacity 0.2s;
        }
        .dev-feature-card:hover:not(.disabled)::before { opacity: 1; }

        .dev-feature-icon {
            font-size: 1.5rem;
            margin-bottom: 0.75rem;
            color: var(--dev-accent);
        }
        .dev-feature-title {
            font-size: 0.9375rem;
            font-weight: 700;
            color: var(--dev-text);
            margin-bottom: 0.25rem;
        }
        .dev-feature-desc {
            font-size: 0.75rem;
            color: var(--dev-text-muted);
            line-height: 1.5;
        }

        /* ── Metric Stat ── */
        .dev-stat-label {
            font-family: var(--mono);
            font-size: 0.5625rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--dev-text-muted);
            margin-bottom: 0.375rem;
        }
        .dev-stat-value {
            font-family: var(--mono);
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--dev-text);
        }
        .dev-stat-sub {
            font-size: 0.6875rem;
            color: var(--dev-text-muted);
            margin-top: 0.125rem;
        }

        /* ── Info Row ── */
        .dev-info-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.625rem 0;
            border-bottom: 1px solid var(--dev-border2);
            font-size: 0.8125rem;
        }
        .dev-info-row:last-child { border-bottom: none; }
        .dev-info-row .label {
            font-family: var(--mono);
            font-size: 0.6875rem;
            color: var(--dev-text-muted);
        }
        .dev-info-row .value {
            font-family: var(--mono);
            font-size: 0.8125rem;
            color: var(--dev-text);
        }

        /* ── Progress Bar ── */
        .dev-progress-track {
            background: var(--dev-border2);
            border-radius: 4px;
            height: 6px;
            overflow: hidden;
        }
        .dev-progress-fill {
            height: 100%;
            border-radius: 4px;
            background: linear-gradient(90deg, var(--dev-accent2), var(--dev-accent));
            transition: width 0.6s ease;
        }

        /* ── Section Heading ── */
        .dev-section-title {
            font-family: var(--mono);
            font-size: 0.6875rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--dev-text-muted);
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid var(--dev-border2);
        }
    </style>

    <?php if (isset($extraHead)) echo $extraHead; ?>
</head>
<body>
<div class="dev-shell" x-data="{}">

    <!-- ── Developer Console Sidebar ── -->
    <aside class="dev-sidebar">
        <!-- Brand -->
        <div class="dev-sidebar-brand">
            <div class="brand-label">INVEETAIRE</div>
            <div class="brand-title">Developer Console</div>
            <span class="brand-badge">DX003 v1.0.0</span>
        </div>

        <!-- Core Navigation -->
        <div class="dev-sidebar-section">
            <div class="dev-sidebar-section-label">Console</div>
            <a href="<?= url('/app/developer') ?>" class="<?= $navActive('console') ?>">
                <span class="nav-icon"><i class="fa-solid fa-terminal"></i></span>
                Dashboard
            </a>
        </div>

        <div class="dev-sidebar-section">
            <div class="dev-sidebar-section-label">Database</div>
            <a href="<?= url('/app/developer/database') ?>" class="<?= $navActive('database') ?>">
                <span class="nav-icon"><i class="fa-solid fa-database"></i></span>
                Connection & Info
            </a>
            <a href="<?= url('/app/developer/schema') ?>" class="<?= $navActive('schema') ?>">
                <span class="nav-icon"><i class="fa-solid fa-file-code"></i></span>
                Schema Docs
            </a>
        </div>

        <div class="dev-sidebar-section">
            <div class="dev-sidebar-section-label">Supabase Mirror</div>
            <a href="<?= url('/app/developer/supabase') ?>" class="<?= $navActive('supabase') ?>">
                <span class="nav-icon"><i class="fa-solid fa-cloud"></i></span>
                Supabase Inspector
            </a>
            <a href="<?= url('/app/developer/inspector') ?>" class="<?= $navActive('inspector') ?>">
                <span class="nav-icon"><i class="fa-solid fa-table"></i></span>
                DB Inspector
            </a>
            <a href="<?= url('/app/developer/mapping') ?>" class="<?= $navActive('mapping') ?>">
                <span class="nav-icon"><i class="fa-solid fa-diagram-project"></i></span>
                Type Mapping
            </a>
            <a href="<?= url('/app/developer/sync') ?>" class="<?= $navActive('sync') ?>">
                <span class="nav-icon"><i class="fa-solid fa-arrows-rotate"></i></span>
                Synchronization
            </a>
            <a href="<?= url('/app/developer/sync/log') ?>" class="<?= $navActive('sync_log') ?>">
                <span class="nav-icon"><i class="fa-solid fa-clock-rotate-left"></i></span>
                Sync Log
            </a>
        </div>

        <div class="dev-sidebar-section">
            <div class="dev-sidebar-section-label">System Diagnostics</div>
            <a href="<?= url('/app/developer/health') ?>" class="<?= $navActive('health') ?>">
                <span class="nav-icon"><i class="fa-solid fa-heartbeat"></i></span>
                System Health
            </a>
            <a href="<?= url('/app/developer/logs') ?>" class="<?= $navActive('logs') ?>">
                <span class="nav-icon"><i class="fa-solid fa-scroll"></i></span>
                Log Center
            </a>
            <a href="<?= url('/app/developer/info') ?>" class="<?= $navActive('info') ?>">
                <span class="nav-icon"><i class="fa-solid fa-circle-info"></i></span>
                Application Info
            </a>
        </div>

        <!-- Sidebar Footer -->
        <div class="dev-sidebar-footer">
            <a href="<?= url('/app/admin/dashboard') ?>" class="dev-nav-link" style="color: var(--dev-rose);">
                <span class="nav-icon"><i class="fa-solid fa-arrow-left"></i></span>
                Back to Admin Portal
            </a>
        </div>
    </aside>

    <!-- ── Main Content ── -->
    <div class="dev-main">
        <!-- Topbar -->
        <header class="dev-topbar">
            <div class="dev-topbar-path">
                <span style="color: var(--dev-rose);">inveetaire</span>
                <span class="sep">/</span>
                <span>app</span>
                <span class="sep">/</span>
                <span>developer</span>
                <?php if ($activePage && $activePage !== 'console'): ?>
                    <span class="sep">/</span>
                    <span class="current"><?= escape_html($activePage) ?></span>
                <?php endif; ?>
            </div>
            <div class="dev-topbar-right">
                <span class="dev-topbar-tag">● Connected</span>
                <span style="font-family: var(--mono); font-size: 0.6875rem; color: var(--dev-text-muted);">
                    <?= date('Y-m-d H:i') ?> UTC+7
                </span>
            </div>
        </header>

        <!-- Page Content -->
        <main class="dev-content">
            <?= $content ?>
        </main>
    </div>

</div>

<script src="<?= asset('/assets/js/alpinejs.min.js') ?>" defer></script>
<?php if (isset($extraScripts)) echo $extraScripts; ?>
</body>
</html>
