<?php
/**
 * include/header_auth_strip.php
 * Before login: Search + Login button (dark text)
 * After login:  Search + My Frontiers + Avatar (white text)
 */
if (session_status() === PHP_SESSION_NONE) session_start();

$isLoggedIn = !empty($_SESSION['user_id']);
$firstName  = $_SESSION['first_name'] ?? '';
$lastName   = $_SESSION['last_name']  ?? '';

if ($isLoggedIn && !$firstName) {
    if (!isset($pdo)) include_once __DIR__ . '/../config/db_new.php';
    try {
        $q = $pdo->prepare("SELECT first_name, last_name FROM users WHERE user_id=? LIMIT 1");
        $q->execute([$_SESSION['user_id']]);
        $u = $q->fetch(PDO::FETCH_ASSOC);
        $firstName = $u['first_name'] ?? '';
        $lastName  = $u['last_name']  ?? '';
        $_SESSION['first_name'] = $firstName;
        $_SESSION['last_name']  = $lastName;
    } catch(Exception $e) {}
}

$userName     = trim($firstName . ' ' . $lastName);
$userInitials = strtoupper(substr($firstName,0,1) . substr($lastName,0,1)) ?: 'U';

$loginUrl     = '/author/login.php';
$projectsUrl  = '/author/projects.php';   // My Frontiers click
$dashboardUrl = '/author/dashboard.php';  // Avatar click
$logoutUrl    = '/author/logout.php';
?>
<style>
.icon-strip { display:flex; align-items:center; gap:10px; }

/* ── LOGGED-OUT: Search & Login (dark on white header) ── */
.icon-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #1e293b;
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    padding: 4px 2px;
    transition: color .15s;
}
.icon-btn:hover { color: #0f172a; text-decoration: none; }
.icon-btn .icon-label { font-size: 13.5px; }

.auth-login-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 18px;
    border: 1.5px solid #c0c8d4;
    border-radius: 20px;
    color: #1e293b;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    background: transparent;
    transition: all .2s;
    white-space: nowrap;
}
.auth-login-btn:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #0f172a;
    text-decoration: none;
}
.auth-login-btn i { font-size: 15px; }

/* ── LOGGED-IN: My Frontiers & Avatar (white on dark header) ── */
.mf-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #fff;
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    padding: 5px 2px;
    transition: opacity .15s;
    white-space: nowrap;
}
.mf-link:hover { opacity: .8; color: #fff; text-decoration: none; }
.mf-link i { font-size: 15px; }

.auth-av {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.25);
    border: 2px solid rgba(255,255,255,.5);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .2s, border-color .2s;
    user-select: none;
    text-decoration: none;
    letter-spacing: .5px;
}
.auth-av:hover {
    background: rgba(255,255,255,.35);
    border-color: #fff;
    color: #fff;
}

/* ── Dropdown ── */
.auth-wrap { position:relative; display:inline-flex; align-items:center; }
.auth-dd {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,.18);
    border: 1px solid #e5e7eb;
    min-width: 195px;
    z-index: 9999;
    padding: 6px 0;
}
.auth-dd.open { display:block; animation:adrop .15s ease; }
@keyframes adrop { from{opacity:0;transform:translateY(-5px)} to{opacity:1;transform:translateY(0)} }

.auth-dd-hdr {
    padding: 11px 16px 9px;
    border-bottom: 1px solid #f3f4f6;
    margin-bottom: 3px;
}
.auth-dd-name { font-size: 13px; font-weight: 700; color: #1e293b; line-height: 1.3; }
.auth-dd-role { font-size: 11px; color: #94a3b8; margin-top: 2px; }

.auth-dd a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 16px;
    font-size: 13px;
    color: #374151;
    text-decoration: none;
    transition: background .1s;
    font-weight: 500;
}
.auth-dd a:hover { background: #f8fafc; color: #111; text-decoration: none; }
.auth-dd a i { width: 15px; text-align: center; font-size: 12.5px; color: #64748b; }
.auth-dd-sep { border-top: 1px solid #f3f4f6; margin: 4px 0; }
.auth-dd a.dd-danger { color: #dc2626; }
.auth-dd a.dd-danger:hover { background: #fef2f2; }
.auth-dd a.dd-danger i { color: #dc2626; }
</style>

<div class="icon-strip">

    <!-- Search (always visible) -->
    <a href="#" class="icon-btn">
        <i class="bi bi-search"></i>
        <span class="icon-label"> Search</span>
    </a>

    <?php if ($isLoggedIn): ?>
    <!-- ── LOGGED IN ── -->
    <a href="<?= $projectsUrl ?>" class="mf-link">
        <i class="bi bi-card-list"></i>
        <span class="icon-label"> My Frontiers</span>
    </a>

    <div class="auth-wrap" id="authWrap">
        <div class="auth-av" id="authAvBtn"
             onclick="toggleAuthDD(event)"
             title="<?= htmlspecialchars($userName) ?>">
            <?= htmlspecialchars($userInitials) ?>
        </div>
        <div class="auth-dd" id="authDD">
            <div class="auth-dd-hdr">
                <div class="auth-dd-name"><?= htmlspecialchars($userName ?: 'User') ?></div>
                <div class="auth-dd-role">Author</div>
            </div>
            <a href="<?= $dashboardUrl ?>">
                <i class="bi bi-grid-1x2"></i> Dashboard
            </a>
            <a href="<?= $projectsUrl ?>">
                <i class="bi bi-file-earmark-text"></i> My Submissions
            </a>
            <a href="<?= $dashboardUrl ?>">
                <i class="bi bi-person-circle"></i> Profile
            </a>
            <div class="auth-dd-sep"></div>
            <a href="<?= $logoutUrl ?>" class="dd-danger">
                <i class="bi bi-box-arrow-right"></i> Sign out
            </a>
        </div>
    </div>

    <?php else: ?>
    <!-- ── NOT LOGGED IN ── -->
    <a href="<?= $loginUrl ?>" class="auth-login-btn">
        <i class="bi bi-person"></i>
    </a>
    <?php endif; ?>

</div>

<script>
(function(){
    function toggleAuthDD(e){
        e.preventDefault(); e.stopPropagation();
        document.getElementById('authDD')?.classList.toggle('open');
    }
    window.toggleAuthDD = toggleAuthDD;
    document.addEventListener('click', function(e){
        const w = document.getElementById('authWrap');
        if (w && !w.contains(e.target)) {
            document.getElementById('authDD')?.classList.remove('open');
        }
    });
})();
</script>