<?php
require 'config.php';
require_login();

$user_id = $_SESSION['user_id'];

// Handle profile update
if(is_post()){
    verify_csrf();
    $name = trim($_POST['name'] ?? '');
    $password = trim($_POST['password'] ?? '');

    if($name){
        $stmt = $pdo->prepare("UPDATE users SET name=? WHERE id=?");
        $stmt->execute([$name,$user_id]);
    }

    if($password){
        $hash = password_hash($password,PASSWORD_DEFAULT);
        $stmt = $pdo->prepare("UPDATE users SET password=? WHERE id=?");
        $stmt->execute([$hash,$user_id]);
    }

    set_flash("প্রোফাইল সফলভাবে আপডেট হয়েছে।","success");
    redirect('profile.php');
}

// Fetch current user
$stmt = $pdo->prepare("SELECT name, email, created_at, balance FROM users WHERE id=?");
$stmt->execute([$user_id]);
$user = $stmt->fetch();

require_once 'header.php';
?>

<style>
/* ========== MODERN DARK THEME UPDATE ========== */
:root {
    --brand-color: #230133; /* আপনার দেওয়া নতুন কালার */
    --brand-hover: #3b0354;
    --brand-soft: #f4eef7;
    --bg-light: #f8f9fa;
    --card-white: #ffffff;
    --text-dark: #230133;
    --text-muted: #6b7280;
    --border-color: #e5e7eb;
}

body {
    background-color: var(--bg-light);
    font-family: 'Hind Siliguri', 'Inter', sans-serif;
}

/* Profile Card Area */
.profile-wrapper {
    max-width: 850px;
    margin: 40px auto;
}

.profile-card {
    background: var(--card-white);
    border: none;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(35, 1, 51, 0.08);
    overflow: hidden;
}

/* Header Section */
.profile-banner {
    background: var(--brand-color);
    background: linear-gradient(135deg, #230133 0%, #4a026b 100%);
    height: 140px;
}

.profile-info-header {
    padding: 0 30px 30px;
    margin-top: -60px;
    text-align: center;
}

.avatar-wrapper {
    position: relative;
    display: inline-block;
}

.profile-avatar {
    width: 120px;
    height: 120px;
    background: white;
    border-radius: 50%;
    border: 6px solid white;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: 700;
    color: var(--brand-color);
}

.name-title {
    margin-top: 15px;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-dark);
}

.email-subtitle {
    color: var(--text-muted);
    font-size: 1rem;
    margin-bottom: 20px;
}

/* Stats Cards */
.stat-pill {
    background: var(--brand-soft);
    border: 1px solid #e9dcfc;
    padding: 12px;
    border-radius: 15px;
    text-align: center;
    transition: 0.3s;
}

.stat-pill:hover {
    background: #ede1f9;
}

.stat-label {
    font-size: 0.7rem;
    color: var(--brand-color);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.stat-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: #000;
}

/* Form Styling */
.form-container {
    padding: 40px;
    border-top: 1px solid #f3f4f6;
}

.custom-label {
    font-weight: 600;
    color: var(--text-dark);
    font-size: 0.95rem;
    margin-bottom: 10px;
}

.custom-input {
    background: #fdfdfd;
    border: 1.5px solid var(--border-color);
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.custom-input:focus {
    border-color: var(--brand-color);
    box-shadow: 0 0 0 4px rgba(35, 1, 51, 0.1);
    outline: none;
}

.btn-update {
    background: var(--brand-color);
    color: white;
    padding: 14px 30px;
    border-radius: 12px;
    font-weight: 700;
    border: none;
    transition: 0.3s;
    width: 100%;
    margin-top: 10px;
}

.btn-update:hover {
    background: var(--brand-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(35, 1, 51, 0.2);
}

.btn-update i {
    font-size: 1.1rem;
}

/* Responsive Fixes */
@media (max-width: 768px) {
    .profile-wrapper { margin: 20px 15px; }
    .form-container { padding: 25px; }
    .profile-banner { height: 110px; }
}
</style>

<div class="container profile-wrapper">
    <div class="row">
        <div class="col-12">
            
            <?php show_flash(); ?>

            <div class="profile-card">
                <div class="profile-banner"></div>

                <div class="profile-info-header">
                    <div class="avatar-wrapper">
                        <div class="profile-avatar">
                            <?php echo strtoupper(substr($user['name'], 0, 1)); ?>
                        </div>
                    </div>
                    <h2 class="name-title"><?php echo htmlspecialchars($user['name']); ?></h2>
                    <p class="email-subtitle"><?php echo htmlspecialchars($user['email']); ?></p>

                    <div class="row g-3 mt-2 justify-content-center">
                        <div class="col-6 col-md-4">
                            <div class="stat-pill shadow-sm">
                                <div class="stat-label"><i class="fas fa-wallet me-1"></i> ব্যালেন্স</div>
                                <div class="stat-value">৳ <?php echo number_format($user['balance'], 2); ?></div>
                            </div>
                        </div>
                        <div class="col-6 col-md-4">
                            <div class="stat-pill shadow-sm">
                                <div class="stat-label"><i class="fas fa-calendar-alt me-1"></i> সদস্য তারিখ</div>
                                <div class="stat-value"><?php echo date('d M Y', strtotime($user['created_at'])); ?></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-container">
                    <div class="d-flex align-items-center mb-4">
                        <div style="width: 4px; height: 20px; background: var(--brand-color); margin-right: 10px; border-radius: 10px;"></div>
                        <h5 class="mb-0 fw-bold">প্রোফাইল আপডেট করুন</h5>
                    </div>

                    <form method="post" autocomplete="off">
                        <?php csrf_field(); ?>
                        
                        <div class="row">
                            <div class="col-md-6 mb-4">
                                <label class="custom-label">আপনার নাম</label>
                                <input type="text" name="name" class="form-control custom-input" 
                                       value="<?php echo htmlspecialchars($user['name']); ?>" required>
                            </div>
                            <div class="col-md-6 mb-4">
                                <label class="custom-label">ইমেইল এড্রেস</label>
                                <input type="email" class="form-control custom-input" 
                                       value="<?php echo htmlspecialchars($user['email']); ?>" disabled>
                                <small class="text-muted"><i class="fas fa-info-circle mt-1"></i> ইমেইল পরিবর্তন করা সম্ভব নয়।</small>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12 mb-4">
                                <label class="custom-label">নতুন পাসওয়ার্ড (পরিবর্তন করতে চাইলে)</label>
                                <input type="password" name="password" id="password" class="form-control custom-input" 
                                       placeholder="পাসওয়ার্ড লিখুন..." oninput="checkStrength(this.value)">
                                
                                <div class="progress mt-3" style="height: 8px; border-radius: 10px; background: #eee;">
                                    <div id="pw-fill" class="progress-bar" role="progressbar" style="width: 0%"></div>
                                </div>
                                <div class="d-flex justify-content-between mt-1">
                                    <small id="pw-text" class="fw-bold" style="font-size: 0.75rem;"></small>
                                    <small class="text-muted" style="font-size: 0.7rem;">ন্যূনতম ৬ অক্ষর</small>
                                </div>
                            </div>
                        </div>

                        <div class="mt-2">
                            <button type="submit" class="btn-update shadow">
                                <i class="fas fa-save me-2"></i> প্রোফাইল সেভ করুন
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <div class="mt-4 text-center">
                <p class="text-muted small">সহযোগিতা প্রয়োজন? <a href="contact.php" class="text-decoration-none fw-bold" style="color: var(--brand-color);">সাপোর্ট টিমের সাথে যোগাযোগ করুন</a></p>
            </div>

        </div>
    </div>
</div>

<script>
function checkStrength(password) {
    const bar = document.getElementById('pw-fill');
    const text = document.getElementById('pw-text');
    let strength = 0;
    
    if (password.length === 0) { 
        bar.style.width = '0%'; 
        text.innerHTML = ''; 
        return; 
    }
    
    if (password.length >= 6) strength++;
    if (password.match(/[a-z]/) && password.match(/[A-Z]/)) strength++;
    if (password.match(/\d/)) strength++;
    if (password.match(/[^a-zA-Z\d]/)) strength++;

    const colors = ['#ff4d4d', '#ffa502', '#230133', '#2ed573']; 
    const labels = ['দুর্বল (Weak)', 'মোটামুটি (Medium)', 'শক্তিশালী (Strong)', 'অত্যন্ত শক্তিশালী'];
    
    const index = Math.min(strength, 4) - 1;
    
    bar.style.width = ((strength / 4) * 100) + '%';
    bar.style.backgroundColor = colors[index] || colors[0];
    text.innerHTML = labels[index] || labels[0];
    text.style.color = colors[index] || colors[0];
}
</script>

<?php require_once 'footer.php'; ?>