<?php
if (session_status() === PHP_SESSION_NONE) { session_start(); }
require 'config/db.php';

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

try {
    // ১. আপনার দেওয়া কলাম (msg, type, user_id) অনুযায়ী ডাটা ফেচ
    // গ্লোবাল নোটিফিকেশন (user_id IS NULL) এবং ইউজারের নিজস্ব নোটিফিকেশন আনা হচ্ছে
    $stmt = $pdo->prepare("SELECT id, msg, type, created_at FROM notifications WHERE user_id = ? OR user_id IS NULL ORDER BY created_at DESC");
    $stmt->execute([$user_id]);
    $notifications = $stmt->fetchAll(PDO::FETCH_ASSOC);

    // ২. ক্লিয়ার অল বাটন চাপলে ডিলিট করার লজিক (ঐচ্ছিক কিন্তু কার্যকরী)
    if (isset($_GET['clear_all'])) {
        $clear_stmt = $pdo->prepare("DELETE FROM notifications WHERE user_id = ?");
        $clear_stmt->execute([$user_id]);
        header("Location: notifications.php");
        exit();
    }

} catch (PDOException $e) { 
    error_log($e->getMessage());
    $notifications = [];
}
?>

<!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>Notifications - Ludo Pro</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@600;700&display=swap" rel="stylesheet">
    <style>
        body { background: #020617; color: #f1f5f9; font-family: 'Rajdhani', sans-serif; background-image: radial-gradient(circle at 50% 0%, #1e1b4b 0%, #020617 70%); }
        .glass-card { background: rgba(30, 41, 59, 0.4); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.05); }
        
        /* টাইপ অনুযায়ী কালার স্কিম */
        .icon-info { color: #3b82f6; background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.2); }
        .icon-success { color: #10b981; background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.2); }
        .icon-warning { color: #f59e0b; background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.2); }
        .icon-danger { color: #ef4444; background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2); }
    </style>
</head>
<body class="pb-10 antialiased">

    <header class="p-5 flex justify-between items-center sticky top-0 z-40 bg-[#020617]/80 backdrop-blur-md border-b border-white/5">
        <button onclick="history.back()" class="w-10 h-10 rounded-xl glass-card flex items-center justify-center text-slate-300 active:scale-90 transition">
            <i class="fas fa-chevron-left"></i>
        </button>
        <h2 class="text-xl font-bold tracking-widest uppercase">Notifications</h2>
        <a href="?clear_all=1" onclick="return confirm('Clear all notifications?')" class="text-slate-500 text-[10px] font-bold uppercase tracking-tighter hover:text-red-400">Clear All</a>
    </header>

    <div class="max-w-md mx-auto px-5 py-6 space-y-4">
        
        <?php if (empty($notifications)): ?>
            <div class="flex flex-col items-center justify-center py-32 opacity-20">
                <i class="fas fa-bell-slash text-6xl mb-4"></i>
                <p class="text-lg font-bold">Inbox is Empty</p>
                <p class="text-xs uppercase tracking-widest">No updates found</p>
            </div>
        <?php else: ?>
            
            <?php foreach ($notifications as $note): ?>
                <?php 
                    // আপনার SQL 'type' কলাম অনুযায়ী আইকন ও ক্লাস সেট
                    $icon = 'fa-bell';
                    $color_class = 'icon-info';
                    
                    switch($note['type']) {
                        case 'success': $icon = 'fa-check-circle'; $color_class = 'icon-success'; break;
                        case 'warning': $icon = 'fa-exclamation-triangle'; $color_class = 'icon-warning'; break;
                        case 'danger':  $icon = 'fa-circle-xmark'; $color_class = 'icon-danger'; break;
                        case 'offer':   $icon = 'fa-gift'; $color_class = 'icon-info'; break;
                    }
                ?>
                
                <div class="glass-card p-4 rounded-3xl flex items-center gap-4 relative overflow-hidden transition active:scale-[0.98]">
                    
                    <div class="w-12 h-12 rounded-2xl flex-shrink-0 flex items-center justify-center text-xl <?= $color_class ?>">
                        <i class="fas <?= $icon ?>"></i>
                    </div>

                    <div class="flex-1">
                        <p class="text-[13px] text-slate-200 leading-snug mb-1 font-medium">
                            <?= htmlspecialchars($note['msg']) ?> </p>
                        <div class="flex items-center gap-2">
                            <span class="text-[9px] font-bold text-slate-500 uppercase tracking-widest">
                                <i class="far fa-clock mr-1"></i> <?= date('h:i A | d M', strtotime($note['created_at'])) ?>
                            </span>
                            <span class="text-[8px] px-2 py-0.5 rounded bg-white/5 text-slate-400 uppercase"><?= $note['type'] ?></span>
                        </div>
                    </div>

                </div>
            <?php endforeach; ?>

        <?php endif; ?>

        <div class="mt-10 p-6 rounded-3xl border border-dashed border-white/10 text-center">
            <p class="text-xs text-slate-500 mb-3 font-medium">Missing something or need help?</p>
            <a href="support.php" class="inline-block px-6 py-2 rounded-full bg-blue-600/10 text-blue-400 text-[10px] font-bold uppercase tracking-widest border border-blue-500/20 hover:bg-blue-600 hover:text-white transition">
                Contact Support
            </a>
        </div>

    </div>

</body>
</html>