{% extends "base.html" %}
{% block title %}ساخت فوروارد{% endblock %}
{% block page_title %}<i class="bi bi-send-plus"></i> ساخت فوروارد{% endblock %}

{% block head %}
<style>
  .wz-steps { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1.5rem; }
  .wz-step { font-size:.72rem; padding:.35rem .7rem; border-radius:20px; background:rgba(222,222,224,.08); color:var(--text-muted); font-weight:600; }
  .wz-step.active { background:var(--accent); color:#04121f; }
  .wz-step.done { background:rgba(96,165,95,.22); color:#8fd08e; }
  .wz-pane { display:none; } .wz-pane.active { display:block; }
  .pick-item { cursor:pointer; border:1px solid var(--border); border-radius:var(--radius-sm); padding:.6rem .8rem; margin-bottom:.5rem; background:var(--card-elev); }
  .pick-item:hover { border-color:var(--accent); } .pick-item.selected { border-color:var(--accent); background:rgba(96,165,95,.12); }
</style>
{% endblock %}

{% block content %}
<div class="wz-steps">
  {% for label in ['نام فوروارد','انتخاب اکانت','گفتگوی(های) مبدأ','گفتگوی(های) مقصد','هوش مصنوعی','ارسال به بله','تاییدیه','امضا','مرور و ساخت'] %}
  <span class="wz-step" data-step="{{ loop.index0 }}">{{ loop.index }}. {{ label }}</span>
  {% endfor %}
</div>

<div class="card"><div class="card-body">

  {# Step 0 — name #}
  <div class="wz-pane active" data-pane="0">
    <h6 class="mb-3"><i class="bi bi-pencil-square me-2 text-accent"></i>نام فوروارد</h6>
    <input class="form-control" id="fwName" placeholder="مثلاً: فوروارد سیگنال طلا">
  </div>

  {# Step 1 — account #}
  <div class="wz-pane" data-pane="1">
    <h6 class="mb-3"><i class="bi bi-person-badge me-2 text-accent"></i>انتخاب اکانت (از مدیریت اکانت‌ها)</h6>
    {% for a in accounts %}
    <div class="pick-item" onclick="pickAccount({{ a.id }}, this)">
      <div class="fw-semibold">{{ a.name }}</div>
      <div class="text-muted text-xs">{{ a.health_status }} {% if a.tg_username %}· @{{ a.tg_username }}{% endif %}</div>
    </div>
    {% else %}
    <div class="alert alert-warning">اکانتی موجود نیست. ابتدا از «مدیریت اکانت‌ها» یک اکانت تلگرام بسازید.</div>
    {% endfor %}
  </div>

  {# Step 2 — source chats (multi-select) #}
  <div class="wz-pane" data-pane="2">
    <h6 class="mb-3"><i class="bi bi-box-arrow-in-down me-2 text-accent"></i>گفتگوی(های) مبدأ <span id="sourceCount" class="badge bg-secondary"></span></h6>
    <div class="small text-muted mb-2">می‌توانید چند گفتگو به‌عنوان مبدأ انتخاب کنید — هر پیام جدید در هرکدام از این گفتگوها فوروارد خواهد شد.</div>
    <button class="btn btn-sm btn-primary mb-2" onclick="loadChats()"><i class="bi bi-cloud-download me-1"></i>دریافت لیست گفتگوهای این اکانت</button>
    <span id="chatStatus" class="small text-muted ms-2"></span>
    <input class="form-control form-control-sm my-2" id="sourceSearch" placeholder="جستجو..." oninput="renderSource()" style="max-width:280px">
    <div id="sourceList" style="max-height:320px;overflow:auto"></div>
  </div>

  {# Step 3 — destination chats (multi-select) #}
  <div class="wz-pane" data-pane="3">
    <h6 class="mb-3"><i class="bi bi-box-arrow-up me-2 text-accent"></i>گفتگوی(های) مقصد <span id="destCount" class="badge bg-secondary"></span></h6>
    <div class="small text-muted mb-2">می‌توانید چند گفتگو به‌عنوان مقصد انتخاب کنید — هر پیام از هرکدام از مبدأها، در همهٔ این گفتگوها فوروارد خواهد شد. مقصدها باید با مبدأها متفاوت باشند.</div>
    <input class="form-control form-control-sm my-2" id="destSearch" placeholder="جستجو..." oninput="renderDest()" style="max-width:280px">
    <div id="destList" style="max-height:320px;overflow:auto"></div>
  </div>

  {# Step 4 — AI #}
  <div class="wz-pane" data-pane="4">
    <h6 class="mb-3"><i class="bi bi-stars me-2 text-accent"></i>آیا می‌خواهید از هوش مصنوعی استفاده کنید؟</h6>
    <div class="form-check form-switch mb-3">
      <input class="form-check-input" type="checkbox" id="aiEnabled" onchange="toggleAi()">
      <label class="form-check-label" for="aiEnabled">فعال‌سازی بازنویسی با هوش مصنوعی (با حفظ معنی اصلی)</label>
    </div>
    <div id="aiOpts" style="display:none">
      <label class="form-label">اکانت هوش مصنوعی (Provider)</label>
      <select id="aiProvider" class="form-select mb-2">
        <option value="">— انتخاب Provider —</option>
        {% for p in providers %}<option value="{{ p.id }}">{{ p.name }} ({{ p.model or p.provider_type }})</option>{% endfor %}
      </select>
      <label class="form-label">پرامپت اختصاصی این فوروارد (اختیاری — خالی = پیش‌فرض)</label>
      <textarea id="aiPrompt" class="form-control" rows="3" placeholder="مثلاً: متن را حرفه‌ای‌تر بازنویسی کن و اعداد را تغییر نده..."></textarea>
    </div>
  </div>

  {# Step 5 — Bale #}
  <div class="wz-pane" data-pane="5">
    <h6 class="mb-3"><i class="bi bi-chat-dots me-2 text-accent"></i>آیا می‌خواهید این فوروارد به بله هم ارسال شود؟</h6>
    <div class="form-check form-switch mb-3">
      <input class="form-check-input" type="checkbox" id="baleEnabled" onchange="toggleBale()">
      <label class="form-check-label" for="baleEnabled">فعال‌سازی ارسال هم‌زمان به بله</label>
    </div>
    <div id="baleOpts" style="display:none">
      <label class="form-label">اکانت بله</label>
      <select id="baleAccount" class="form-select mb-2">
        <option value="">— انتخاب اکانت بله —</option>
        {% for b in bale_accounts %}<option value="{{ b.id }}">{{ b.name }}</option>{% endfor %}
      </select>
      {% if not bale_accounts %}
      <div class="alert alert-warning py-2 small">هیچ اکانت بله‌ای موجود نیست. ابتدا از «مدیریت اکانت‌ها» یک اکانت بله بسازید.</div>
      {% endif %}
      <label class="form-label">چت آیدی مقصد در بله</label>
      <input class="form-control" id="baleChatId" placeholder="مثلاً: 123456789">
      <small class="text-muted d-block mt-1">این چت آیدی مستقل از تنظیمات پیش‌فرض اکانت بله است — دقیقاً همین مقصد استفاده می‌شود.</small>
    </div>
  </div>

  {# Step 6 — approval #}
  <div class="wz-pane" data-pane="6">
    <h6 class="mb-3"><i class="bi bi-patch-check me-2 text-accent"></i>آیا قبل از فوروارد نیاز به تاییدیه هست؟</h6>
    <div class="form-check form-switch mb-3">
      <input class="form-check-input" type="checkbox" id="approvalRequired" onchange="toggleApproval()">
      <label class="form-check-label" for="approvalRequired">فعال‌سازی نیاز به تاییدیهٔ دستی قبل از فوروارد</label>
    </div>
    <div class="text-muted text-xs mb-3">اگر فعال نباشد، مثل الان بلافاصله پس از ارسال پیام در مبدأ، در مقصد فوروارد می‌شود. اگر فعال باشد، پیام (در صورت فعال‌بودن بازنویسی هوش مصنوعی، نسخهٔ بازنویسی‌شده) — همراه با عکس/رسانهٔ آن در صورت وجود — برای شخص مشخص‌شده ارسال می‌شود و او می‌تواند فقط متن، فقط رسانه، یا هر دو را تایید کند، یا رد کند.</div>
    <div id="approvalOpts" style="display:none">
      <label class="form-label">ربات تایید (از مدیریت اکانت‌ها › ربات تلگرام)</label>
      <select id="approvalBot" class="form-select mb-2">
        <option value="">— انتخاب ربات —</option>
        {% for bot in bot_accounts %}<option value="{{ bot.id }}">{{ bot.name }}</option>{% endfor %}
      </select>
      {% if not bot_accounts %}
      <div class="alert alert-warning py-2 small">هیچ رباتی موجود نیست. ابتدا از «مدیریت اکانت‌ها» › «ربات تلگرام» یک ربات با توکن آن بسازید.</div>
      {% endif %}
      <label class="form-label">چت آیدی تأییدکننده</label>
      <div class="d-flex gap-2 align-items-start">
        <input class="form-control" id="approverChatId" placeholder="با دکمهٔ کنار پر می‌شود، یا دستی وارد کنید">
        <button type="button" class="btn btn-outline-primary" id="getChatIdBtn" onclick="getChatId()" style="white-space:nowrap"><i class="bi bi-person-check me-1"></i>دریافت چت آیدی</button>
      </div>
      <div id="getChatIdStatus" class="small mt-1"></div>
      <small class="text-muted d-block mt-1">پس از کلیک، ابتدا شخص تأییدکننده باید هر پیامی به ربات بفرستد (مثلاً /start)؛ چت آیدی و نامش خودکار اینجا نمایش داده می‌شود.</small>
    </div>
  </div>

  {# Step 7 — signature #}
  <div class="wz-pane" data-pane="7">
    <h6 class="mb-3"><i class="bi bi-vector-pen me-2 text-accent"></i>آیا می‌خواهید امضا به پیام‌های فوروارد اضافه شود؟</h6>
    <div class="form-check form-switch mb-3">
      <input class="form-check-input" type="checkbox" id="signatureEnabled" onchange="toggleSignature()">
      <label class="form-check-label" for="signatureEnabled">فعال‌سازی امضای پیام</label>
    </div>
    <div id="signatureOpts" style="display:none">
      <label class="form-label">متن امضا</label>
      <textarea id="signatureText" class="form-control" rows="3" placeholder="مثلاً: کانال ما را دنبال کنید..."></textarea>
      <small class="text-muted d-block mt-1">این متن با یک خط فاصله به انتهای هر پیام فوروارد‌شده اضافه می‌شود، مثلاً:<br>
        <span class="font-mono">این یک پیام تست است</span><br><span class="font-mono">(امضا)</span></small>
    </div>
  </div>

  {# Step 8 — review #}
  <div class="wz-pane" data-pane="8">
    <h6 class="mb-3"><i class="bi bi-eye me-2 text-accent"></i>مرور و ساخت</h6>
    <pre id="review" class="font-mono" style="background:var(--card-elev);border:1px solid var(--border);border-radius:var(--radius-sm);padding:1rem;font-size:.78rem;direction:ltr;max-height:300px;overflow:auto"></pre>
    <button class="btn btn-success" id="createBtn" onclick="createTask()"><i class="bi bi-check2-circle me-1"></i>ساخت فوروارد</button>
    <div id="createStatus" class="mt-2"></div>
  </div>

  <hr>
  <div class="d-flex justify-content-between">
    <button class="btn btn-outline-secondary" id="prevBtn" onclick="go(-1)"><i class="bi bi-arrow-right me-1"></i>قبلی</button>
    <button class="btn btn-primary" id="nextBtn" onclick="go(1)">بعدی<i class="bi bi-arrow-left ms-1"></i></button>
  </div>
</div></div>
{% endblock %}

{% block scripts %}
<script>
let step=0, accountId=null, sources=[], destinations=[], allChats=[];

function show(n){
  step=Math.max(0,Math.min(8,n));
  document.querySelectorAll('.wz-pane').forEach(p=>p.classList.toggle('active',+p.dataset.pane===step));
  document.querySelectorAll('.wz-step').forEach(s=>{const i=+s.dataset.step;s.classList.toggle('active',i===step);s.classList.toggle('done',i<step);});
  document.getElementById('prevBtn').style.visibility=step===0?'hidden':'visible';
  document.getElementById('nextBtn').style.visibility=step>=8?'hidden':'visible';
  if(step===3) renderDest();
  if(step===8) document.getElementById('review').textContent=JSON.stringify(buildPayload(),null,2);
}
function go(d){ if(d>0&&!validate())return; show(step+d); }
function validate(){
  if(step===0&&!document.getElementById('fwName').value.trim()){alert('نام فوروارد را وارد کنید');return false;}
  if(step===1&&!accountId){alert('یک اکانت انتخاب کنید');return false;}
  if(step===2&&sources.length===0){alert('حداقل یک گفتگوی مبدأ انتخاب کنید');return false;}
  if(step===3&&destinations.length===0){alert('حداقل یک گفتگوی مقصد انتخاب کنید');return false;}
  if(step===3&&destinations.some(d=>sources.some(s=>s.chat_id===d.chat_id))){alert('یک گفتگو نمی‌تواند هم مبدأ و هم مقصد باشد');return false;}
  if(step===4&&document.getElementById('aiEnabled').checked&&!document.getElementById('aiProvider').value){alert('برای بازنویسی با هوش مصنوعی باید یک Provider انتخاب کنید');return false;}
  if(step===5&&document.getElementById('baleEnabled').checked&&(!document.getElementById('baleAccount').value||!document.getElementById('baleChatId').value.trim())){alert('برای ارسال به بله باید اکانت بله و چت آیدی مقصد را مشخص کنید');return false;}
  if(step===6&&document.getElementById('approvalRequired').checked&&(!document.getElementById('approvalBot').value||!document.getElementById('approverChatId').value.trim())){alert('برای نیاز به تاییدیه باید ربات و چت آیدی تأییدکننده را مشخص کنید');return false;}
  if(step===7&&document.getElementById('signatureEnabled').checked&&!document.getElementById('signatureText').value.trim()){alert('متن امضا را وارد کنید');return false;}
  return true;
}
function pickAccount(id,el){
  accountId=id;
  document.querySelectorAll('[data-pane="1"] .pick-item').forEach(x=>x.classList.remove('selected'));
  el.classList.add('selected');
  allChats=[]; sources=[]; destinations=[];
  document.getElementById('chatStatus').textContent='';
  updateSourceCount(); updateDestCount();
}
function loadChats(){
  if(!accountId){alert('ابتدا اکانت را انتخاب کنید');return;}
  const st=document.getElementById('chatStatus'); st.textContent='در حال بارگذاری...';
  fetch(`/fixed-messages/api/chats/${accountId}`).then(r=>r.json()).then(d=>{
    if(!d.ok){st.textContent='خطا: '+(d.error||'');return;}
    allChats=d.chats||[]; st.textContent=allChats.length+' چت بارگذاری شد'; renderSource();
  }).catch(e=>st.textContent='خطای شبکه');
}
function updateSourceCount(){ document.getElementById('sourceCount').textContent=sources.length?sources.length+' انتخاب شده':''; }
function updateDestCount(){ document.getElementById('destCount').textContent=destinations.length?destinations.length+' انتخاب شده':''; }

function renderSource(){
  const q=document.getElementById('sourceSearch').value.trim().toLowerCase();
  const list=document.getElementById('sourceList'); list.innerHTML='';
  allChats.filter(c=>!q||(c.name+c.id+(c.username||'')).toLowerCase().includes(q)).slice(0,300).forEach(c=>{
    const div=document.createElement('div');
    const sel=sources.some(s=>s.chat_id===c.id);
    div.className='pick-item'+(sel?' selected':'');
    div.innerHTML=`<div class="fw-semibold">${sel?'<i class="bi bi-check-square me-1"></i>':''}${esc(c.name)}</div><div class="text-muted text-xs">${esc(c.id)} · ${esc(c.type)} ${c.username?'· '+esc(c.username):''}</div>`;
    div.onclick=()=>{
      const idx=sources.findIndex(s=>s.chat_id===c.id);
      if(idx>=0) sources.splice(idx,1); else sources.push({chat_id:c.id,title:c.name,type:c.type});
      renderSource(); updateSourceCount();
    };
    list.appendChild(div);
  });
}
function renderDest(){
  const q=document.getElementById('destSearch').value.trim().toLowerCase();
  const list=document.getElementById('destList'); list.innerHTML='';
  allChats.filter(c=>!q||(c.name+c.id+(c.username||'')).toLowerCase().includes(q)).slice(0,300).forEach(c=>{
    const div=document.createElement('div');
    const sel=destinations.some(d=>d.chat_id===c.id);
    div.className='pick-item'+(sel?' selected':'');
    div.innerHTML=`<div class="fw-semibold">${sel?'<i class="bi bi-check-square me-1"></i>':''}${esc(c.name)}</div><div class="text-muted text-xs">${esc(c.id)} · ${esc(c.type)} ${c.username?'· '+esc(c.username):''}</div>`;
    div.onclick=()=>{
      const idx=destinations.findIndex(d=>d.chat_id===c.id);
      if(idx>=0) destinations.splice(idx,1); else destinations.push({chat_id:c.id,title:c.name,type:c.type});
      renderDest(); updateDestCount();
    };
    list.appendChild(div);
  });
}
function toggleAi(){ document.getElementById('aiOpts').style.display=document.getElementById('aiEnabled').checked?'block':'none'; }
function toggleBale(){ document.getElementById('baleOpts').style.display=document.getElementById('baleEnabled').checked?'block':'none'; }
function toggleApproval(){ document.getElementById('approvalOpts').style.display=document.getElementById('approvalRequired').checked?'block':'none'; }
function toggleSignature(){ document.getElementById('signatureOpts').style.display=document.getElementById('signatureEnabled').checked?'block':'none'; }

let chatIdPollTimer=null;
function getChatId(){
  const botId=document.getElementById('approvalBot').value;
  const st=document.getElementById('getChatIdStatus');
  if(!botId){ st.className='small mt-1 text-danger'; st.textContent='ابتدا ربات را انتخاب کنید'; return; }
  const btn=document.getElementById('getChatIdBtn');
  const orig=btn.innerHTML;
  btn.disabled=true; btn.innerHTML='<span class="spinner-border spinner-border-sm"></span>';
  st.className='small mt-1 text-muted';
  st.textContent='منتظر پیام از طرف تأییدکننده به ربات... (هر پیامی، مثلاً /start)';
  fetch(`/forward-rules/api/bot/${botId}/listen`,{method:'POST'}).then(r=>r.json()).then(d=>{
    if(!d.ok){ st.className='small mt-1 text-danger'; st.textContent='خطا: '+(d.error||''); btn.disabled=false; btn.innerHTML=orig; return; }
    let elapsed=0;
    clearInterval(chatIdPollTimer);
    chatIdPollTimer=setInterval(()=>{
      elapsed+=2;
      fetch(`/forward-rules/api/bot/${botId}/captured`).then(r=>r.json()).then(c=>{
        if(c && c.chat_id){
          clearInterval(chatIdPollTimer);
          document.getElementById('approverChatId').value=c.chat_id;
          const fullName=[c.first_name,c.last_name].filter(Boolean).join(' ')||'(بدون نام)';
          st.className='small mt-1 text-success';
          st.textContent=`دریافت شد: ${fullName} (چت آیدی: ${c.chat_id})`;
          btn.disabled=false; btn.innerHTML=orig;
        } else if(c && c.poll_error){
          // Keep polling (e.g. deleteWebhook can resolve this on its own a
          // few seconds after the poller starts) but show what's actually
          // wrong instead of a silent spinner.
          st.className='small mt-1 text-warning';
          st.textContent='مشکل ارتباط با ربات: '+c.poll_error;
        } else if(elapsed>=120){
          clearInterval(chatIdPollTimer);
          st.className='small mt-1 text-danger';
          st.textContent='زمان تمام شد — دوباره تلاش کنید.';
          btn.disabled=false; btn.innerHTML=orig;
        }
      }).catch(()=>{});
    },2000);
  }).catch(()=>{ st.className='small mt-1 text-danger'; st.textContent='خطای شبکه'; btn.disabled=false; btn.innerHTML=orig; });
}

function buildPayload(){
  return {
    name: document.getElementById('fwName').value.trim(),
    account_id: accountId, sources, destinations,
    ai_enabled: document.getElementById('aiEnabled').checked,
    ai_provider_id: document.getElementById('aiProvider').value||null,
    ai_prompt: document.getElementById('aiPrompt').value.trim(),
    bale_enabled: document.getElementById('baleEnabled').checked,
    bale_account_id: document.getElementById('baleAccount').value||null,
    bale_chat_id: document.getElementById('baleChatId').value.trim(),
    approval_required: document.getElementById('approvalRequired').checked,
    approval_bot_id: document.getElementById('approvalBot').value||null,
    approver_chat_id: document.getElementById('approverChatId').value.trim(),
    signature_enabled: document.getElementById('signatureEnabled').checked,
    signature_text: document.getElementById('signatureText').value.trim(),
  };
}
function createTask(){
  const btn=document.getElementById('createBtn'), st=document.getElementById('createStatus');
  btn.disabled=true; btn.innerHTML='<span class="spinner-border spinner-border-sm me-2"></span>در حال ساخت...';
  fetch('/forward-rules/create-task',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(buildPayload())})
    .then(r=>r.json()).then(d=>{ if(d.error){st.innerHTML=`<div class="alert alert-danger">${esc(d.error)}</div>`;btn.disabled=false;btn.innerHTML='<i class="bi bi-check2-circle me-1"></i>ساخت فوروارد';}
      else location.href=d.redirect; })
    .catch(e=>{st.innerHTML='<div class="alert alert-danger">خطای شبکه</div>';btn.disabled=false;});
}
function esc(s){return String(s==null?'':s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');}
show(0);
</script>
{% endblock %}