<?php
require_once dirname(__DIR__).'/config.php';
require_once dirname(__DIR__).'/engine/SudannaPayEngine.php';
$u = current_user();
if (!$u) { header('Location: ' . url('?login=1')); exit; }
$uid = (int)$u['id'];
SudannaPayEngine::createAccount($uid);
$bal = SudannaPayEngine::getBalance($uid);
$plan = $u['plan_key'] ?? 'free';
?><!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
  <title>Sudanna Pay — محفظتي</title>
  <style>
    :root{--g:#00d97e;--g2:#059669;--dark:#073328;--bg:#f0fdf4;--card:#fff;
          --text:#1e293b;--muted:#64748b;--border:#e2e8f0;--gold:#f59e0b;
          --safe-bottom:env(safe-area-inset-bottom,0px)}
    *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
    body{font-family:'Cairo','Noto Sans Arabic',system-ui,sans-serif;background:var(--bg);min-height:100vh;padding-bottom:calc(70px + var(--safe-bottom))}
    .hdr{background:var(--dark);height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;position:sticky;top:0;z-index:100}
    .logo{color:#fff;font-weight:900;font-size:1rem;display:flex;align-items:center;gap:6px}
    .notif-btn{background:rgba(255,255,255,.1);border:none;border-radius:50%;width:36px;height:36px;color:#fff;cursor:pointer;font-size:1rem}
    .hero{background:linear-gradient(135deg,var(--dark),#062a1a);padding:24px 16px 28px;position:relative;overflow:hidden}
    .hero::before{content:'💳';position:absolute;right:-10px;top:-10px;font-size:6rem;opacity:.04}
    .hero-label{color:rgba(255,255,255,.6);font-size:.78rem;margin-bottom:6px}
    .balance-main{color:#fff;font-size:2.5rem;font-weight:900;letter-spacing:-1px;margin-bottom:4px}
    .balance-sdg{color:rgba(255,255,255,.5);font-size:.85rem}
    .account-no{background:rgba(255,255,255,.1);border-radius:20px;padding:4px 12px;color:rgba(255,255,255,.7);font-size:.73rem;display:inline-block;margin-top:8px;letter-spacing:1px;font-family:monospace}
    .actions-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:16px;background:var(--dark)}
    .act-btn{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:14px 8px;text-align:center;cursor:pointer;text-decoration:none;transition:.2s;touch-action:manipulation}
    .act-btn:active{background:rgba(0,217,126,.15);border-color:rgba(0,217,126,.3)}
    .act-icon{font-size:1.5rem;display:block;margin-bottom:5px}
    .act-lbl{color:rgba(255,255,255,.75);font-size:.67rem;font-weight:700}
    .container{max-width:720px;margin:0 auto;padding:14px}
    .section{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:14px;margin-bottom:12px;box-shadow:0 1px 4px rgba(0,0,0,.04)}
    .sec-title{font-size:.88rem;font-weight:800;color:var(--dark);margin-bottom:12px;display:flex;justify-content:space-between;align-items:center}
    .sec-link{font-size:.75rem;color:var(--g);text-decoration:none}
    .services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
    .svc-card{background:#f8fafc;border:1.5px solid var(--border);border-radius:12px;padding:12px 8px;text-align:center;text-decoration:none;color:var(--text);display:block;transition:.15s;touch-action:manipulation}
    .svc-card:active{border-color:var(--g);background:#f0fdf4}
    .svc-icon{font-size:1.4rem;display:block;margin-bottom:5px}
    .svc-lbl{font-size:.67rem;font-weight:700}
    .txn-item{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border)}
    .txn-item:last-child{border:none}
    .txn-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
    .txn-icon.out{background:#fee2e2}
    .txn-icon.in{background:#d1fae5}
    .txn-name{font-weight:600;font-size:.82rem}
    .txn-date{font-size:.7rem;color:var(--muted)}
    .txn-amt{font-weight:800;font-size:.85rem;margin-right:auto}
    .txn-amt.out{color:#dc2626}
    .txn-amt.in{color:#059669}
    .pin-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;align-items:flex-end}
    .pin-modal.show{display:flex}
    .pin-sheet{background:#fff;border-radius:20px 20px 0 0;padding:24px 20px calc(24px + var(--safe-bottom));width:100%;max-width:480px;margin:0 auto}
    .pin-title{font-weight:800;font-size:1rem;text-align:center;margin-bottom:16px}
    .pin-dots{display:flex;justify-content:center;gap:12px;margin-bottom:20px}
    .pin-dot{width:14px;height:14px;border-radius:50%;background:#e2e8f0;transition:.2s}
    .pin-dot.filled{background:var(--g)}
    .pin-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
    .pin-key{background:#f8fafc;border:1.5px solid var(--border);border-radius:12px;padding:16px;font-size:1.2rem;font-weight:700;cursor:pointer;touch-action:manipulation;transition:.15s;text-align:center}
    .pin-key:active{background:#f0fdf4;border-color:var(--g)}
    .pin-key.del{color:#dc2626;font-size:1.4rem}
    .pin-key.ok{background:var(--g);color:#fff;border-color:var(--g)}
    .bottom-nav{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--border);display:flex;padding:8px 0 calc(8px + var(--safe-bottom));z-index:100}
    .nav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;color:var(--muted);font-size:.62rem;padding:4px 0}
    .nav-item.active{color:var(--g)}.nav-icon{font-size:1.2rem}
    .skel{background:linear-gradient(90deg,#f0f0f0 25%,#e8e8e8 50%,#f0f0f0 75%);background-size:200% 100%;animation:sk 1.4s infinite;border-radius:8px;height:50px;margin-bottom:8px}
    @keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}
    @media(max-width:480px){.actions-row{grid-template-columns:repeat(4,1fr)}.services-grid{grid-template-columns:repeat(3,1fr)}}
  </style>
</head>
<body>
<header class="hdr">
  <div class="logo">💳 Sudanna Pay</div>
  <button class="notif-btn" onclick="window.location='/app/notifications.php'">🔔</button>
</header>

<div class="hero">
  <div class="hero-label">رصيدك المتاح</div>
  <div class="balance-main"><?php echo number_format($bal['available']); ?></div>
  <div class="balance-sdg">جنيه سوداني (SDG)</div>
  <div class="account-no"><?php echo $bal['account_no'] ?? 'جاري الإنشاء...'; ?></div>
</div>

<div class="actions-row">
  <a href="/app/pay-send.php" class="act-btn">
    <span class="act-icon">↗️</span><div class="act-lbl">أرسل</div>
  </a>
  <a href="/app/pay-receive.php" class="act-btn">
    <span class="act-icon">↙️</span><div class="act-lbl">استقبل</div>
  </a>
  <a href="/app/wallet-topup.php" class="act-btn">
    <span class="act-icon">➕</span><div class="act-lbl">اشحن</div>
  </a>
  <a href="/app/pay-history.php" class="act-btn">
    <span class="act-icon">📋</span><div class="act-lbl">السجل</div>
  </a>
</div>

<div class="container">

  <div class="section">
    <div class="sec-title">
      ⚡ خدمات Sudanna Pay
      <a href="/app/services.php" class="sec-link">الكل</a>
    </div>
    <div class="services-grid">
      <a href="/app/pay-bills.php?cat=electricity" class="svc-card">
        <span class="svc-icon">⚡</span><div class="svc-lbl">كهرباء</div>
      </a>
      <a href="/app/pay-bills.php?cat=water" class="svc-card">
        <span class="svc-icon">💧</span><div class="svc-lbl">مياه</div>
      </a>
      <a href="/app/pay-bills.php?cat=telecom" class="svc-card">
        <span class="svc-icon">📱</span><div class="svc-lbl">اتصالات</div>
      </a>
      <a href="/app/pay-gov.php" class="svc-card">
        <span class="svc-icon">🏛️</span><div class="svc-lbl">حكومي</div>
      </a>
      <a href="/app/invest/index.php" class="svc-card">
        <span class="svc-icon">📈</span><div class="svc-lbl">استثمر</div>
      </a>
      <a href="/app/rosca.php" class="svc-card">
        <span class="svc-icon">🤲</span><div class="svc-lbl">الصندوق</div>
      </a>
      <a href="/app/zakat.php" class="svc-card">
        <span class="svc-icon">🌙</span><div class="svc-lbl">الزكاة</div>
      </a>
      <a href="/app/pay-agents.php" class="svc-card">
        <span class="svc-icon">🏪</span><div class="svc-lbl">الوكلاء</div>
      </a>
      <a href="/app/merchant-portal.php" class="svc-card">
        <span class="svc-icon">🏷️</span><div class="svc-lbl">تاجر</div>
      </a>
    </div>
  </div>

  <div class="section">
    <div class="sec-title">
      📋 آخر المعاملات
      <a href="/app/pay-history.php" class="sec-link">كل المعاملات</a>
    </div>
    <div id="txn-list"><div class="skel"></div><div class="skel"></div></div>
  </div>

</div>

<nav class="bottom-nav">
  <a href="/app/dashboard.php"  class="nav-item"><span class="nav-icon">🏠</span><span>الرئيسية</span></a>
  <a href="/app/pay.php"        class="nav-item active"><span class="nav-icon">💳</span><span>Pay</span></a>
  <a href="/app/invest/index.php" class="nav-item"><span class="nav-icon">📈</span><span>استثمر</span></a>
  <a href="/app/pay-history.php" class="nav-item"><span class="nav-icon">📋</span><span>السجل</span></a>
  <a href="/app/profile.php"    class="nav-item"><span class="nav-icon">👤</span><span>حسابي</span></a>
</nav>

<script>
const TXN_ICONS = {transfer:'💸',qr_pay:'📱',cashin:'➕',cashout:'💵',bill:'🧾',invest:'📈',rosca:'🤲',zakat:'🌙',gift:'🎁',merchant:'🏪',refund:'↩️'};
const TXN_LABELS = {transfer:'تحويل',qr_pay:'دفع QR',cashin:'شحن',cashout:'سحب',bill:'فاتورة',invest:'استثمار',rosca:'صندوق',zakat:'زكاة',gift:'هدية',merchant:'شراء',refund:'استرداد'};

async function loadHistory() {
  try {
    const r = await fetch('/api/pay/history.php?limit=5');
    const d = await r.json();
    const list = d.transactions || [];
    const myAcc = '<?php echo $bal['account_no'] ?? ''; ?>';
    const el = document.getElementById('txn-list');
    if (!list.length) {
      el.innerHTML = '<p style="color:var(--muted);font-size:.82rem;text-align:center;padding:12px">لا معاملات بعد</p>';
      return;
    }
    el.innerHTML = list.map(t => {
      const isOut = t.from_account === myAcc;
      const icon = TXN_ICONS[t.type] || '💳';
      const label = TXN_LABELS[t.type] || t.type;
      const amt = Number(t.amount_sdg).toLocaleString('ar-SA');
      const dt = new Date(t.created_at).toLocaleDateString('ar-SA',{day:'numeric',month:'short',hour:'2-digit',minute:'2-digit'});
      return `<div class="txn-item">
        <div class="txn-icon ${isOut?'out':'in'}">${icon}</div>
        <div style="flex:1;min-width:0">
          <div class="txn-name">${label}</div>
          <div class="txn-date">${dt}</div>
        </div>
        <div class="txn-amt ${isOut?'out':'in'}">${isOut?'-':'+'}${amt} SDG</div>
      </div>`;
    }).join('');
  } catch(e) {
    document.getElementById('txn-list').innerHTML = '<p style="color:var(--muted);font-size:.82rem">تعذّر التحميل</p>';
  }
}

loadHistory();
</script>

<!-- زر دعم عائم -->
<div id="support-float" style="position:fixed;bottom:80px;left:16px;z-index:50">
  <a href="/app/support.php" style="display:flex;align-items:center;gap:8px;background:#073328;color:#fff;border-radius:30px;padding:10px 16px;text-decoration:none;font-size:.8rem;font-weight:700;box-shadow:0 4px 20px rgba(0,0,0,.3)">
    <span style="font-size:1.1rem">&#127993;</span> مشكلة؟
  </a>
</div>


<!-- زر دعم عائم -->
<a href="/app/support.php?from=pay" id="floating-support"
   style="position:fixed;bottom:90px;left:16px;background:#073328;color:#00d97e;
   border-radius:50%;width:46px;height:46px;display:flex;align-items:center;justify-content:center;
   font-size:1.2rem;z-index:200;box-shadow:0 4px 16px rgba(0,0,0,.3);text-decoration:none;
   border:2px solid #00d97e" title="مشكلة في الدفع؟">🎫</a>


<script>
(async function loadPayDashboard(){
  try {
    const r = await fetch('/api/pay/dashboard.php');
    const d = await r.json();
    const dd = d.data || {};
    const fmt = n => Number(n||0).toLocaleString('ar-SA');
    ['pay-balance','pay-bal','balance-display'].forEach(id => {
      const el = document.getElementById(id);
      if(el) el.textContent = fmt(dd.available||dd.balance) + ' SDG';
    });
  } catch(e){}
})();
</script>

</body>
</html>