<?php
$namaUser = session()->get('nama') ?? session()->get('username') ?? 'Pengguna';
$idRole = (int) session()->get('id_role');
$roleText = $idRole === 1 ? 'Super Admin' : ($idRole === 2 ? 'Owner' : ($idRole === 3 ? 'Admin' : 'Pengguna'));
$initials = strtoupper(substr(trim($namaUser), 0, 1));
$dashboardUrl = $idRole === 1 ? base_url('superadmin/dashboard') : ($idRole === 3 ? base_url('admin/dashboard') : base_url('owner/dashboard'));
$settingsUrl = $idRole === 1 ? base_url('superadmin/profile') : ($idRole === 2 ? base_url('owner/setting') : base_url('auth/profile'));
?>

<style>
    /* ===== Topbar Themes Sync Tokens ===== */
    :root {
        --tb-bg: #ffffff;
        --tb-border: #e2e8f0;
        --tb-text: #0f172a;
        --tb-text-sub: #64748b;
        --tb-dropdown-bg: #ffffff;
        --tb-hover: #f1f5f9;
    }

    @media (prefers-color-scheme: dark) {
        :root {
            --tb-bg: #1e293b;
            --tb-border: #334155;
            --tb-text: #f8fafc;
            --tb-text-sub: #94a3b8;
            --tb-dropdown-bg: #1e293b;
            --tb-hover: #151f32;
        }
    }

    [data-bs-theme="dark"] {
        --tb-bg: #1e293b;
        --tb-border: #334155;
        --tb-text: #f8fafc;
        --tb-text-sub: #94a3b8;
        --tb-dropdown-bg: #1e293b;
        --tb-hover: #151f32;
    }

    /* Apply styles safely targeting layout context */
    header.topbar {
        background-color: var(--tb-bg) !important;
        border-bottom: 1px solid var(--tb-border) !important;
        color: var(--tb-text) !important;
        padding: 0.75rem 1.5rem;
        transition: all 0.2s ease;
    }

    header.topbar .fw-semibold {
        color: var(--tb-text) !important;
    }

    header.topbar .text-secondary,
    header.topbar .bi-calendar3,
    header.topbar .bi-chevron-down {
        color: var(--tb-text-sub) !important;
    }

    header.topbar .btn-icon {
        color: var(--tb-text) !important;
        background: transparent;
        transition: all 0.15s ease;
    }
    header.topbar .btn-icon:hover {
        background-color: var(--tb-hover);
        color: var(--tb-text) !important;
    }

    /* Adaptive Dropdown Styling */
    header.topbar .dropdown-menu {
        background-color: var(--tb-dropdown-bg) !important;
        border: 1px solid var(--tb-border) !important;
    }

    header.topbar .dropdown-item {
        color: var(--tb-text) !important;
        transition: all 0.15s ease;
    }

    header.topbar .dropdown-item:hover {
        background-color: var(--tb-hover) !important;
        color: var(--tb-text) !important;
    }

    header.topbar .dropdown-item.text-danger {
        color: #ef4444 !important;
    }
    header.topbar .dropdown-item.text-danger:hover {
        background-color: rgba(239, 68, 68, 0.08) !important;
    }

    header.topbar .dropdown-divider {
        border-color: var(--tb-border) !important;
        opacity: 0.6;
    }

    /* Custom dynamically changing class to completely replace bootstrap text-dark */
    header.topbar .user-name-text {
        color: var(--tb-text) !important;
    }
</style>

<header class="topbar">
    <div class="d-flex align-items-center gap-3 min-w-0">
        <button type="button" class="btn btn-icon d-flex align-items-center justify-content-center" id="sidebarToggle" aria-label="Buka atau tutup menu" title="Buka atau tutup menu">
            <i class="bi bi-layout-sidebar-inset fs-5"></i>
        </button>
        <div class="page-context">
            <div class="small text-secondary">Sistem Informasi ERP</div>
            <div class="fw-semibold">Ruang kerja</div>
        </div>
    </div>
    
    <div class="ms-auto d-flex align-items-center gap-2 gap-sm-3">
        <!-- Tanggal Hari Ini -->
        <div class="d-none d-lg-flex align-items-center gap-2 small text-secondary me-1">
            <i class="bi bi-calendar3"></i>
            <span><?= date('d M Y') ?></span>
        </div>
        
        <!-- ===== TOMBOL SWITCHER TEMA (DARK / LIGHT / AUTO) ===== -->
        <div class="dropdown">
            <button class="btn btn-icon d-flex align-items-center justify-content-center border-0" type="button" id="themeDropdown" data-bs-toggle="dropdown" aria-expanded="false" title="Ubah Mode Tema">
                <i class="bi bi-circle-half fs-5" id="themeDropdownIcon"></i>
            </button>
            <ul class="dropdown-menu dropdown-menu-end shadow border-0 mt-2" aria-labelledby="themeDropdown" style="min-width: 170px;">
                <li>
                    <button class="dropdown-item d-flex align-items-center py-2" type="button" data-theme-value="light" onclick="ThemeEngine.setTheme('light')">
                        <i class="bi bi-sun-fill text-warning me-2 fs-6"></i>
                        <span>Terang</span>
                    </button>
                </li>
                <li>
                    <button class="dropdown-item d-flex align-items-center py-2" type="button" data-theme-value="dark" onclick="ThemeEngine.setTheme('dark')">
                        <i class="bi bi-moon-stars-fill text-primary me-2 fs-6"></i>
                        <span>Gelap</span>
                    </button>
                </li>
                <li><hr class="dropdown-divider my-1"></li>
                <li>
                    <button class="dropdown-item d-flex align-items-center py-2" type="button" data-theme-value="auto" onclick="ThemeEngine.setTheme('auto')">
                        <i class="bi bi-circle-half text-secondary me-2 fs-6"></i>
                        <span>Auto (Sistem)</span>
                    </button>
                </li>
            </ul>
        </div>
        <!-- ======================================================= -->

        <!-- Dropdown Profil Pengguna -->
        <div class="dropdown">
            <button class="btn border-0 p-0 d-flex align-items-center gap-2 text-start" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                <span class="rounded-circle text-white fw-bold d-inline-flex align-items-center justify-content-center" style="width:40px;height:40px;background:#2563eb">
                    <?= esc($initials) ?>
                </span>
                <span class="profile-copy d-flex flex-column lh-sm">
                    <span class="fw-semibold small user-name-text"><?= esc($namaUser) ?></span>
                    <span class="text-secondary" style="font-size:.72rem"><?= esc($roleText) ?></span>
                </span>
                <i class="bi bi-chevron-down small text-secondary"></i>
            </button>
            
            <ul class="dropdown-menu dropdown-menu-end shadow border-0 mt-2" style="min-width:220px">
                <li>
                    <div class="px-3 py-2">
                        <div class="fw-semibold user-name-text"><?= esc($namaUser) ?></div>
                        <div class="small text-secondary"><?= esc($roleText) ?></div>
                    </div>
                </li>
                <li><hr class="dropdown-divider"></li>
                <li>
                    <a class="dropdown-item py-2" href="<?= esc($settingsUrl) ?>">
                        <i class="bi bi-person-gear me-2 text-secondary"></i>Profil & pengaturan
                    </a>
                </li>
                <li>
                    <a class="dropdown-item py-2" href="<?= esc($dashboardUrl) ?>">
                        <i class="bi bi-grid me-2 text-secondary"></i>Dashboard
                    </a>
                </li>
                <li><hr class="dropdown-divider"></li>
                <li>
                    <a class="dropdown-item py-2 text-danger" href="<?= base_url('logout') ?>">
                        <i class="bi bi-box-arrow-right me-2"></i>Keluar
                    </a>
                </li>
            </ul>
        </div>
    </div>
</header>