<?php
if (!function_exists('appHeaderEscape')) {
    function appHeaderEscape($value) {
        return htmlspecialchars((string)$value, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8');
    }
}

if (!function_exists('renderAppHeaderStyles')) {
    function renderAppHeaderStyles() {
        return <<<'CSS'
        .app-header {
            background: linear-gradient(135deg, #29648D 0%, #29648D 100%);
            color: #fff;
            padding: 18px 34px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 18px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-bottom: 24px;
        }

        .app-brand {
            color: #fff;
            text-decoration: none;
            font-size: 1.35rem;
            font-weight: 800;
            line-height: 1.2;
            min-width: 230px;
        }

        .app-header-actions {
            min-width: 0;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 10px;
            flex-wrap: wrap;
        }

        .app-user-chip {
            max-width: 280px;
            min-width: 0;
            background: rgba(255,255,255,0.2);
            color: #fff;
            padding: 8px 14px;
            border-radius: 999px;
            font-size: 0.9rem;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .app-user-icon {
            flex: 0 0 auto;
        }

        .app-user-name {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .app-nav {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 10px;
            flex-wrap: wrap;
        }

        .app-nav-link {
            min-height: 40px;
            padding: 10px 18px;
            border-radius: 999px;
            background: #fff;
            color: #29648D;
            border: 2px solid #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            text-decoration: none;
            font-size: 0.9rem;
            font-weight: 700;
            line-height: 1.1;
            transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
        }

        .app-nav-link:hover {
            transform: translateY(-1px);
            box-shadow: 0 5px 15px rgba(255,255,255,0.22);
        }

        .app-nav-link.is-active {
            background: rgba(255,255,255,0.18);
            color: #fff;
            border-color: rgba(255,255,255,0.55);
        }

        .app-nav-link.app-logout {
            background: transparent;
            color: #fff;
            border-color: #fff;
        }

        @media (max-width: 900px) {
            .app-header {
                align-items: stretch;
                flex-direction: column;
                padding: 16px;
            }

            .app-brand {
                min-width: 0;
                text-align: center;
            }

            .app-header-actions {
                align-items: stretch;
                flex-direction: column;
                justify-content: center;
            }

            .app-user-chip {
                max-width: none;
                justify-content: center;
            }

            .app-nav {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
                width: 100%;
            }

            .app-nav-link {
                width: 100%;
                padding: 10px 12px;
            }
        }

        @media (max-width: 420px) {
            .app-header {
                padding: 14px 12px;
                margin-bottom: 16px;
            }

            .app-brand {
                font-size: 1.08rem;
            }

            .app-nav {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 8px;
            }

            .app-nav-link {
                font-size: 0.84rem;
            }
        }
CSS;
    }
}

if (!function_exists('renderAppHeader')) {
    function renderAppHeader($user, $activePage = '') {
        $displayName = $user['full_name'] ?? $user['username'] ?? $user['email'] ?? 'Usuario';
        $items = [
            ['key' => 'firma', 'href' => './', 'label' => 'Firmar'],
            ['key' => 'perfil', 'href' => 'profile', 'label' => 'Perfil'],
            ['key' => 'panel', 'href' => 'dashboard', 'label' => 'Panel'],
            ['key' => 'suscripcion', 'href' => 'subscription', 'label' => 'Suscripcion'],
        ];
        ?>
        <header class="app-header">
            <a class="app-brand" href="./">Firmador Codex Documentos PDF</a>
            <div class="app-header-actions">
                <span class="app-user-chip" title="<?php echo appHeaderEscape($displayName); ?>">
                    <span class="app-user-icon" aria-hidden="true">&#128100;</span>
                    <span class="app-user-name"><?php echo appHeaderEscape($displayName); ?></span>
                </span>
                <nav class="app-nav" aria-label="Navegacion principal">
                    <?php foreach ($items as $item): ?>
                        <?php $isActive = $activePage === $item['key']; ?>
                        <a
                            class="app-nav-link <?php echo $isActive ? 'is-active' : ''; ?>"
                            href="<?php echo appHeaderEscape($item['href']); ?>"
                            <?php echo $isActive ? 'aria-current="page"' : ''; ?>
                        >
                            <?php echo appHeaderEscape($item['label']); ?>
                        </a>
                    <?php endforeach; ?>
                    <a class="app-nav-link app-logout" href="logout">Salir</a>
                </nav>
            </div>
        </header>
        <?php
    }
}
