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

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

$pageTitle = 'Profile';
$activePage = 'profile';

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

// Get user info
$stmt = $db->prepare("SELECT * FROM users WHERE id = ?");
$stmt->execute([$userId]);
$user = $stmt->fetch();

// Get stats
$stmt = $db->prepare("SELECT COUNT(*) FROM messages WHERE sender_id = ?");
$stmt->execute([$userId]);
$messagesSent = $stmt->fetchColumn();

$stmt = $db->prepare("SELECT COUNT(*) FROM messages WHERE receiver_id = ?");
$stmt->execute([$userId]);
$messagesReceived = $stmt->fetchColumn();

// Get total chats
$stmt = $db->prepare("
    SELECT COUNT(DISTINCT CASE WHEN sender_id = ? THEN receiver_id ELSE sender_id END) 
    FROM messages WHERE sender_id = ? OR receiver_id = ?
");
$stmt->execute([$userId, $userId, $userId]);
$totalChats = $stmt->fetchColumn();

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">
            <h2 class="text-slate-900 dark:text-slate-100 text-xl font-bold leading-tight tracking-tight">Profile</h2>
        </div>
        <a href="settings.php" class="flex size-10 items-center justify-center rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 hover:bg-slate-200 transition-colors">
            <span class="material-symbols-outlined">settings</span>
        </a>
    </header>

    <main class="flex-1 overflow-y-auto no-scrollbar pb-24">
        <!-- Profile Header -->
        <div class="p-6 text-center border-b border-slate-200 dark:border-slate-800">
            <div class="relative inline-block mb-4">
                <?php if ($user['profile_photo']): ?>
                <div class="bg-center bg-no-repeat aspect-square bg-cover rounded-full h-24 w-24 border-4 border-primary/20 mx-auto" style="background-image: url('uploads/images/<?php echo htmlspecialchars($user['profile_photo']); ?>')"></div>
                <?php else: ?>
                <div class="size-24 rounded-full bg-primary/10 flex items-center justify-center border-4 border-primary/20 mx-auto">
                    <span class="material-symbols-outlined text-4xl text-primary">person</span>
                </div>
                <?php endif; ?>
                <a href="edit-profile.php" class="absolute bottom-0 right-0 size-8 bg-primary text-white rounded-full flex items-center justify-center shadow-lg">
                    <span class="material-symbols-outlined text-sm">edit</span>
                </a>
            </div>
            <h1 class="text-xl font-bold text-slate-900 dark:text-white mb-1"><?php echo htmlspecialchars($user['name']); ?></h1>
            <p class="text-slate-500 dark:text-slate-400 text-sm">@<?php echo htmlspecialchars($user['unique_id']); ?></p>
            
            <!-- Quick Stats -->
            <div class="flex justify-center gap-8 mt-6">
                <div class="text-center">
                    <p class="text-xl font-bold text-slate-900 dark:text-white"><?php echo $totalChats; ?></p>
                    <p class="text-xs text-slate-500">Chats</p>
                </div>
                <div class="text-center">
                    <p class="text-xl font-bold text-slate-900 dark:text-white"><?php echo $messagesSent; ?></p>
                    <p class="text-xs text-slate-500">Sent</p>
                </div>
                <div class="text-center">
                    <p class="text-xl font-bold text-slate-900 dark:text-white"><?php echo $messagesReceived; ?></p>
                    <p class="text-xs text-slate-500">Received</p>
                </div>
            </div>
        </div>

        <!-- Info Section -->
        <div class="p-4">
            <h3 class="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-3">Information</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 gap-3 p-4 border-b border-slate-100 dark:border-slate-700/50">
                    <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">email</span>
                    </div>
                    <div class="flex-1">
                        <p class="text-xs text-slate-500">Email</p>
                        <p class="text-sm font-medium text-slate-900 dark:text-white"><?php echo htmlspecialchars($user['email']); ?></p>
                    </div>
                </div>
                <div class="flex items-center gap-3 p-4 border-b border-slate-100 dark:border-slate-700/50">
                    <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">smartphone</span>
                    </div>
                    <div class="flex-1">
                        <p class="text-xs text-slate-500">Mobile</p>
                        <p class="text-sm font-medium text-slate-900 dark:text-white"><?php echo htmlspecialchars($user['mobile']); ?></p>
                    </div>
                </div>
                <div class="flex items-center gap-3 p-4">
                    <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">calendar_today</span>
                    </div>
                    <div class="flex-1">
                        <p class="text-xs text-slate-500">Joined</p>
                        <p class="text-sm font-medium text-slate-900 dark:text-white"><?php echo date('F j, Y', strtotime($user['created_at'])); ?></p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Account Section -->
        <div class="p-4">
            <h3 class="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-3">Account</h3>
            <div class="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 overflow-hidden">
                <a href="edit-profile.php" class="flex items-center justify-between p-4 border-b border-slate-100 dark:border-slate-700/50 hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors">
                    <div class="flex items-center gap-3">
                        <span class="material-symbols-outlined text-slate-500">edit</span>
                        <span class="text-slate-900 dark:text-white">Edit Profile</span>
                    </div>
                    <span class="material-symbols-outlined text-slate-400">chevron_right</span>
                </a>
                <a href="change-password.php" class="flex items-center justify-between p-4 border-b border-slate-100 dark:border-slate-700/50 hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors">
                    <div class="flex items-center gap-3">
                        <span class="material-symbols-outlined text-slate-500">lock</span>
                        <span class="text-slate-900 dark:text-white">Change Password</span>
                    </div>
                    <span class="material-symbols-outlined text-slate-400">chevron_right</span>
                </a>
                <a href="privacy-settings.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">
                        <span class="material-symbols-outlined text-slate-500">security</span>
                        <span class="text-slate-900 dark:text-white">Privacy Settings</span>
                    </div>
                    <span class="material-symbols-outlined text-slate-400">chevron_right</span>
                </a>
            </div>
        </div>

        <!-- My Unique ID -->
        <div class="p-4">
            <div class="bg-gradient-to-r from-primary/10 to-blue-500/10 rounded-xl p-4 border border-primary/20">
                <div class="flex items-center gap-2 mb-2">
                    <span class="material-symbols-outlined text-primary">badge</span>
                    <p class="font-medium text-slate-900 dark:text-white">Your Unique ID</p>
                </div>
                <div class="bg-white/50 dark:bg-slate-800/50 rounded-lg p-3 mb-3">
                    <p class="text-xl font-mono font-bold text-primary text-center"><?php echo htmlspecialchars($user['unique_id']); ?></p>
                </div>
                <p class="text-xs text-slate-600 dark:text-slate-400 mb-3">Share this ID so friends can find you</p>
                <button onclick="copyToClipboard('<?php echo htmlspecialchars($user['unique_id']); ?>')" class="w-full py-2 bg-primary text-white rounded-lg font-medium hover:bg-primary/90 transition-colors">
                    Copy ID
                </button>
            </div>
        </div>

        <!-- Logout -->
        <div class="p-4">
            <a href="logout.php" class="flex items-center justify-center gap-2 p-4 bg-red-50 dark:bg-red-900/10 text-red-600 rounded-xl hover:bg-red-100 dark:hover:bg-red-900/20 transition-colors">
                <span class="material-symbols-outlined">logout</span>
                <span class="font-medium">Logout</span>
            </a>
        </div>

        <!-- App Info -->
        <div class="text-center py-6">
            <p class="text-xs text-slate-400"><?php echo APP_NAME; ?> v1.0</p>
            <p class="text-xs text-slate-400">Secure Private Messaging</p>
        </div>
    </main>
</div>

<script>
    function copyToClipboard(text) {
        navigator.clipboard.writeText(text);
        showToast('ID copied to clipboard', 'success');
    }
</script>

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