{% extends "base.html" %}
{% block title %}ساخت پیام ثابت{% endblock %}
{% block page_title %}<i class="bi bi-pin-angle"></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 — accounts (unlimited) #}
  <div class="wz-pane active" data-pane="0">
    <h6 class="mb-3"><i class="bi bi-person-badge me-2 text-accent"></i>انتخاب اکانت‌ها (از مدیریت اکانت‌ها)</h6>
    <p class="text-muted text-xs">هر تعداد اکانت که انتخاب کنید، ارسال به‌صورت چرخشی (Round-robin) بین آن‌ها انجام می‌شود.</p>
    {% for a in accounts %}
    <div class="pick-item" onclick="toggleAccount({{ a.id }}, this)" data-aid="{{ a.id }}">
      <div class="d-flex align-items-center gap-2">
        <input type="checkbox" class="form-check-input" data-achk="{{ a.id }}" onclick="event.stopPropagation()">
        <div><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>
      </div>
    </div>
    {% else %}
    <div class="alert alert-warning">اکانتی موجود نیست. ابتدا از «مدیریت اکانت‌ها» یک اکانت تلگرام بسازید.</div>
    {% endfor %}
  </div>

  {# Step 1 — destination #}
  <div class="wz-pane" data-pane="1">
    <h6 class="mb-3"><i class="bi bi-geo-alt me-2 text-accent"></i>انتخاب مقصد</h6>
    <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="chatSearch" placeholder="جستجو..." oninput="renderChats()" style="max-width:280px">
    <div id="chatList" style="max-height:320px;overflow:auto"></div>
  </div>

  {# Step 2 — text + media #}
  <div class="wz-pane" data-pane="2">
    <h6 class="mb-3"><i class="bi bi-pencil-square me-2 text-accent"></i>متن و رسانهٔ پیام</h6>
    <textarea id="msgText" class="form-control mb-3" rows="5" placeholder="متن پیامی که به‌صورت دوره‌ای ارسال می‌شود... (اختیاری در صورت پیوست رسانه)"></textarea>

    <label class="form-label">رسانهٔ پیوست (اختیاری — عکس، ویدیو، ویس، موزیک، فایل از هر نوع)</label>
    <div class="d-flex gap-2 align-items-center flex-wrap">
      <input type="file" id="msgMedia" class="form-control" style="max-width:320px" onchange="onMediaChosen()">
      <select id="msgMediaKind" class="form-select" style="max-width:220px" disabled>
        <option value="auto">خودکار (پیشنهادی)</option>
        <option value="voice">پیام صوتی (ویس)</option>
        <option value="document">فایل خام (بدون فشرده‌سازی)</option>
      </select>
      <button type="button" class="btn btn-sm btn-outline-danger" id="msgMediaClear" onclick="clearMedia()" style="display:none">
        <i class="bi bi-x-lg me-1"></i>حذف رسانه
      </button>
    </div>
    <small class="text-muted d-block mt-1">این رسانه در هر ارسال دوره‌ای، همراه با متن بالا به‌عنوان کپشن، ارسال می‌شود. می‌توانید فقط متن، فقط رسانه، یا هر دو را با هم ارسال کنید.</small>
    <div id="msgMediaName" class="text-xs text-muted mt-1"></div>
  </div>

  {# Step 3 — schedule #}
  <div class="wz-pane" data-pane="3">
    <h6 class="mb-3"><i class="bi bi-clock-history me-2 text-accent"></i>نحوه ارسال</h6>
    <div class="row g-2 align-items-end">
      <div class="col-md-4"><label class="form-label">هر چند دقیقه ارسال شود</label><input id="schedValue" type="number" class="form-control" value="10" min="1"></div>
    </div>
    <small class="text-muted d-block mt-2" id="schedNote"></small>
  </div>

  {# Step 4 — completion #}
  <div class="wz-pane" data-pane="4">
    <h6 class="mb-3"><i class="bi bi-flag me-2 text-accent"></i>نوع پایان</h6>
    <div class="btn-group btn-group-sm mb-3" role="group">
      <button type="button" class="btn btn-primary" data-comp="manual" onclick="setCompletion(this)">دستی</button>
      <button type="button" class="btn btn-outline-primary" data-comp="automatic" onclick="setCompletion(this)">اتوماتیک</button>
    </div>
    <div id="autoOpts" class="row g-2" style="display:none">
      <div class="col-md-4"><label class="form-label">بعد از X پیام</label><input id="stopMsgs" type="number" class="form-control" value="0" min="0"></div>
      <div class="col-md-4"><label class="form-label">بعد از X دقیقه</label><input id="stopMins" type="number" class="form-control" value="0" min="0"></div>
      <div class="col-md-4"><label class="form-label">بعد از X ساعت</label><input id="stopHours" type="number" class="form-control" value="0" min="0"></div>
      <small class="text-muted">صفر = نادیده گرفته شود. هر شرط برآورده‌شده گفتگو را پایان می‌دهد.</small>
    </div>
    <div id="manualNote" class="text-muted small">در حالت دستی، ارسال تا زمانی که خودتان «پایان» را بزنید ادامه دارد.</div>
  </div>

  {# Step 5 — AI #}
  <div class="wz-pane" data-pane="5">
    <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">فعال‌سازی بازنویسی AI (با حفظ معنی اصلی)</label>
    </div>
    <div id="aiOpts" style="display:none">
      <div class="row g-2 mb-2">
        <div class="col-md-6"><label class="form-label">Provider</label>
          <select id="aiProvider" class="form-select">
            <option value="">— انتخاب Provider —</option>
            {% for p in providers %}<option value="{{ p.id }}">{{ p.name }} ({{ p.model or p.provider_type }})</option>{% endfor %}
          </select>
        </div>
        <div class="col-md-3"><label class="form-label">بازنویسی هر</label>
          <select id="aiMode" class="form-select">
            <option value="per_messages">X پیام یک‌بار</option>
            <option value="per_minutes">X دقیقه یک‌بار</option>
          </select>
        </div>
        <div class="col-md-3"><label class="form-label">مقدار X</label><input id="aiValue" type="number" class="form-control" value="1" min="1"></div>
      </div>
      <label class="form-label">پرامپت اختصاصی این بخش (اختیاری — خالی = پیش‌فرض)</label>
      <textarea id="aiPrompt" class="form-control" rows="3" placeholder="مثلاً: متن را حرفه‌ای‌تر و کوتاه‌تر بازنویسی کن..."></textarea>
    </div>
  </div>

  {# Step 6 — review #}
  <div class="wz-pane" data-pane="6">
    <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>
    <input class="form-control mb-2" id="fmName" placeholder="نام پیام ثابت (اختیاری)">
    <button class="btn btn-success" id="createBtn" onclick="createFm()"><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, selectedAccountIds=[], destination=null, allChats=[];
let completion='manual';

function show(n){
  step=Math.max(0,Math.min(6,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>=6?'hidden':'visible';
  if(step===3) updateSchedNote();
  if(step===6) document.getElementById('review').textContent=JSON.stringify(buildPayload(),null,2);
}
function updateSchedNote(){
  const n = selectedAccountIds.length;
  const note = document.getElementById('schedNote');
  note.textContent = n > 1
    ? `${n} اکانت انتخاب شده: اکانت اول بلافاصله ارسال می‌کند، سپس هر X دقیقه اکانت بعدی به‌صورت چرخشی — پس از رسیدن به آخرین اکانت، دوباره از اول شروع می‌شود.`
    : 'با یک اکانت: هر X دقیقه یک‌بار همان اکانت ارسال می‌کند.';
}
function go(d){ if(d>0&&!validate())return; show(step+d); }
function validate(){
  if(step===0&&selectedAccountIds.length===0){alert('حداقل یک اکانت انتخاب کنید');return false;}
  if(step===1&&!destination){alert('یک مقصد انتخاب کنید');return false;}
  if(step===2&&!document.getElementById('msgText').value.trim()&&!document.getElementById('msgMedia').files.length){alert('متن پیام یا یک رسانه را وارد کنید');return false;}
  return true;
}
function onMediaChosen(){
  const f=document.getElementById('msgMedia').files[0];
  document.getElementById('msgMediaKind').disabled=!f;
  document.getElementById('msgMediaClear').style.display=f?'inline-block':'none';
  document.getElementById('msgMediaName').textContent=f?`انتخاب شد: ${f.name} (${(f.size/1024).toFixed(0)} KB)`:'';
}
function clearMedia(){
  document.getElementById('msgMedia').value='';
  onMediaChosen();
}
function toggleAccount(id,el){
  const chk=el.querySelector('[data-achk]');
  chk.checked=!chk.checked;
  el.classList.toggle('selected',chk.checked);
  selectedAccountIds=[...document.querySelectorAll('[data-achk]:checked')].map(c=>+c.dataset.achk);
  allChats=[]; destination=null;
}
function loadChats(){
  if(!selectedAccountIds.length){alert('ابتدا حداقل یک اکانت انتخاب کنید');return;}
  const st=document.getElementById('chatStatus'); st.textContent='در حال بارگذاری...';
  fetch(`/fixed-messages/api/chats/${selectedAccountIds[0]}`).then(r=>r.json()).then(d=>{
    if(!d.ok){st.textContent='خطا: '+(d.error||'');return;}
    allChats=d.chats||[]; st.textContent=allChats.length+' چت بارگذاری شد'; renderChats();
  }).catch(e=>st.textContent='خطای شبکه');
}
function renderChats(){
  const q=document.getElementById('chatSearch').value.trim().toLowerCase();
  const list=document.getElementById('chatList'); 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');
    div.className='pick-item'+(destination&&destination.chat_id===c.id?' selected':'');
    div.innerHTML=`<div class="fw-semibold">${esc(c.name)}</div><div class="text-muted text-xs">${esc(c.id)} · ${esc(c.type)} ${c.username?'· '+esc(c.username):''}</div>`;
    div.onclick=()=>{ destination={chat_id:c.id,title:c.name,type:c.type}; renderChats(); };
    list.appendChild(div);
  });
}
function setCompletion(btn){ completion=btn.dataset.comp; document.querySelectorAll('[data-comp]').forEach(b=>{b.classList.toggle('btn-primary',b===btn);b.classList.toggle('btn-outline-primary',b!==btn);}); document.getElementById('autoOpts').style.display=completion==='automatic'?'flex':'none'; document.getElementById('manualNote').style.display=completion==='automatic'?'none':'block'; }
function toggleAi(){ document.getElementById('aiOpts').style.display=document.getElementById('aiEnabled').checked?'block':'none'; }
function buildPayload(){
  return {
    name: document.getElementById('fmName').value.trim(),
    account_ids: selectedAccountIds, destination,
    message_text: document.getElementById('msgText').value.trim(),
    media_kind: document.getElementById('msgMediaKind').value,
    schedule_mode: 'per_minutes', schedule_value: +document.getElementById('schedValue').value||10,
    completion_type: completion,
    stop_after_messages: +document.getElementById('stopMsgs').value||0,
    stop_after_minutes: +document.getElementById('stopMins').value||0,
    stop_after_hours: +document.getElementById('stopHours').value||0,
    ai_enabled: document.getElementById('aiEnabled').checked,
    ai_provider_id: document.getElementById('aiProvider').value||null,
    ai_rewrite_mode: document.getElementById('aiMode').value,
    ai_rewrite_value: +document.getElementById('aiValue').value||1,
    ai_prompt: document.getElementById('aiPrompt').value.trim(),
  };
}
function createFm(){
  const btn=document.getElementById('createBtn'), st=document.getElementById('createStatus');
  btn.disabled=true; btn.innerHTML='<span class="spinner-border spinner-border-sm me-2"></span>در حال ساخت...';
  const payload=buildPayload();
  const mediaFile=document.getElementById('msgMedia').files[0];
  let opts;
  if(mediaFile){
    const fd=new FormData();
    fd.append('payload', JSON.stringify(payload));
    fd.append('media', mediaFile);
    opts={method:'POST', body:fd};
  } else {
    opts={method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify(payload)};
  }
  fetch('/fixed-messages/create', opts)
    .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 %}