<?php
require_once 'includes/init.php';

if (!isAuthenticated()) {
    redirect(APP_URL . '/login.php');
}

$pageTitle = 'Notification Settings';
$activePage = 'settings';
$hideBottomNav = true;

$db = getDB();
$currentUserId = $_SESSION['user_id'];

// Handle form submissions
$message = '';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $action = $_POST['action'] ?? '';
    
    if ($action === 'update_notifications') {
        $messageNotifications = isset($_POST['message_notifications']) ? 1 : 0;
        $soundEnabled = isset($_POST['sound_enabled']) ? 1 : 0;
        $vibrationEnabled = isset($_POST['vibration_enabled']) ? 1 : 0;
        $desktopNotifications = isset($_POST['desktop_notifications']) ? 1 : 0;
        
        // Save notification preferences (you'll need to create a notification_preferences table)
        $stmt = $db->prepare("
            INSERT INTO notification_preferences (user_id, message_notifications, sound_enabled, vibration_enabled, desktop_notifications)
            VALUES (?, ?, ?, ?, ?)
            ON DUPLICATE KEY UPDATE 
                message_notifications = VALUES(message_notifications),
                sound_enabled = VALUES(sound_enabled),
                vibration_enabled = VALUES(vibration_enabled),
                desktop_notifications = VALUES(desktop_notifications)
        ");
        $stmt->execute([$currentUserId, $messageNotifications, $soundEnabled, $vibrationEnabled, $desktopNotifications]);
        
        $message = 'Notification settings updated successfully';
    }
}

// Get current notification preferences
$stmt = $db->prepare("
    SELECT message_notifications, sound_enabled, vibration_enabled, desktop_notifications 
    FROM notification_preferences 
    WHERE user_id = ?
");
$stmt->execute([$currentUserId]);
$preferences = $stmt->fetch();

// Default values if not set
if (!$preferences) {
    $preferences = [
        'message_notifications' => 1,
        'sound_enabled' => 1,
        'vibration_enabled' => 1,
        'desktop_notifications' => 0
    ];
}

include 'includes/header.php';
?>

<div class="relative flex h-screen w-full flex-col overflow-hidden bg-background-light dark:bg-background-dark max-w-md mx-auto">
    <!-- Header -->
    <header class="flex items-center bg-background-light dark:bg-background-dark p-4 border-b border-slate-200 dark:border-slate-800 sticky top-0 z-10">
        <div class="flex items-center gap-3 flex-1">
            <a href="settings.php" class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors">
                <span class="material-symbols-outlined">arrow_back</span>
            </a>
            <h2 class="text-slate-900 dark:text-slate-100 text-xl font-bold">Notification Settings</h2>
        </div>
    </header>

    <main class="flex-1 overflow-y-auto no-scrollbar pb-24">
        <?php if ($message): ?>
        <div class="m-4 bg-green-100 dark:bg-green-900/20 border border-green-200 dark:border-green-800 text-green-700 dark:text-green-400 px-4 py-3 rounded-xl text-sm">
            <?php echo $message; ?>
        </div>
        <?php endif; ?>

        <!-- Message Notifications -->
        <div class="p-4">
            <h3 class="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-3">Messages</h3>
            <div class="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 overflow-hidden">
                <form method="POST" action="">
                    <input type="hidden" name="action" value="update_notifications">
                    <div class="flex items-center justify-between p-4 border-b border-slate-100 dark:border-slate-700/50">
                        <div class="flex items-center gap-3">
                            <div class="size-10 rounded-full bg-blue-100 dark:bg-blue-900/20 flex items-center justify-center">
                                <span class="material-symbols-outlined text-blue-600">chat</span>
                            </div>
                            <div class="text-left">
                                <span class="block text-slate-900 dark:text-white">Message Notifications</span>
                                <span class="text-xs text-slate-500">Get notified for new messages</span>
                            </div>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" name="message_notifications" class="sr-only peer" <?php echo $preferences['message_notifications'] ? 'checked' : ''; ?>>
                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
                        </label>
                    </div>
                    <div class="flex items-center justify-between p-4 border-b border-slate-100 dark:border-slate-700/50">
                        <div class="flex items-center gap-3">
                            <div class="size-10 rounded-full bg-green-100 dark:bg-green-900/20 flex items-center justify-center">
                                <span class="material-symbols-outlined text-green-600">volume_up</span>
                            </div>
                            <div class="text-left">
                                <span class="block text-slate-900 dark:text-white">Sound</span>
                                <span class="text-xs text-slate-500">Play sound for notifications</span>
                            </div>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" name="sound_enabled" class="sr-only peer" <?php echo $preferences['sound_enabled'] ? 'checked' : ''; ?>>
                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
                        </label>
                    </div>
                    <div class="flex items-center justify-between p-4 border-b border-slate-100 dark:border-slate-700/50">
                        <div class="flex items-center gap-3">
                            <div class="size-10 rounded-full bg-purple-100 dark:bg-purple-900/20 flex items-center justify-center">
                                <span class="material-symbols-outlined text-purple-600">vibration</span>
                            </div>
                            <div class="text-left">
                                <span class="block text-slate-900 dark:text-white">Vibration</span>
                                <span class="text-xs text-slate-500">Vibrate for notifications (mobile)</span>
                            </div>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" name="vibration_enabled" class="sr-only peer" <?php echo $preferences['vibration_enabled'] ? 'checked' : ''; ?>>
                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
                        </label>
                    </div>
                    <div class="flex items-center justify-between p-4">
                        <div class="flex items-center gap-3">
                            <div class="size-10 rounded-full bg-orange-100 dark:bg-orange-900/20 flex items-center justify-center">
                                <span class="material-symbols-outlined text-orange-600">desktop_windows</span>
                            </div>
                            <div class="text-left">
                                <span class="block text-slate-900 dark:text-white">Desktop Notifications</span>
                                <span class="text-xs text-slate-500">Show browser notifications</span>
                            </div>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" name="desktop_notifications" class="sr-only peer" <?php echo $preferences['desktop_notifications'] ? 'checked' : ''; ?>>
                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
                        </label>
                    </div>
                    <div class="p-4 border-t border-slate-100 dark:border-slate-700/50">
                        <button type="submit" class="w-full bg-primary text-white py-2.5 rounded-xl hover:bg-primary/90 transition-colors font-medium">
                            Save Settings
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Test Notifications -->
        <div class="p-4">
            <h3 class="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-3">Test</h3>
            <div class="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 overflow-hidden">
                <button onclick="testNotification()" class="w-full flex items-center justify-between p-4 hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors">
                    <div class="flex items-center gap-3">
                        <div class="size-10 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center">
                            <span class="material-symbols-outlined text-slate-500">notifications_active</span>
                        </div>
                        <div class="text-left">
                            <span class="block text-slate-900 dark:text-white">Test Notification</span>
                            <span class="text-xs text-slate-500">Send a test notification</span>
                        </div>
                    </div>
                    <span class="material-symbols-outlined text-slate-400">chevron_right</span>
                </button>
            </div>
        </div>
    </main>
</div>

<script>
function testNotification() {
    if ('Notification' in window) {
        Notification.requestPermission().then(permission => {
            if (permission === 'granted') {
                new Notification('QuickRe Test', {
                    body: 'This is a test notification from QuickRe!',
                    icon: '/assets/icon-192x192.png',
                    badge: '/assets/icon-192x192.png'
                });
                showToast('Test notification sent!', 'success');
            } else {
                showToast('Please enable browser notifications', 'error');
            }
        });
    } else {
        showToast('Browser notifications not supported', 'error');
    }
}
</script>

<?php include 'includes/footer.php'; ?>
