<?php
$ticketId = isset($_GET['ticket_id']) ? (int)$_GET['ticket_id'] : 0;
?><!doctype html>
<html lang="fa" dir="rtl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>پشتیبانی</title>
<script src="https://telegram.org/js/telegram-web-app.js"></script>
<style>
:root{--bg:#f4f6fb;--card:#fff;--text:#172033;--muted:#667085;--line:#e4e7ec;--pri:#2563eb;--pri2:#1d4ed8;--danger:#dc2626;--ok:#16a34a;--warn:#d97706;--shadow:0 10px 30px rgba(15,23,42,.08)}
*{box-sizing:border-box}body{margin:0;font-family:Tahoma,Arial,sans-serif;background:var(--bg);color:var(--text);padding:14px;padding-bottom:calc(18px + env(safe-area-inset-bottom))}.wrap{max-width:720px;margin:0 auto}.top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}.brand{font-size:20px;font-weight:800}.sub{font-size:12px;color:var(--muted);margin-top:4px}.card{background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:14px;margin-bottom:12px}.tabs{display:flex;gap:8px;margin-bottom:12px}.tab{flex:1;border:1px solid var(--line);background:var(--card);border-radius:14px;padding:11px;font-weight:700;color:var(--text)}.tab.active{background:var(--pri);color:#fff;border-color:var(--pri)}button,.btn{border:0;border-radius:14px;background:var(--pri);color:#fff;padding:11px 14px;font-weight:800;cursor:pointer;text-align:center;text-decoration:none;display:inline-block}button:disabled{opacity:.6;cursor:not-allowed}.light{background:#eef4ff;color:#1d4ed8}.danger{background:#fee2e2;color:#b91c1c}.ok{background:#dcfce7;color:#166534}.row{display:flex;gap:8px;flex-wrap:wrap}.grow{flex:1}.field{margin-bottom:12px}.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}textarea,select,input[type=file]{width:100%;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--text);padding:12px;font-family:inherit;font-size:14px}textarea{min-height:110px;resize:vertical}.ticket{border:1px solid var(--line);border-radius:18px;padding:12px;margin-bottom:10px;background:#fff;cursor:pointer}.ticket:hover{border-color:#bfdbfe}.ticket h3{margin:0 0 6px;font-size:15px}.meta{display:flex;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:12px}.badge{padding:4px 9px;border-radius:999px;font-size:12px;font-weight:800}.badge.open,.badge.answered_user{background:#fef3c7;color:#92400e}.badge.answered_admin,.badge.answered{background:#dbeafe;color:#1e40af}.badge.closed{background:#e5e7eb;color:#374151}.msg{padding:11px 12px;border-radius:18px;margin:9px 0;white-space:pre-wrap;line-height:1.8}.msg.user{background:#eff6ff;border:1px solid #bfdbfe;margin-left:35px}.msg.admin{background:#ecfdf5;border:1px solid #a7f3d0;margin-right:35px}.msg .who{font-size:12px;color:var(--muted);margin-bottom:4px;font-weight:700}.empty{text-align:center;color:var(--muted);padding:28px 10px}.alert{border-radius:16px;padding:12px;margin-bottom:12px;background:#fff7ed;color:#9a3412;border:1px solid #fed7aa}.hidden{display:none!important}.loader{display:inline-block;width:16px;height:16px;border:2px solid #c7d2fe;border-top-color:#2563eb;border-radius:50%;animation:spin .8s linear infinite;vertical-align:middle}@keyframes spin{to{transform:rotate(360deg)}}.footer{font-size:11px;color:var(--muted);text-align:center;margin-top:10px}.ltr{direction:ltr;text-align:left}[data-theme=dark] body{background:#0f172a;color:#e5e7eb}[data-theme=dark] .card,[data-theme=dark] .ticket,[data-theme=dark] textarea,[data-theme=dark] select,[data-theme=dark] input[type=file]{background:#111827;color:#e5e7eb;border-color:#334155}[data-theme=dark] .sub,[data-theme=dark] .meta,[data-theme=dark] .field label,[data-theme=dark] .empty,[data-theme=dark] .footer{color:#94a3b8}
</style>
</head>
<body>
<div class="wrap">
  <div class="top">
    <div><div class="brand">🎫 پشتیبانی</div><div class="sub">ثبت تیکت، مشاهده پاسخ‌ها و ادامه گفتگو</div></div>
    <button class="light" id="refreshBtn">🔄 بروزرسانی</button>
  </div>
  <div id="authAlert" class="alert hidden">این صفحه باید از داخل تلگرام و با دکمه مینی‌اپ ربات باز شود.</div>
  <div class="tabs">
    <button class="tab active" id="tabList">تیکت‌های من</button>
    <button class="tab" id="tabNew">ثبت تیکت جدید</button>
  </div>
  <section id="listView" class="card"><div class="empty"><span class="loader"></span> در حال بارگذاری...</div></section>
  <section id="newView" class="card hidden">
    <h3 style="margin-top:0">➕ ثبت تیکت جدید</h3>
    <div class="field"><label>موضوع</label><select id="newCategory"><option>💎 پاداش نگرفتم</option><option>👥 مشکل زیرمجموعه‌گیری</option><option>📢 مشکل سفارش ممبر</option><option>💳 مشکل پرداخت</option><option>⚠️ گزارش تخلف</option><option>🛠 سایر موارد</option></select></div>
    <div class="field"><label>متن پیام</label><textarea id="newMessage" placeholder="مشکل را کامل توضیح بده..."></textarea></div>
    <div class="field"><label>پیوست اختیاری، حداکثر ۱۲ مگابایت</label><input id="newFile" type="file"></div>
    <div class="row"><button id="createBtn" class="grow">ارسال تیکت</button><button class="light" id="clearNewBtn" type="button">پاک کردن</button></div>
  </section>
  <section id="detailView" class="card hidden"></section>
  <div class="footer">پاسخ ادمین از طریق ربات هم به شما اطلاع داده می‌شود.</div>
</div>
<script>
const tg = window.Telegram && window.Telegram.WebApp ? window.Telegram.WebApp : null;
if(tg){ tg.ready(); tg.expand(); document.documentElement.setAttribute('data-theme', tg.colorScheme || 'light'); }
const initData = tg ? tg.initData : '';
const presetTicketId = <?php echo (int)$ticketId; ?>;
const $ = id => document.getElementById(id);
let currentTicketId = 0;
function setLoading(btn, on){ if(!btn)return; btn.disabled=!!on; btn.dataset.old=btn.dataset.old||btn.innerHTML; btn.innerHTML=on?'<span class="loader"></span> صبر کن...':btn.dataset.old; }
function toast(msg){ if(tg && tg.showAlert) tg.showAlert(msg); else alert(msg); }
async function api(action, data={}, fileInput=null){
  let opt={method:'POST'};
  if(fileInput && fileInput.files && fileInput.files[0]){
    const fd=new FormData(); fd.append('action',action); fd.append('initData',initData); Object.keys(data).forEach(k=>fd.append(k,data[k])); fd.append('file',fileInput.files[0]); opt.body=fd;
  }else{
    opt.headers={'Content-Type':'application/json'}; opt.body=JSON.stringify(Object.assign({action,initData},data));
  }
  const r=await fetch('api.php?action='+encodeURIComponent(action), opt);
  const j=await r.json().catch(()=>({ok:false,error:'bad_json'}));
  if(!r.ok || !j.ok) throw j;
  return j;
}
function switchTab(tab){
  $('tabList').classList.toggle('active',tab==='list'); $('tabNew').classList.toggle('active',tab==='new');
  $('listView').classList.toggle('hidden',tab!=='list'); $('newView').classList.toggle('hidden',tab!=='new'); $('detailView').classList.add('hidden');
}
function badgeClass(s){return 'badge '+(s||'open')}
async function loadList(){
  $('listView').innerHTML='<div class="empty"><span class="loader"></span> در حال بارگذاری...</div>';
  try{
    const j=await api('list');
    if(!j.tickets.length){ $('listView').innerHTML='<div class="empty">هنوز تیکتی ثبت نکرده‌ای.<br>از تب «ثبت تیکت جدید» پیام بفرست.</div>'; return; }
    $('listView').innerHTML=j.tickets.map(t=>`<div class="ticket" data-id="${t.id}"><h3>${escapeHtml(t.subject||'تیکت پشتیبانی')}</h3><div class="meta"><span class="${badgeClass(t.status)}">${escapeHtml(t.status_label)}</span><span>کد: ${escapeHtml(t.code)}</span><span>${escapeHtml(t.updated_at)}</span></div><div style="margin-top:8px;color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${escapeHtml(t.last_message||'')}</div></div>`).join('');
    document.querySelectorAll('.ticket').forEach(el=>el.onclick=()=>loadDetail(el.dataset.id));
    if(presetTicketId && !currentTicketId){ const found=j.tickets.find(t=>String(t.id)===String(presetTicketId)); if(found) loadDetail(presetTicketId); }
  }catch(e){ handleErr(e, $('listView')); }
}
async function loadDetail(id){
  currentTicketId=id; switchTab('list'); $('detailView').classList.remove('hidden'); $('detailView').innerHTML='<div class="empty"><span class="loader"></span> در حال بارگذاری گفتگو...</div>';
  try{
    const j=await api('detail',{ticket_id:id}); const t=j.ticket;
    const closed=t.status==='closed';
    const messages=j.messages.map(m=>`<div class="msg ${m.sender_role==='admin'?'admin':'user'}"><div class="who">${m.sender_role==='admin'?'پشتیبانی':'شما'} · ${escapeHtml(m.created_at)}</div>${escapeHtml(m.text)}</div>`).join('') || '<div class="empty">پیامی وجود ندارد.</div>';
    $('detailView').innerHTML=`<div class="row" style="align-items:center;justify-content:space-between"><h3 style="margin:0">${escapeHtml(t.subject||'تیکت')}</h3><span class="${badgeClass(t.status)}">${escapeHtml(t.status_label)}</span></div><div class="meta" style="margin-top:8px"><span>کد: ${escapeHtml(t.code)}</span><span>${escapeHtml(t.updated_at)}</span></div><hr style="border:0;border-top:1px solid var(--line);margin:12px 0">${messages}${closed?'<div class="alert">این تیکت بسته شده است. برای موضوع جدید، تیکت تازه ثبت کن.</div>':`<div class="field"><label>ارسال پیام جدید</label><textarea id="replyMessage" placeholder="پاسخ یا توضیح تکمیلی را بنویس..."></textarea></div><div class="field"><label>پیوست اختیاری</label><input id="replyFile" type="file"></div><div class="row"><button id="replyBtn" class="grow">ارسال پیام</button><button id="backListBtn" class="light" type="button">بازگشت</button></div>`}`;
    if(!closed){ $('replyBtn').onclick=sendReply; $('backListBtn').onclick=()=>{$('detailView').classList.add('hidden')}; }
  }catch(e){ handleErr(e, $('detailView')); }
}
async function createTicket(){
  if(!initData){ $('authAlert').classList.remove('hidden'); return; }
  const msg=$('newMessage').value.trim(); const file=$('newFile');
  if(!msg && !(file.files&&file.files[0])) return toast('متن پیام یا فایل پیوست را وارد کن.');
  setLoading($('createBtn'),true);
  try{ const j=await api('create',{category:$('newCategory').value,message:msg},file); $('newMessage').value=''; $('newFile').value=''; toast('تیکت ثبت شد.'); switchTab('list'); await loadList(); if(j.ticket&&j.ticket.id) loadDetail(j.ticket.id); }
  catch(e){ if(e.error==='open_ticket_exists'){ toast('شما یک تیکت باز دارید. همان تیکت را ادامه بده.'); switchTab('list'); loadList(); } else handleErr(e); }
  finally{ setLoading($('createBtn'),false); }
}
async function sendReply(){
  const msg=$('replyMessage').value.trim(); const file=$('replyFile'); if(!msg && !(file.files&&file.files[0])) return toast('متن پیام یا فایل پیوست را وارد کن.');
  setLoading($('replyBtn'),true);
  try{ await api('reply',{ticket_id:currentTicketId,message:msg},file); toast('پیام ارسال شد.'); await loadDetail(currentTicketId); }
  catch(e){ handleErr(e); }
  finally{ setLoading($('replyBtn'),false); }
}
function escapeHtml(s){return String(s||'').replace(/[&<>'"]/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;',"'":'&#039;','"':'&quot;'}[c]));}
function handleErr(e, container){
  console.error(e); let msg='خطا در ارتباط با سرور.';
  if(e.reason==='bad_hash'||e.error==='unauthorized') msg='ورود مینی‌اپ معتبر نیست. صفحه را از داخل تلگرام و دکمه ربات باز کن.';
  else if(e.reason==='expired') msg='نشست مینی‌اپ منقضی شده. صفحه را ببند و دوباره از ربات باز کن.';
  else if(e.error==='sql_disabled') msg='دیتابیس تیکت فعال نیست.';
  else if(e.error==='file_too_large') msg='حجم فایل بیشتر از حد مجاز است.';
  else if(e.error==='bad_file_type') msg='نوع فایل مجاز نیست.';
  else if(e.error==='ticket_closed') msg='این تیکت بسته شده است.';
  if(container) container.innerHTML='<div class="alert">'+escapeHtml(msg)+'</div>'; else toast(msg);
}
$('tabList').onclick=()=>{switchTab('list');loadList();}; $('tabNew').onclick=()=>switchTab('new'); $('refreshBtn').onclick=()=>loadList(); $('createBtn').onclick=createTicket; $('clearNewBtn').onclick=()=>{$('newMessage').value='';$('newFile').value='';};
if(!initData) $('authAlert').classList.remove('hidden'); loadList();
</script>
</body></html>
