<?php
require_once dirname(__DIR__).'/config.php';
$u    = current_user();
$uid  = (int)($u['id'] ?? 0);
$plan = $u['plan_key'] ?? $u['subscription_tier'] ?? 'free';
?><!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">
  <title>مقترحاتك — سودانا</title>
  <style>
    :root{--g:#00d97e;--g2:#059669;--bg:#f0fdf4;--dark:#073328;--card:#fff;--text:#1e293b;--muted:#64748b;--border:#e2e8f0;--gold:#f59e0b}
    *{box-sizing:border-box;margin:0;padding:0}
    body{font-family:'Cairo',system-ui,sans-serif;background:var(--bg);color:var(--text)}
    .hdr{background:var(--dark);height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;position:sticky;top:0;z-index:100}
    .logo{color:#fff;font-weight:900;font-size:1.1rem;display:flex;align-items:center;gap:8px}
    .back{color:rgba(255,255,255,.6);font-size:.82rem;text-decoration:none}
    .hero{background:linear-gradient(135deg,var(--dark),#0a2a1a);color:#fff;padding:36px 20px;text-align:center}
    .hero h1{font-size:1.7rem;font-weight:900;margin-bottom:8px}
    .hero p{color:rgba(255,255,255,.7);font-size:.88rem;max-width:480px;margin:0 auto}
    .container{max-width:800px;margin:0 auto;padding:24px 16px}
    .card{background:var(--card);border-radius:16px;padding:24px;margin-bottom:20px;box-shadow:0 2px 12px rgba(0,0,0,.06)}
    .card h2{font-size:1rem;font-weight:800;color:var(--dark);margin-bottom:16px;display:flex;align-items:center;gap:8px}
    /* Type buttons */
    .type-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:18px}
    .type-btn{background:#f8fafc;border:1.5px solid var(--border);border-radius:12px;padding:14px 10px;text-align:center;cursor:pointer;transition:.2s;font-family:inherit}
    .type-btn:hover,.type-btn.active{border-color:var(--g);background:#f0fdf4}
    .type-btn .icon{font-size:1.5rem;display:block;margin-bottom:4px}
    .type-btn .label{font-size:.78rem;font-weight:700;color:var(--text)}
    /* Chat assistant */
    .chat-wrap{background:#f8fafc;border-radius:12px;padding:16px}
    .chat-msgs{min-height:120px;max-height:300px;overflow-y:auto;margin-bottom:12px}
    .msg{padding:10px 14px;border-radius:10px;margin-bottom:8px;font-size:.85rem;line-height:1.6;max-width:88%}
    .msg.ai{background:var(--dark);color:#fff;border-radius:10px 10px 10px 0}
    .msg.user{background:var(--g);color:#000;margin-right:auto;margin-left:auto;border-radius:10px 10px 0 10px;text-align:right}
    .chat-input{display:flex;gap:8px}
    .chat-input input{flex:1;background:#fff;border:1.5px solid var(--border);border-radius:10px;padding:10px 14px;font-family:inherit;font-size:.85rem}
    .chat-input input:focus{outline:none;border-color:var(--g)}
    .chat-input button{background:var(--g);color:#000;border:none;border-radius:10px;padding:10px 16px;font-family:inherit;font-weight:800;cursor:pointer}
    /* Form */
    .field{margin-bottom:14px}
    .field label{display:block;font-size:.75rem;font-weight:700;color:var(--muted);margin-bottom:4px}
    .field input,.field select,.field textarea{width:100%;background:#f8fafc;border:1.5px solid var(--border);border-radius:10px;padding:10px 14px;font-family:inherit;font-size:.85rem;color:var(--text)}
    .field textarea{height:100px;resize:vertical}
    .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--g);background:#fff}
    .btn-submit{background:linear-gradient(135deg,var(--g),var(--g2));color:#fff;border:none;border-radius:12px;padding:13px;width:100%;font-family:inherit;font-weight:800;font-size:.95rem;cursor:pointer;transition:.2s;margin-top:8px}
    .btn-submit:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,217,126,.35)}
    /* Trending */
    .trend-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);font-size:.82rem}
    .trend-item:last-child{border:none}
    .trend-votes{background:#f0fdf4;color:var(--g);border:1px solid #bbf7d0;border-radius:8px;padding:3px 10px;font-weight:800;font-size:.78rem;white-space:nowrap;cursor:pointer}
    .trend-votes:hover{background:var(--g);color:#000}
    .badge-type{font-size:.65rem;padding:2px 8px;border-radius:8px;font-weight:700}
    .badge-improvement{background:#dbeafe;color:#1d4ed8}
    .badge-bug{background:#fee2e2;color:#991b1b}
    .badge-solution{background:#d1fae5;color:#065f46}
    .badge-new_service{background:#fef3c7;color:#92400e}
    .badge-positive{background:#f3e8ff;color:#6b21a8}
    /* Priority */
    .priority-urgent{color:#ef4444}
    .priority-high{color:#f59e0b}
    .priority-medium{color:#00d97e}
    /* Toast */
    .toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--dark);color:#fff;padding:12px 24px;border-radius:12px;font-size:.85rem;font-weight:700;z-index:999;animation:slideUp .3s ease;display:none}
    @keyframes slideUp{from{opacity:0;transform:translateX(-50%) translateY(10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
    /* Limit bar */
    .limit-bar{background:#f8fafc;border:1px solid var(--border);border-radius:10px;padding:10px 14px;font-size:.78rem;color:var(--muted);margin-bottom:14px;display:flex;justify-content:space-between}
    @media(max-width:600px){.type-grid{grid-template-columns:1fr 1fr}.container{padding:14px}}
    .fade-in{animation:fi .35s ease}@keyframes fi{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
  </style>
</head>
<body>
<header class="hdr">
  <div class="logo">💡 مقترحاتك</div>
  <a href="/app/services.php" class="back">← الرئيسية</a>
</header>

<div class="hero">
  <h1>💡 رأيك يُشكِّل سودانا</h1>
  <p>شارك اقتراحاتك ومشاكلك وأفكارك — فريقنا يقرأ كل اقتراح ويُحلِّله</p>
</div>

<div class="container">

  <!-- Submit form -->
  <div class="card fade-in">
    <h2>✍️ اقتراح جديد</h2>

    <div class="limit-bar">
      <span>حد اليوم: <strong id="limit-used">0</strong> / <?php echo ['free'=>2,'plus'=>5,'pro'=>'∞','corp'=>'∞'][$plan]??'2'; ?></span>
      <span class="badge-type badge-<?php echo $plan; ?>"><?php echo strtoupper($plan); ?></span>
    </div>

    <!-- Type selector -->
    <div class="type-grid" id="type-grid">
      <button class="type-btn active" onclick="setType('improvement',this)"><span class="icon">💡</span><span class="label">اقتراح تحسين</span></button>
      <button class="type-btn" onclick="setType('bug',this)"><span class="icon">🐛</span><span class="label">مشكلة واجهتها</span></button>
      <button class="type-btn" onclick="setType('solution',this)"><span class="icon">🔧</span><span class="label">حل مقترح</span></button>
      <button class="type-btn" onclick="setType('new_service',this)"><span class="icon">🌟</span><span class="label">خدمة جديدة</span></button>
    </div>

    <!-- AI Assistant Chat -->
    <div class="chat-wrap" id="chat-wrap">
      <div class="chat-msgs" id="chat-msgs">
        <div class="msg ai">مرحباً! 👋 أنا مساعد المقترحات. صِف فكرتك وسأساعدك في تقديمها بأفضل شكل.</div>
      </div>
      <div class="chat-input">
        <input type="text" id="chat-q" placeholder="اكتب فكرتك هنا..." onkeydown="if(event.key==='Enter')sendChat()">
        <button onclick="sendChat()">إرسال</button>
      </div>
    </div>

    <div style="margin-top:16px">
      <div class="field"><label>عنوان الاقتراح *</label><input type="text" id="sug-title" placeholder="مثال: إضافة إشعار قبل الحجز بساعة"></div>
      <div class="field"><label>الوصف التفصيلي *</label><textarea id="sug-desc" placeholder="اشرح الفكرة بالتفصيل — ما المشكلة؟ ما الحل المقترح؟ ما الفائدة؟"></textarea></div>
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px">
        <div class="field"><label>الخدمة المتعلقة</label>
          <select id="sug-service">
            <option value="platform">المنصة عامة</option>
            <option value="medical">الطب عن بعد</option>
            <option value="legal">الاستشارات القانونية</option>
            <option value="pharmacy">الصيدلية</option>
            <option value="education">التعليم</option>
            <option value="market">سوق الجيران</option>
            <option value="community">نبض الحي</option>
            <option value="payment">الدفع والمحفظة</option>
            <option value="family">مساعد الأسرة</option>
            <option value="bde">التوثيق التجاري</option>
            <option value="general">عام</option>
          </select>
        </div>
        <div class="field"><label>الفائدة المتوقعة</label><input type="text" id="sug-benefit" placeholder="مثال: توفير وقت المستخدمين"></div>
      </div>
      <button class="btn-submit" onclick="submitSuggestion()">📤 أرسل اقتراحي</button>
    </div>
  </div>

  <!-- Trending suggestions -->
  <div class="card fade-in">
    <h2>🔥 أكثر الاقتراحات تصويتاً</h2>
    <div id="trending-list"><div style="color:var(--muted);font-size:.82rem;text-align:center;padding:16px">جاري التحميل...</div></div>
  </div>

  <!-- My suggestions -->
  <?php if ($uid > 0): ?>
  <div class="card fade-in">
    <h2>📋 اقتراحاتي السابقة</h2>
    <div id="my-list"><div style="color:var(--muted);font-size:.82rem;text-align:center;padding:16px">جاري التحميل...</div></div>
  </div>
  <?php endif; ?>

</div>
<div class="toast" id="toast"></div>

<script>
let currentType = 'improvement';
let convLog = [];

function setType(type, btn) {
  currentType = type;
  document.querySelectorAll('.type-btn').forEach(b => b.classList.remove('active'));
  btn.classList.add('active');
  const prompts = {
    improvement: 'اقتراح تحسين! أخبرني — ما الشيء الذي تريد تحسينه في سودانا؟',
    bug: 'مشكلة تقنية! صِف لي المشكلة التي واجهتها — متى تحدث وماذا كنت تفعل؟',
    solution: 'حل مقترح! ما المشكلة التي وجدت لها حلاً؟ وكيف يعمل الحل؟',
    new_service: 'خدمة جديدة! ما الخدمة التي تراها ضرورية في سودانا؟',
  };
  addAIMsg(prompts[type] || 'صِف فكرتك...');
}

function addAIMsg(text) {
  const msgs = document.getElementById('chat-msgs');
  msgs.innerHTML += `<div class="msg ai">${text}</div>`;
  msgs.scrollTop = msgs.scrollHeight;
}

function addUserMsg(text) {
  const msgs = document.getElementById('chat-msgs');
  msgs.innerHTML += `<div class="msg user" style="margin-right:0">${text}</div>`;
  msgs.scrollTop = msgs.scrollHeight;
}

async function sendChat() {
  const q = document.getElementById('chat-q').value.trim();
  if (!q) return;
  addUserMsg(q);
  convLog.push({role:'user', text: q});
  document.getElementById('chat-q').value = '';

  // Auto-fill title if empty
  if (!document.getElementById('sug-title').value && q.length > 10) {
    document.getElementById('sug-title').value = q.slice(0,80);
  }
  // Auto-fill desc
  const desc = document.getElementById('sug-desc');
  if (desc.value.length < 30) {
    desc.value = (desc.value ? desc.value + '\n' : '') + q;
  }

  // Follow-up question from assistant
  const followUps = {
    0: 'شكراً! وما الفائدة المتوقعة من هذا التحسين على المستخدمين الآخرين؟',
    1: 'ممتاز! هل جربت خدمة مشابهة في منصة أخرى؟ ما أعجبك فيها؟',
    2: 'رائع! يمكنك الآن إرسال اقتراحك الكامل بالضغط على الزر أدناه 👇',
  };
  const msgCount = convLog.filter(m => m.role === 'user').length;
  if (followUps[msgCount - 1]) {
    setTimeout(() => addAIMsg(followUps[msgCount - 1]), 600);
  }
}

async function submitSuggestion() {
  const title = document.getElementById('sug-title').value.trim();
  const desc  = document.getElementById('sug-desc').value.trim();
  if (!title || title.length < 5) { showToast('يرجى كتابة عنوان للاقتراح'); return; }
  if (!desc || desc.length < 20) { showToast('يرجى وصف الاقتراح بتفصيل أكثر'); return; }

  const btn = document.querySelector('.btn-submit');
  btn.disabled = true; btn.textContent = 'جاري الإرسال...';

  try {
    const r = await fetch('/api/suggestions/create.php', {
      method:'POST',
      headers:{'Content-Type':'application/json'},
      body: JSON.stringify({
        type:             currentType,
        title:            title,
        description:      desc,
        service:          document.getElementById('sug-service').value,
        expected_benefit: document.getElementById('sug-benefit').value,
        conversation_log: convLog,
      })
    });
    const d = await r.json();
    if (d.ok) {
      showToast('✅ ' + d.message);
      // Reset form
      document.getElementById('sug-title').value = '';
      document.getElementById('sug-desc').value  = '';
      document.getElementById('sug-benefit').value = '';
      document.getElementById('chat-msgs').innerHTML =
        '<div class="msg ai">شكراً جزيلاً على اقتراحك! يمكنك إرسال اقتراح آخر إن شئت.</div>';
      convLog = [];
      loadTrending();
    } else {
      showToast('❌ ' + (d.message || d.error || 'حدث خطأ'));
    }
  } catch(e) {
    showToast('❌ خطأ في الاتصال');
  } finally {
    btn.disabled = false; btn.textContent = '📤 أرسل اقتراحي';
  }
}

async function loadTrending() {
  try {
    const r = await fetch('/api/suggestions/list.php?sort=votes&limit=10');
    const d = await r.json();
    const el = document.getElementById('trending-list');
    if (!d.suggestions?.length) {
      el.innerHTML = '<p style="color:var(--muted);font-size:.82rem;text-align:center;padding:12px">لا يوجد اقتراحات بعد — كن الأول!</p>';
      return;
    }
    const typeLabels = {improvement:'تحسين',bug:'مشكلة',solution:'حل',new_service:'خدمة جديدة',positive:'تقييم'};
    const priorityIcon = {urgent:'🔴',high:'🟡',medium:'🟢',low:'⚪',duplicate:'🔵'};
    el.innerHTML = d.suggestions.map(s => `
      <div class="trend-item">
        <div style="flex:1;min-width:0">
          <span class="badge-type badge-${s.type}">${typeLabels[s.type]||s.type}</span>
          <span style="margin-right:4px;font-size:.78rem;color:var(--muted)">${s.service}</span>
          <div style="font-weight:600;margin-top:3px;font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${s.title}</div>
          ${s.priority_label ? `<span style="font-size:.7rem">${priorityIcon[s.priority_label]||''} ${s.priority_label}</span>` : ''}
        </div>
        <button class="trend-votes" onclick="vote(${s.id},this)">
          🔼 ${s.votes_count}
        </button>
      </div>`).join('');
  } catch(e) {}
}

async function vote(id, btn) {
  try {
    const r = await fetch('/api/suggestions/vote.php', {
      method:'POST', headers:{'Content-Type':'application/json'},
      body: JSON.stringify({suggestion_id: id})
    });
    const d = await r.json();
    if (d.ok) { btn.textContent = '🔼 ' + d.votes; showToast('✅ تم تسجيل صوتك'); }
    else showToast(d.message || 'تم التصويت مسبقاً');
  } catch(e) {}
}

function showToast(msg) {
  const t = document.getElementById('toast');
  t.textContent = msg; t.style.display = 'block';
  setTimeout(() => t.style.display = 'none', 3500);
}

loadTrending();
</script>

<nav style="position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid #e2e8f0;display:flex;padding:8px 0 calc(8px + env(safe-area-inset-bottom,0px));z-index:100">
  <a href="/app/hub.php" style="flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;color:#64748b;font-size:.6rem;font-family:inherit;padding:4px 0"><span style="font-size:1.1rem">&#127968;</span><span>الهب</span></a>
  <a href="/app/pay.php" style="flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;color:#64748b;font-size:.6rem;font-family:inherit;padding:4px 0"><span style="font-size:1.1rem">&#128179;</span><span>Pay</span></a>
  <a href="/app/invest/index.php" style="flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;color:#64748b;font-size:.6rem;font-family:inherit;padding:4px 0"><span style="font-size:1.1rem">&#128185;</span><span>استثمار</span></a>
  <a href="/app/community.php" style="flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;color:#64748b;font-size:.6rem;font-family:inherit;padding:4px 0"><span style="font-size:1.1rem">&#127968;</span><span>مجتمع</span></a>
  <a href="/app/profile.php" style="flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;color:#64748b;font-size:.6rem;font-family:inherit;padding:4px 0"><span style="font-size:1.1rem">&#128100;</span><span>حسابي</span></a>
</nav>
</body>
</html>
