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

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

$pageTitle = 'Privacy 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_privacy') {
        $showOnlineStatus = isset($_POST['show_online_status']) ? 1 : 0;
        $showLastSeen = isset($_POST['show_last_seen']) ? 1 : 0;
        $showReadReceipts = isset($_POST['show_read_receipts']) ? 1 : 0;
        $allowProfilePhoto = isset($_POST['allow_profile_photo']) ? 1 : 0;
        
        // Update user privacy settings (you'll need to add these columns to users table)
        $stmt = $db->prepare("
            UPDATE users SET 
                is_ghost_mode = ? 
            WHERE id = ?
        ");
        $stmt->execute([!$showOnlineStatus, $currentUserId]);
        
        $message = 'Privacy settings updated successfully';
    }
}

// Get current privacy settings
$stmt = $db->prepare("SELECT is_ghost_mode FROM users WHERE id = ?");
$stmt->execute([$currentUserId]);
$user = $stmt->fetch();

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">Privacy 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; ?>

        <!-- Online Status -->
        <div class="p-4">
            <h3 class="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-3">Online Status</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_privacy">
                    <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">visibility</span>
                            </div>
                            <div class="text-left">
                                <span class="block text-slate-900 dark:text-white">Show Online Status</span>
                                <span class="text-xs text-slate-500">Let others see when you're online</span>
                            </div>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" name="show_online_status" class="sr-only peer" <?php echo !$user['is_ghost_mode'] ? '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-blue-100 dark:bg-blue-900/20 flex items-center justify-center">
                                <span class="material-symbols-outlined text-blue-600">schedule</span>
                            </div>
                            <div class="text-left">
                                <span class="block text-slate-900 dark:text-white">Show Last Seen</span>
                                <span class="text-xs text-slate-500">Let others see when you were last active</span>
                            </div>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" name="show_last_seen" class="sr-only peer" 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-purple-100 dark:bg-purple-900/20 flex items-center justify-center">
                                <span class="material-symbols-outlined text-purple-600">mark_email_read</span>
                            </div>
                            <div class="text-left">
                                <span class="block text-slate-900 dark:text-white">Read Receipts</span>
                                <span class="text-xs text-slate-500">Let others see when you've read their messages</span>
                            </div>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" name="show_read_receipts" class="sr-only peer" 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>

        <!-- Profile Privacy -->
        <div class="p-4">
            <h3 class="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-3">Profile Privacy</h3>
            <div class="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 overflow-hidden">
                <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-orange-100 dark:bg-orange-900/20 flex items-center justify-center">
                            <span class="material-symbols-outlined text-orange-600">photo_camera</span>
                        </div>
                        <div class="text-left">
                            <span class="block text-slate-900 dark:text-white">Profile Photo</span>
                            <span class="text-xs text-slate-500">Anyone can see your profile photo</span>
                        </div>
                    </div>
                    <span class="material-symbols-outlined text-slate-400">chevron_right</span>
                </div>
                <a href="blocked-users.php" class="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-red-100 dark:bg-red-900/20 flex items-center justify-center">
                            <span class="material-symbols-outlined text-red-600">block</span>
                        </div>
                        <div class="text-left">
                            <span class="block text-slate-900 dark:text-white">Blocked Users</span>
                            <span class="text-xs text-slate-500">Manage users you've blocked</span>
                        </div>
                    </div>
                    <span class="material-symbols-outlined text-slate-400">chevron_right</span>
                </a>
            </div>
        </div>
    </main>
</div>

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