<?php
// customer/includes/header.php
// Unified header for all customer pages
if (session_status() === PHP_SESSION_NONE) {
    session_start();
}

if(!isset($_SESSION['customer_id'])) {
    header('Location: ../login.php');
    exit;
}

require_once '../config/database.php';
$database = new Database();
$db = $database->getConnection();

// Get customer info
$customer_query = "SELECT first_name, last_name FROM customers WHERE id = :id";
$customer_stmt = $db->prepare($customer_query);
$customer_stmt->execute([':id' => $_SESSION['customer_id']]);
$customer = $customer_stmt->fetch(PDO::FETCH_ASSOC);

// Get unread notifications count if not already set
if (!isset($notifCount)) {
    $notif_count_query = "SELECT COUNT(*) as count FROM notifications 
                          WHERE customer_id = :id AND is_read = 0";
    $notif_count_stmt = $db->prepare($notif_count_query);
    $notif_count_stmt->execute([':id' => $_SESSION['customer_id']]);
    $notifCount = (int)($notif_count_stmt->fetch(PDO::FETCH_ASSOC)['count'] ?? 0);
}

// Get recent notifications for dropdown
$recent_notifs_query = "SELECT * FROM notifications 
                        WHERE customer_id = :id 
                        ORDER BY created_at DESC 
                        LIMIT 5";
$recent_notifs_stmt = $db->prepare($recent_notifs_query);
$recent_notifs_stmt->execute([':id' => $_SESSION['customer_id']]);
$recent_notifications = $recent_notifs_stmt->fetchAll(PDO::FETCH_ASSOC);

$customerName = htmlspecialchars($customer['first_name'] . ' ' . $customer['last_name'], ENT_QUOTES, 'UTF-8');
$customerInitials = strtoupper(substr($customer['first_name'], 0, 1) . substr($customer['last_name'], 0, 1));

// Keep logout path stable even when the header is reused.
$customerLogoutUrl = 'logout.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title><?= htmlspecialchars($pageTitle ?? 'Customer Portal', ENT_QUOTES, 'UTF-8') ?> - USHS</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <link rel="stylesheet" href="../assets/theme.css">
    <link rel="stylesheet" href="../assets/portal-dark.css">
    <link rel="stylesheet" href="../assets/ushs-global-theme.css">
    <link rel="stylesheet" href="../assets/ushs-header.css">
</head>
<body>

<!-- ===== USHS Unified Customer Header ===== -->
<header class="ushs-header app-header">
    <!-- Back button -->
    <button class="ushs-header__back-btn back-btn" onclick="history.back()" aria-label="Go back">
        <i class="fas fa-arrow-left"></i>
    </button>

    <!-- Brand -->
    <a class="ushs-header__brand" href="dashboard.php" style="text-decoration:none;">
        <div class="ushs-header__logo">
            <img src="../assets/icons/ushs.avif" alt="USHS"
                 onerror="this.style.display='none';this.parentNode.innerHTML='<i class=\'fas fa-home\' style=\'font-size:16px;\'></i>'">
        </div>
        <div class="ushs-header__brand-text">
            <span class="ushs-header__brand-name">US In Home Services</span>
            <span class="ushs-header__brand-sub">Customer Portal</span>
        </div>
    </a>

    <span class="ushs-header__title"><?= htmlspecialchars($pageTitle ?? 'My Dashboard', ENT_QUOTES, 'UTF-8') ?></span>

    <!-- Actions -->
    <div class="ushs-header__actions">
        <!-- Notifications -->
        <div class="dropdown">
            <button class="ushs-header__icon-btn notification-btn" data-bs-toggle="dropdown" aria-label="Notifications">
                <i class="fas fa-bell"></i>
                <?php if($notifCount > 0): ?>
                    <span class="ushs-header__badge"><?= $notifCount ?></span>
                <?php endif; ?>
            </button>
            <div class="dropdown-menu dropdown-menu-end ushs-notif-panel">
                <div class="dropdown-header">
                    <span>Notifications</span>
                    <a href="notifications.php" style="font-size:.75rem;">View all</a>
                </div>
                <?php if(empty($recent_notifications)): ?>
                    <div style="padding:16px;text-align:center;color:oklch(0.72 0.02 260);font-size:.8rem;">
                        <i class="fas fa-bell-slash mb-2" style="font-size:1.4rem;"></i>
                        <p class="mb-0">No notifications yet</p>
                    </div>
                <?php else: ?>
                    <?php foreach($recent_notifications as $notif): ?>
                        <a class="notif-item <?= $notif['is_read'] ? '' : 'unread' ?>"
                           href="open_notification.php?id=<?= (int)$notif['id'] ?>">
                            <div class="notif-icon" style="background:oklch(0.62 0.22 255 / 0.14);">
                                <i class="fas <?= match($notif['type']) {
                                    'success' => 'fa-check-circle',
                                    'warning' => 'fa-exclamation-triangle',
                                    'danger'  => 'fa-times-circle',
                                    default   => 'fa-info-circle',
                                } ?>" style="color:oklch(0.62 0.22 255);"></i>
                            </div>
                            <div class="notif-body">
                                <strong><?= htmlspecialchars($notif['title'], ENT_QUOTES, 'UTF-8') ?></strong>
                                <small><?= htmlspecialchars($notif['message'], ENT_QUOTES, 'UTF-8') ?></small>
                            </div>
                        </a>
                    <?php endforeach; ?>
                    <div style="padding:10px 12px;border-top:1px solid rgba(96,165,250,.18);text-align:center;">
                        <a href="notifications.php" style="font-weight:800;font-size:.82rem;text-decoration:none;">
                            View All Notifications
                        </a>
                    </div>
                <?php endif; ?>
            </div>
        </div>

        <!-- Messages -->
        <a href="messages.php" class="ushs-header__icon-btn" title="Messages">
            <i class="fas fa-comment-dots"></i>
        </a>

        <!-- User chip -->
        <div class="dropdown">
            <div class="ushs-header__user" data-bs-toggle="dropdown" aria-expanded="false">
                <div class="ushs-header__avatar">
                    <?= $customerInitials ?>
                </div>
                <div class="ushs-header__user-info">
                    <span class="ushs-header__user-name"><?= $customerName ?></span>
                    <span class="ushs-header__user-role">Customer</span>
                </div>
                <i class="fas fa-chevron-down ushs-header__user-chevron"></i>
            </div>
            <div class="dropdown-menu dropdown-menu-end">
                <a class="dropdown-item" href="profile.php"><i class="fas fa-user me-2"></i> My Profile</a>
                <a class="dropdown-item" href="my_requests.php"><i class="fas fa-clipboard-list me-2"></i> My Requests</a>
                <a class="dropdown-item" href="notifications.php"><i class="fas fa-bell me-2"></i> Notifications</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="<?= htmlspecialchars($customerLogoutUrl, ENT_QUOTES, 'UTF-8') ?>" style="color:var(--cm-red, #ef4444)!important;" onclick="return confirm('Log out of Customer Portal?');"><i class="fas fa-sign-out-alt me-2"></i> Logout</a>
            </div>
        </div>
    </div>
</header>
