<?php
session_start();
$page_title = 'Your Profile';
$active_nav = 'profile';
include("includes/header.php");
$uid = (int)$_SESSION['user_id'];

$stmt = $conn->prepare("SELECT * FROM users WHERE id=?");
$stmt->bind_param("i", $uid);
$stmt->execute();
$u = $stmt->get_result()->fetch_assoc();

$avatar_path = $u['avatar'] ? 'uploads/avatars/' . $u['avatar'] : '';
$has_avatar  = $avatar_path && file_exists(__DIR__ . '/' . $avatar_path);
?>

<style>
/* Settings page — self-contained styling so it always renders correctly
   even if a stale shared stylesheet is served. */
.app-topbar { display: none; }
.main-content { padding-top: calc(env(safe-area-inset-top) + 6px); }

.pf-wrap { max-width: 600px; margin: 0 auto; }

.sub-topbar { display: flex; align-items: center; justify-content: space-between; padding: 4px 2px 18px; }
.sub-topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sub-topbar .sub-back { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--primary); background: var(--primary-bg); flex-shrink: 0; touch-action: manipulation; }
.sub-topbar .sub-title { font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.sub-topbar-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.sub-topbar .icon-btn { color: var(--primary); }

.profile-card { background: #fff; border-radius: 20px; padding: 30px 24px 26px; text-align: center; margin-bottom: 26px; box-shadow: 0 4px 18px rgba(15,23,42,.06); border: 1px solid var(--border); }
.profile-avatar-wrap { position: relative; width: 92px; height: 92px; margin: 0 auto 16px; }
.profile-avatar { width: 92px; height: 92px; border-radius: 50%; overflow: hidden; background: var(--primary); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 4px var(--primary-bg); }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-avatar .pa-initials { color: #fff; font-size: 1.7rem; font-weight: 800; }
.profile-edit-btn { position: absolute; right: -2px; bottom: -2px; width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: #fff; border: 3px solid #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; touch-action: manipulation; padding: 0; }
.profile-edit-btn:active { background: var(--primary-dark); }
.profile-card h2 { font-size: 1.2rem; font-weight: 800; margin-bottom: 3px; letter-spacing: -.02em; color: var(--text); }
.profile-card p { font-size: .86rem; color: var(--text-muted); word-break: break-word; }

.settings-group-title { font-size: 1.02rem; font-weight: 800; letter-spacing: -.02em; margin: 24px 0 12px; color: var(--text); }
.settings-card { background: #fff; border-radius: 16px; box-shadow: 0 4px 18px rgba(15,23,42,.06); border: 1px solid var(--border); overflow: hidden; margin-bottom: 4px; }
.settings-row { display: flex; align-items: center; gap: 14px; padding: 15px 16px; text-decoration: none; color: var(--text); border-bottom: 1px solid var(--border); touch-action: manipulation; background: none; width: 100%; text-align: left; font-family: var(--font); cursor: pointer; font-size: .92rem; }
.settings-row:last-child { border-bottom: none; }
.settings-row:active { background: var(--bg); }
.settings-row .sr-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--primary-bg); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.settings-row .sr-icon svg { stroke: currentColor; fill: none; }
.settings-row .sr-label { flex: 1; font-weight: 600; }
.settings-row .sr-chevron { color: var(--border-dark); flex-shrink: 0; }
.settings-row.danger { color: var(--error); justify-content: center; }
.settings-row.danger .sr-label { flex: none; font-weight: 700; }
</style>

<div class="pf-wrap">

  <div class="sub-topbar">
    <div class="sub-topbar-left">
      <a href="dashboard.php" class="sub-back" aria-label="Back">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5m0 0l7 7M5 12l7-7"/></svg>
      </a>
      <span class="sub-title">Your Profile</span>
    </div>
    <div class="sub-topbar-right">
      <a href="help_center.php" class="icon-btn" title="Help">
        <svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 115.83 1c0 2-3 2-3 4"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
      </a>
    </div>
  </div>

  <div class="profile-card">
    <div class="profile-avatar-wrap">
      <div class="profile-avatar" id="avatarPreview">
        <?php if ($has_avatar): ?>
          <img src="<?php echo htmlspecialchars($avatar_path); ?>" alt="">
        <?php else: ?>
          <span class="pa-initials"><?php echo $__initials; ?></span>
        <?php endif; ?>
      </div>
      <button type="button" class="profile-edit-btn" onclick="event.stopPropagation();document.getElementById('avatarInput').click()" aria-label="Change photo">
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
      </button>
    </div>
    <h2><?php echo htmlspecialchars($u['name']); ?></h2>
    <p><?php echo htmlspecialchars($u['email']); ?></p>
  </div>

  <h2 class="settings-group-title">Account</h2>
  <div class="settings-card">
    <a href="personal_info.php" class="settings-row">
      <span class="sr-icon"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg></span>
      <span class="sr-label">Personal Info</span>
      <svg class="sr-chevron" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="9 18 15 12 9 6"/></svg>
    </a>
    <a href="change_password.php" class="settings-row">
      <span class="sr-icon"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg></span>
      <span class="sr-label">Change Password</span>
      <svg class="sr-chevron" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="9 18 15 12 9 6"/></svg>
    </a>
  </div>

  <h2 class="settings-group-title">Activity</h2>
  <div class="settings-card">
    <a href="order_history.php" class="settings-row">
      <span class="sr-icon"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2"/><rect x="9" y="3" width="6" height="4" rx="1"/><path d="M9 12h6M9 16h4"/></svg></span>
      <span class="sr-label">Order History</span>
      <svg class="sr-chevron" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="9 18 15 12 9 6"/></svg>
    </a>
    <a href="wallet.php" class="settings-row">
      <span class="sr-icon"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><polyline points="12 7 12 12 16 14"/></svg></span>
      <span class="sr-label">Transaction History</span>
      <svg class="sr-chevron" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="9 18 15 12 9 6"/></svg>
    </a>
  </div>

  <h2 class="settings-group-title">Preferences</h2>
  <div class="settings-card">
    <a href="notification_preferences.php" class="settings-row">
      <span class="sr-icon"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8a6 6 0 10-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 01-3.46 0"/></svg></span>
      <span class="sr-label">Notifications</span>
      <svg class="sr-chevron" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="9 18 15 12 9 6"/></svg>
    </a>
    <a href="security.php" class="settings-row">
      <span class="sr-icon"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg></span>
      <span class="sr-label">Security &amp; Privacy</span>
      <svg class="sr-chevron" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="9 18 15 12 9 6"/></svg>
    </a>
  </div>

  <h2 class="settings-group-title">Support</h2>
  <div class="settings-card">
    <a href="help_center.php" class="settings-row">
      <span class="sr-icon"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 115.83 1c0 2-3 2-3 4"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></span>
      <span class="sr-label">Help Center</span>
      <svg class="sr-chevron" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="9 18 15 12 9 6"/></svg>
    </a>
    <a href="contact_admin.php" class="settings-row">
      <span class="sr-icon"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg></span>
      <span class="sr-label">Contact Admin</span>
      <svg class="sr-chevron" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="9 18 15 12 9 6"/></svg>
    </a>
  </div>

  <div class="settings-card" style="margin-top:22px">
    <a href="logout.php" class="settings-row danger">
      <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
      <span class="sr-label">Sign Out</span>
    </a>
  </div>

  <p style="text-align:center;font-size:.74rem;color:var(--text-light);margin:18px 0 8px">Version 1.0</p>

</div>

<?php include("includes/avatar_cropper.php"); ?>

<?php include("includes/footer.php"); ?>
