<?php
require_once 'db.php';
require_once 'auth_check.php';
require_once 'currency.php';

$_sup = $conn->query("SELECT key_value FROM settings WHERE key_name='support_url'")->fetch_assoc();
$support_url = $_sup['key_value'] ?? '#';

// ── Stats ─────────────────────────────────────────────────
$uid = $user_id;

// Earnings calculations
$today_earn = (float)($conn->query("SELECT COALESCE(SUM(earned),0) as s FROM task_completions WHERE user_id=$uid AND DATE(completed_at)=CURDATE()")->fetch_assoc()['s'] ?? 0);
$yesterday_earn = (float)($conn->query("SELECT COALESCE(SUM(earned),0) as s FROM task_completions WHERE user_id=$uid AND DATE(completed_at)=DATE_SUB(CURDATE(),INTERVAL 1 DAY)")->fetch_assoc()['s'] ?? 0);
$week_earn = (float)($conn->query("SELECT COALESCE(SUM(earned),0) as s FROM task_completions WHERE user_id=$uid AND YEARWEEK(completed_at,1)=YEARWEEK(NOW(),1)")->fetch_assoc()['s'] ?? 0);
$month_earn = (float)($conn->query("SELECT COALESCE(SUM(earned),0) as s FROM task_completions WHERE user_id=$uid AND YEAR(completed_at)=YEAR(NOW()) AND MONTH(completed_at)=MONTH(NOW())")->fetch_assoc()['s'] ?? 0);
$total_earn = (float)($u['balance'] ?? 0);

// Task commission (rewards from downliners doing tasks)
$task_rewards = (float)($conn->query("SELECT COALESCE(SUM(amount),0) as s FROM commission_logs WHERE user_id=$uid AND type='task'")->fetch_assoc()['s'] ?? 0);
// Referral rewards (rewards from downliners joining plans)
$ref_rewards = (float)($conn->query("SELECT COALESCE(SUM(amount),0) as s FROM commission_logs WHERE user_id=$uid AND type='referral'")->fetch_assoc()['s'] ?? 0);

// Today's task counts
$today_done = 0;
$daily_tasks = 0;
if ($active_plan) {
    $pid = (int)$active_plan['id'];
    $today_done  = (int)($conn->query("SELECT COUNT(*) as c FROM task_completions WHERE user_id=$uid AND plan_id=$pid AND DATE(completed_at)=CURDATE()")->fetch_assoc()['c'] ?? 0);
    $daily_tasks = (int)$active_plan['daily_tasks'];
}
$remaining_tasks = max(0, $daily_tasks - $today_done);

// User balance & info
$balance          = (float)($u['balance'] ?? 0);
$security_deposit = (float)($u['security_deposit'] ?? 0);
$credits          = (int)($u['credits'] ?? 100);
$phone            = $u['phone'] ?? '';
$masked_phone = '***' . substr($phone, -7);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>WFM - Personal Center</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:'Segoe UI',sans-serif;
  background:linear-gradient(160deg,#b8cba8 0%,#a8bc96 40%,#8faa7a 100%);
  min-height:100vh;
  padding-bottom:80px
}

/* ── Top Bar ── */
.top-bar{
  background:rgba(255,255,255,.45);
  backdrop-filter:blur(8px);
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.3)
}
.top-bar h1{
  font-size:17px;
  font-weight:700;
  color:#1a2a0a;
  flex:1;
  text-align:center
}
.wallet-btn{
  background:linear-gradient(90deg,#f9e04b,#f39c12);
  color:#7a5800;
  font-size:12px;
  font-weight:700;
  padding:5px 12px;
  border-radius:20px;
  text-decoration:none;
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:5px
}

/* ── Profile Section ── */
.profile-section{
  margin:12px 12px 0;
  background:#fff;
  border-radius:16px 16px 0 0;
  padding:14px 16px
}
.profile-row{
  display:flex;
  align-items:center;
  gap:12px
}
.avatar{
  width:60px;
  height:60px;
  border-radius:50%;
  object-fit:cover;
  border:3px solid rgba(255,255,255,.8);
  background:#ddd;
  flex-shrink:0
}
.avatar-placeholder{
  width:60px;
  height:60px;
  border-radius:50%;
  background:linear-gradient(135deg,#3eaabb,#2c7be5);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  border:3px solid rgba(255,255,255,.8)
}
.avatar-placeholder svg{width:30px;height:30px;fill:#fff}
.profile-info{flex:1}
.profile-phone{font-size:15px;font-weight:700;color:#1a2a0a}
.profile-credit{font-size:12px;color:#444;margin-top:4px}
.logout-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  background:none;
  border:none;
  cursor:pointer;
  font-family:inherit;
  text-decoration:none;
  color:#444
}
.logout-btn .logout-icon{
  width:32px;
  height:32px;
  background:rgba(255,255,255,.7);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center
}
.logout-btn .logout-icon svg{width:18px;height:18px;fill:#555}
.logout-btn span{font-size:11px;color:#555;font-weight:500}

/* ── Balance Row — NO card, sits directly on green bg ── */
.balance-section{
  margin:0 12px;
  background:#fff;
  padding:14px 16px;
  border-top:1px solid #eee;
  border-radius:0 0 16px 16px
}
.balance-row{display:flex;gap:0}
.bal-item{flex:1;text-align:center}
.bal-item:first-child{border-right:1px solid #eee}
.bal-label{font-size:13px;font-weight:600;color:#000;margin-bottom:6px}
.bal-value{font-size:22px;font-weight:800;color:#2c7be5}

/* ── Identity — own card, lighter distinct green ── */
.identity-section{
  margin:8px 12px;
  background:#c8dab8;
  border-radius:14px;
  padding:12px 16px;
  text-align:center
}
.identity-label{font-size:13px;color:#2a3a1a;font-weight:500;margin-bottom:8px}
.identity-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:15px;
  font-weight:700;
  color:#1a3a0a
}
.identity-badge img{width:24px;height:24px}

/* ── Stats Grid — 3×3 separate cards with gaps ── */
.stats-grid{
  margin:0 12px 8px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px
}
.sg-item{
  background:#fff;
  border-radius:10px;
  padding:12px 6px;
  text-align:center
}
.sg-val{font-size:16px;font-weight:800;color:#2c7be5}
.sg-lbl{font-size:10px;color:#000;margin-top:4px;line-height:1.4;font-weight:500}

/* ── Menu List — compact 1×1 cards ── */
.menu-list{
  margin:0 12px 10px;
  display:flex;
  flex-direction:column;
  gap:6px
}
.menu-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  background:#fff;
  border-radius:12px;
  text-decoration:none;
  color:#000;
  cursor:pointer
}
.menu-icon{
  width:32px;
  height:32px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  overflow:hidden
}
.menu-icon img{width:24px;height:24px;object-fit:contain}
.menu-text{flex:1;font-size:13px;font-weight:500;color:#000}
.menu-arrow{display:flex;align-items:center}
.menu-arrow svg{width:16px;height:16px;fill:#bbb}

/* ── Big Logout Button ── */
.logout-big{
  display:block;
  margin:4px 12px 14px;
  background:linear-gradient(90deg,#3ecf8e,#2c7be5);
  color:#fff;
  text-align:center;
  padding:16px;
  border-radius:14px;
  font-size:16px;
  font-weight:700;
  text-decoration:none;
  cursor:pointer
}

/* ── Float Service ── */
.float-service{
  position:fixed;
  bottom:80px;
  right:10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  z-index:999;
  text-decoration:none;
  cursor:pointer
}
.float-service img{
  width:55px;
  height:55px;
  border-radius:50%;
  object-fit:cover
}
.float-service span{
  font-size:10px;
  color:#3a5a2a;
  font-weight:600;
  text-align:center;
  margin-top:2px
}

/* ── Bottom Nav ── */
.bottom-nav{
  position:fixed;
  bottom:0;left:0;right:0;
  height:64px;
  background:#fff;
  border-top:1px solid #e0e0e0;
  display:flex;
  align-items:center;
  justify-content:space-around;
  z-index:1000
}
.bn-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  text-decoration:none;
  flex:1;
  padding:6px 0
}
.bn-item .bn-icon{
  width:26px;height:26px;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center
}
.bn-item span{font-size:10px;font-weight:600}
.bn-item.active span{color:#3eaabb}
.bn-item:not(.active) span{color:#aaa}
</style>
</head>
<body>

<!-- Top Bar (no back arrow) -->
<div class="top-bar">
  <div style="width:80px"></div>
  <h1>Personal Center</h1>
  <a href="wallet.php" class="wallet-btn">
    <img src="./static/icon/wallet.png" style="height:20px;width:20px" onerror="this.style.display='none'">
    My Wallet
  </a>
</div>

<!-- Profile Section -->
<div class="profile-section">
  <div class="profile-row">
    <?php if (!empty($u['avatar'])): ?>
      <img src="<?= htmlspecialchars($u['avatar']) ?>" class="avatar" alt="Avatar">
    <?php else: ?>
      <div class="avatar-placeholder">
        <svg viewBox="0 0 24 24"><path d="M12 12c2.7 0 5-2.3 5-5s-2.3-5-5-5-5 2.3-5 5 2.3 5 5 5zm0 2c-3.3 0-10 1.7-10 5v2h20v-2c0-3.3-6.7-5-10-5z"/></svg>
      </div>
    <?php endif; ?>
    <div class="profile-info">
      <div class="profile-phone">Login Account：<?= htmlspecialchars($masked_phone) ?></div>
      <div class="profile-credit">Your Credit：<?= $credits ?></div>
    </div>
    <a href="logout.php" class="logout-btn">
      <div class="logout-icon">
        <svg viewBox="0 0 24 24"><path d="M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5-5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z"/></svg>
      </div>
      <span>Logout</span>
    </a>
  </div>
</div>

<!-- Balance Section -->
<div class="balance-section">
  <div class="balance-row">
    <div class="bal-item">
      <div class="bal-label">Personal Balance(<?= $currency ?>)</div>
      <div class="bal-value"><?= number_format($balance, 2) ?></div>
    </div>
    <div class="bal-item">
      <div class="bal-label">Security Deposit(<?= $currency ?>)</div>
      <div class="bal-value"><?= number_format($security_deposit, 2) ?></div>
    </div>
  </div>
</div>

<!-- Identity Section -->
<div class="identity-section">
  <div class="identity-label">Your Identity</div>
  <div class="identity-badge">
    <img src="https://api.wfmtr.me/static/common/images/v0.png" alt="" onerror="this.style.display='none'">
    <span><?= htmlspecialchars($active_plan['name'] ?? 'Internship') ?></span>
  </div>
</div>

<!-- Stats Grid -->
<div class="stats-grid">
  <div class="sg-item">
    <div class="sg-val"><?= number_format($yesterday_earn,3) ?></div>
    <div class="sg-lbl">Yesterday's<br>Earnings(<?= $currency ?>)</div>
  </div>
  <div class="sg-item">
    <div class="sg-val"><?= number_format($today_earn,3) ?></div>
    <div class="sg-lbl">Today's<br>Earnings(<?= $currency ?>)</div>
  </div>
  <div class="sg-item">
    <div class="sg-val"><?= number_format($week_earn,3) ?></div>
    <div class="sg-lbl">This Week's<br>Earnings(<?= $currency ?>)</div>
  </div>
  <div class="sg-item">
    <div class="sg-val"><?= number_format($month_earn,3) ?></div>
    <div class="sg-lbl">This Month's<br>Earnings(<?= $currency ?>)</div>
  </div>
  <div class="sg-item">
    <div class="sg-val"><?= number_format($total_earn,3) ?></div>
    <div class="sg-lbl">Total<br>Earnings(<?= $currency ?>)</div>
  </div>
  <div class="sg-item">
    <div class="sg-val"><?= $today_done ?></div>
    <div class="sg-lbl">Tasks Completed<br>Today (Units)</div>
  </div>
  <div class="sg-item">
    <div class="sg-val"><?= $remaining_tasks ?></div>
    <div class="sg-lbl">Remaining Tasks<br>Today (Units)</div>
  </div>
  <div class="sg-item">
    <div class="sg-val"><?= number_format($task_rewards,3) ?></div>
    <div class="sg-lbl">Task<br>Rewards(<?= $currency ?>)</div>
  </div>
  <div class="sg-item">
    <div class="sg-val"><?= number_format($ref_rewards,3) ?></div>
    <div class="sg-lbl">Referral<br>Rewards(<?= $currency ?>)</div>
  </div>
</div>

<!-- Menu List -->
<div class="menu-list">
  <a href="info.php" class="menu-item">
    <div class="menu-icon">
      <img src="https://api.wfmtr.me/static/api/images/icon/user1.png" alt="">
    </div>
    <span class="menu-text">Personal Information</span>
    <div class="menu-arrow"><svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6z"/></svg></div>
  </a>
  <a href="daily_report.php" class="menu-item">
    <div class="menu-icon">
      <img src="https://api.wfmtr.me/static/api/images/icon/daily_report.png" alt="">
    </div>
    <span class="menu-text">Daily Report</span>
    <div class="menu-arrow"><svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6z"/></svg></div>
  </a>
  <a href="account_log.php" class="menu-item">
    <div class="menu-icon">
      <img src="https://api.wfmtr.me/static/api/images/icon/account_record.png" alt="">
    </div>
    <span class="menu-text">Account Change Record</span>
    <div class="menu-arrow"><svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6z"/></svg></div>
  </a>
  <a href="message.php" class="menu-item">
    <div class="menu-icon">
      <img src="https://api.wfmtr.me/static/api/images/icon/message.png" alt="">
    </div>
    <span class="menu-text">Message</span>
    <div class="menu-arrow"><svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6z"/></svg></div>
  </a>
  <a href="faq.php" class="menu-item">
    <div class="menu-icon">
      <img src="https://api.wfmtr.me/static/api/images/icon/faq.png" alt="">
    </div>
    <span class="menu-text">Frequently Asked Questions (FAQ)</span>
    <div class="menu-arrow"><svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6z"/></svg></div>
  </a>
  <a href="privacy.php" class="menu-item">
    <div class="menu-icon">
      <img src="https://api.wfmtr.me/static/api/images/icon/privacy.png" alt=""
           onerror="this.src='https://eoproject.com/sn17/68dd346125484.png'">
    </div>
    <span class="menu-text">Privacy Policy</span>
    <div class="menu-arrow"><svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6z"/></svg></div>
  </a>
  <a href="agreement.php" class="menu-item">
    <div class="menu-icon">
      <img src="https://api.wfmtr.me/static/api/images/icon/agreement.png" alt=""
           onerror="this.src='https://eoproject.com/sn17/68e23ee424ad5.png'">
    </div>
    <span class="menu-text">User Agreement</span>
    <div class="menu-arrow"><svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6z"/></svg></div>
  </a>
</div>

<!-- Big Logout Button -->
<a href="logout.php" class="logout-big">⏻ Logout</a>

<!-- Float Service -->
<a href="<?= htmlspecialchars($support_url) ?>" target="_blank" class="float-service">
  <img src="https://api.wfmtr.me/static/api/images/icon/service.png" alt=""
       onerror="this.src='care.png'">
  <span>Online Service</span>
</a>

<!-- Bottom Nav -->
<?php include 'navigation_bottom.php'; ?>

</body>
</html>