<?php
/**
 * Componente: Header com Perfil e Saldo (Estilo Kiwify)
 * 
 * Este componente exibe a foto de perfil e o saldo total no header
 * Pode ser usado tanto no painel admin quanto no painel usuário
 */

// Garantir que as dependências estão carregadas
if (!function_exists('obter_dados_header_usuario')) {
    require_once __DIR__ . '/../../backend/header_helper.php';
}

// Obter dados do usuário
$dados_usuario = obter_dados_header_usuario();

if (!$dados_usuario) {
    return; // Se não houver usuário logado, não exibe nada
}

$foto_perfil = $dados_usuario['foto_perfil'];
$nome_usuario = htmlspecialchars($dados_usuario['nome']);
$saldo_formatado = $dados_usuario['saldo_formatado'];
?>

<style>
    /* Estilo Kiwify para Perfil e Saldo no Header */
    .header-perfil-saldo {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px 16px;
        background: var(--bg-card, #ffffff);
        border-radius: 50px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
    }
    
    [data-theme="dark"] .header-perfil-saldo {
        background: var(--bg-card, #0f172a);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }
    
    .header-perfil-saldo:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        transform: translateY(-1px);
    }
    
    .header-foto-perfil {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid var(--border-color, rgba(0, 0, 0, 0.1));
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: 600;
        font-size: 16px;
        flex-shrink: 0;
    }
    
    .header-foto-perfil img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
    }
    
    .header-saldo {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 2px;
    }
    
    .header-saldo-label {
        font-size: 10px;
        color: var(--text-muted, #6b7280);
        text-transform: uppercase;
        font-weight: 600;
        letter-spacing: 0.5px;
    }
    
    .header-saldo-valor {
        font-size: 16px;
        font-weight: 700;
        color: var(--text-main, #1f2937);
        line-height: 1;
    }
    
    [data-theme="dark"] .header-saldo-valor {
        color: var(--text-main, #ffffff);
    }
    
    /* Responsivo */
    @media (max-width: 768px) {
        .header-perfil-saldo {
            padding: 6px 12px;
            gap: 8px;
        }
        
        .header-foto-perfil {
            width: 35px;
            height: 35px;
            font-size: 14px;
        }
        
        .header-saldo-valor {
            font-size: 14px;
        }
        
        .header-saldo-label {
            font-size: 9px;
        }
    }
</style>

<div class="header-perfil-saldo">
    <div class="header-foto-perfil">
        <?php if (!empty($foto_perfil)): ?>
            <?php 
            // Ajustar caminho da imagem se necessário
            $foto_path = $foto_perfil;
            if (strpos($foto_path, 'public/') === 0) {
                $foto_path = '/' . $foto_path;
            } elseif (strpos($foto_path, '/') !== 0) {
                $foto_path = '/' . $foto_path;
            }
            ?>
            <img src="<?= htmlspecialchars($foto_path) ?>" alt="<?= $nome_usuario ?>" onerror="this.parentElement.innerHTML='<?= strtoupper(substr($nome_usuario, 0, 1)) ?>'">
        <?php else: ?>
            <?= strtoupper(substr($nome_usuario, 0, 1)) ?>
        <?php endif; ?>
    </div>
    
    <div class="header-saldo">
        <div class="header-saldo-label">Saldo</div>
        <div class="header-saldo-valor"><?= $saldo_formatado ?></div>
    </div>
</div>

