{% extends "base.html" %}
{% block title %}تعامل جدید{% endblock %}
{% block page_title %}<i class="bi bi-magic"></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); color:var(--text-main); }
  .pick-item:hover { border-color:var(--accent); }
  .pick-item.selected { border-color:var(--accent); background:rgba(96,165,95,.12); }
</style>
{% endblock %}

{% block content %}
{% include "interactions/_nav.html" %}

<div class="wz-steps" id="wzSteps">
  {% for label in ['انتخاب اکانت','مقصد و موضوع','انتخاب اکانت‌ها','AI هر اکانت','Persona/Role','تنظیمات و Rate','شرایط پایان','مرور','ساخت'] %}
  <span class="wz-step" data-step="{{ loop.index0 }}">{{ loop.index }}. {{ label }}</span>
  {% endfor %}
</div>

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

  {# Step 0 — Account #}
  <div class="wz-pane active" data-pane="0">
    <h6 class="mb-3"><i class="bi bi-diagram-3 me-2 text-accent"></i>انتخاب اکانت</h6>
    {% if mothers %}
      {% for m in mothers %}
      <div class="pick-item" onclick="pickMother({{ m.id }}, this)">
        <div class="fw-semibold">{{ m.name }}</div>
        <div class="text-muted text-xs">{{ m.health_status }} · {{ m.tg_username or '' }}</div>
      </div>
      {% endfor %}
    {% else %}
      <div class="alert alert-warning">هیچ اکانتی برای این تعامل تعریف نشده است. ابتدا از بخش «مدیریت اکانت‌ها» یک اکانت تلگرام بسازید.</div>
    {% endif %}
  </div>

  {# Step 1 — Destination + meta #}
  <div class="wz-pane" data-pane="1">
    <h6 class="mb-3"><i class="bi bi-geo-alt me-2 text-accent"></i>مقصد گفتگو و موضوع</h6>
    <div class="row g-3 mb-3">
      <div class="col-md-4"><label class="form-label">نام تعامل *</label><input id="wzName" class="form-control" placeholder="مثلاً بحث طلا"></div>
      <div class="col-md-4"><label class="form-label">موضوع گفتگو</label><input id="wzTopic" class="form-control"></div>
      <div class="col-md-4">
        <label class="form-label">سناریو گفتگو</label>
        <select id="wzScenario" class="form-select">
          <option value="">بدون سناریو</option>
          {% for s in scenarios %}<option value="{{ s.id }}">{{ s.name }}</option>{% endfor %}
        </select>
      </div>
      <div class="col-12"><label class="form-label">پیام اولیه (اختیاری)</label><textarea id="wzInitial" class="form-control" rows="2"></textarea></div>
    </div>
    <button class="btn btn-sm btn-primary mb-2" onclick="loadDestinations()"><i class="bi bi-cloud-download me-1"></i>بارگذاری گفتگوها/گروه‌ها/کانال‌های این اکانت</button>
    <div id="destStatus" class="small text-muted d-inline-block ms-2"></div>
    <div class="btn-group btn-group-sm my-2 d-block" role="group" id="destCatTabs">
      <button type="button" class="btn btn-outline-secondary active" data-cat="" onclick="setDestCat('', this)">همه</button>
      <button type="button" class="btn btn-outline-secondary" data-cat="private" onclick="setDestCat('private', this)">گفتگوها</button>
      <button type="button" class="btn btn-outline-secondary" data-cat="group" onclick="setDestCat('group', this)">گروه‌ها</button>
      <button type="button" class="btn btn-outline-secondary" data-cat="channel" onclick="setDestCat('channel', this)">کانال‌ها</button>
    </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 2 — Select workers #}
  <div class="wz-pane" data-pane="2">
    <h6 class="mb-3"><i class="bi bi-people me-2 text-accent"></i>انتخاب اکانت‌های شرکت‌کننده</h6>

    <div class="card mb-3" style="border-color:var(--accent)">
      <div class="card-body py-2 d-flex flex-wrap align-items-center gap-2">
        <div class="form-check form-switch mb-0">
          <input class="form-check-input" type="checkbox" id="motherJoins" onchange="onMotherToggle()">
          <label class="form-check-label fw-semibold" for="motherJoins">ورود اکانت انتخاب‌شده به گفتگو</label>
        </div>
        <span class="text-muted text-xs">در صورت فعال بودن، اکانت انتخاب‌شده در گام ۱ نیز مانند سایر اکانت‌ها پیام‌ها را می‌بیند و پاسخ می‌دهد.</span>
      </div>
    </div>

    {% for w in workers %}
    <div class="pick-item" onclick="toggleWorker({{ w.id }}, this)" data-wid="{{ w.id }}">
      <div class="d-flex align-items-center gap-2">
        <input type="checkbox" class="form-check-input" data-wchk="{{ w.id }}" onclick="event.stopPropagation()">
        <div><div class="fw-semibold">{{ w.name }}</div><div class="text-muted text-xs">{{ w.health_status }} · {{ w.tg_username or '' }}</div></div>
      </div>
    </div>
    {% else %}
    <div class="alert alert-warning">هیچ Worker Account تعریف نشده است.</div>
    {% endfor %}
  </div>

  {# Step 3-4 — Per-account AI + Persona/Role (combined config table) #}
  <div class="wz-pane" data-pane="3">
    <h6 class="mb-3"><i class="bi bi-cpu me-2 text-accent"></i>AI هر اکانت</h6>
    <p class="text-muted text-xs">برای هر اکانت یک Provider انتخاب کنید.</p>
    <div id="aiConfig"></div>
  </div>
  <div class="wz-pane" data-pane="4">
    <h6 class="mb-3"><i class="bi bi-mask me-2 text-accent"></i>Persona، Role و هدف هر اکانت</h6>
    <div id="personaConfig"></div>
  </div>

  {# Step 5 — settings + rate limiter #}
  <div class="wz-pane" data-pane="5">
    <h6 class="mb-3"><i class="bi bi-sliders me-2 text-accent"></i>تنظیمات تأخیر و Rate Limiter</h6>
    <div class="row g-3">
      <div class="col-md-3"><label class="form-label">تأخیر پایه (ثانیه)</label><input id="cfgDelay" type="number" class="form-control" value="6"></div>
      <div class="col-md-3"><label class="form-label">تأخیر تصادفی (ثانیه)</label><input id="cfgRandom" type="number" class="form-control" value="4"></div>
      <div class="col-md-3"><label class="form-label">حافظه (تعداد پیام)</label><input id="cfgMemory" type="number" class="form-control" value="20"></div>
      <div class="col-md-3"><label class="form-label">سقف پیام/ساعت (هر اکانت)</label><input id="cfgMaxHour" type="number" class="form-control" value="20"></div>
      <div class="col-md-3"><label class="form-label">سقف پیام/روز (هر اکانت)</label><input id="cfgMaxDay" type="number" class="form-control" value="120"></div>
      <div class="col-md-3 d-flex align-items-end"><div class="form-check form-switch"><input id="cfgAntiFlood" class="form-check-input" type="checkbox" checked><label class="form-check-label">Anti-Flood</label></div></div>
    </div>
  </div>

  {# Step 6 — stopping conditions #}
  <div class="wz-pane" data-pane="6">
    <h6 class="mb-3"><i class="bi bi-flag me-2 text-accent"></i>شرایط پایان گفتگو</h6>
    <div class="row g-3">
      <div class="col-md-4"><label class="form-label">پایان پس از تعداد کل پیام</label><input id="stopMsgs" type="number" class="form-control" value="12"></div>
      <div class="col-md-4"><label class="form-label">پایان پس از تعداد پیام هر اکانت</label><input id="stopPerAcc" type="number" class="form-control" value="0"></div>
      <div class="col-md-4"><label class="form-label">پایان پس از (دقیقه)</label><input id="stopMinutes" type="number" class="form-control" value="0"></div>
      <div class="col-md-4"><label class="form-label">پایان در صورت بی‌فعالیتی (دقیقه)</label><input id="stopIdle" type="number" class="form-control" value="0"></div>
      <div class="col-md-4 d-flex align-items-end"><div class="form-check form-switch"><input id="stopAi" class="form-check-input" type="checkbox"><label class="form-check-label">پایان با تشخیص جمع‌بندی AI</label></div></div>
      <div class="col-md-4 d-flex align-items-end"><div class="form-check form-switch"><input id="summaryEnabled" class="form-check-input" type="checkbox"><label class="form-check-label">ارسال پیام جمع‌بندی پایانی</label></div></div>
    </div>
    <small class="text-muted d-block mt-2">صفر یعنی آن شرط نادیده گرفته شود. هر شرط برآورده‌شده گفتگو را پایان می‌دهد.</small>
  </div>

  {# Step 7 — review #}
  <div class="wz-pane" data-pane="7">
    <h6 class="mb-3"><i class="bi bi-eye me-2 text-accent"></i>مرور نهایی</h6>
    <pre id="reviewBox" class="font-mono" style="background:#faf9ff;border:1px solid var(--border);border-radius:var(--radius-sm);padding:1rem;font-size:.78rem;direction:ltr;max-height:340px;overflow:auto"></pre>
  </div>

  {# Step 8 — create #}
  <div class="wz-pane" data-pane="8">
    <h6 class="mb-3"><i class="bi bi-rocket-takeoff me-2 text-accent"></i>ساخت تعامل</h6>
    <p class="text-muted">با کلیک روی دکمه زیر، تعامل ساخته می‌شود و به صفحه آن منتقل می‌شوید. سپس می‌توانید آن را اجرا کنید.</p>
    <button class="btn btn-success btn-lg" id="createBtn" onclick="createInteraction()"><i class="bi bi-check2-circle me-2"></i>ساخت تعامل</button>
    <div id="createStatus" class="mt-3"></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>
const providerOpts = `{% for p in providers %}<option value="{{ p.id }}">{{ p.name }} ({{ p.model or p.provider_type }})</option>{% endfor %}`;
const personaOpts = `<option value="">بدون Persona</option>{% for p in personas %}<option value="{{ p.id }}">{{ p.display_name or p.name }}</option>{% endfor %}`;
const roleOpts = `<option value="">بدون Role</option>{% for r in roles %}<option value="{{ r.id }}">{{ r.name }}</option>{% endfor %}`;
const WORKER_NAMES = { {% for w in workers %}{{ w.id }}: "{{ w.name }}",{% endfor %} };
const MOTHER_NAMES = { {% for m in mothers %}{{ m.id }}: "{{ m.name }}",{% endfor %} };
const NAMES = Object.assign({}, WORKER_NAMES, MOTHER_NAMES);

let step = 0;
let motherId = null;
let destination = null;
let allDest = [];
let destCat = '';
let selectedWorkers = [];
let motherJoins = false;

function setDestCat(cat, el) {
  destCat = cat;
  document.querySelectorAll('#destCatTabs button').forEach(b => b.classList.toggle('active', b === el));
  renderDest();
}

function onMotherToggle() {
  motherJoins = document.getElementById('motherJoins').checked;
}

/* All accounts that will participate = selected workers (+ mother if it joins). */
function participantIds() {
  const ids = [...selectedWorkers];
  if (motherJoins && motherId && !ids.includes(motherId)) ids.push(motherId);
  return ids;
}

function labelFor(id) {
  const base = NAMES[id] || ('#' + id);
  return (motherJoins && id === motherId) ? (base + ' (اکانت انتخاب‌شده)') : base;
}

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) renderAiConfig();
  if (step === 4) renderPersonaConfig();
  if (step === 7) renderReview();
}

function go(d) {
  if (d > 0 && !validate()) return;
  show(step + d);
}

function validate() {
  if (step === 0 && !motherId) { alert('یک اکانت انتخاب کنید'); return false; }
  if (step === 1) {
    if (!document.getElementById('wzName').value.trim()) { alert('نام تعامل را وارد کنید'); return false; }
    if (!destination) { alert('یک مقصد انتخاب کنید'); return false; }
  }
  if (step === 2 && participantIds().length === 0) { alert('حداقل یک اکانت شرکت‌کننده انتخاب کنید'); return false; }
  return true;
}

function pickMother(id, el) {
  motherId = id;
  document.querySelectorAll('[data-pane="0"] .pick-item').forEach(x => x.classList.remove('selected'));
  el.classList.add('selected');
}

function loadDestinations() {
  if (!motherId) { alert('ابتدا یک اکانت انتخاب کنید'); return; }
  const st = document.getElementById('destStatus');
  st.textContent = 'در حال بارگذاری...';
  fetch(`/interactions/api/mother-dialogs/${motherId}`)
    .then(r => r.json())
    .then(d => {
      if (d.error) { st.textContent = 'خطا: ' + d.error; return; }
      allDest = d.dialogs || [];
      st.textContent = allDest.length + ' چت بارگذاری شد';
      renderDest();
    })
    .catch(e => st.textContent = 'خطای شبکه: ' + e.message);
}

function renderDest() {
  const q = document.getElementById('destSearch').value.trim().toLowerCase();
  const list = document.getElementById('destList');
  list.innerHTML = '';
  allDest.filter(d => !destCat || d.category === destCat)
    .filter(d => !q || (d.name + d.id + (d.username||'')).toLowerCase().includes(q))
    .slice(0, 300)
    .forEach(d => {
      const div = document.createElement('div');
      div.className = 'pick-item' + (destination && destination.chat_id === d.id ? ' selected' : '');
      div.innerHTML = `<div class="fw-semibold">${esc(d.name)}</div>
        <div class="text-muted text-xs">${esc(d.id)} · ${esc(d.type)} ${d.username ? '· '+esc(d.username) : ''}</div>`;
      div.onclick = () => {
        destination = { chat_id: d.id, title: d.name, type: d.type };
        renderDest();
      };
      list.appendChild(div);
    });
}

function toggleWorker(id, el) {
  const chk = el.querySelector('[data-wchk]');
  chk.checked = !chk.checked;
  el.classList.toggle('selected', chk.checked);
  selectedWorkers = [...document.querySelectorAll('[data-wchk]:checked')].map(c => +c.dataset.wchk);
}

function renderAiConfig() {
  const box = document.getElementById('aiConfig');
  box.innerHTML = participantIds().map(id => `
    <div class="row g-2 align-items-center mb-2">
      <div class="col-md-4 fw-semibold">${esc(labelFor(id))}</div>
      <div class="col-md-8"><select class="form-select form-select-sm" data-ai="${id}">${providerOpts}</select></div>
    </div>`).join('');
}

function renderPersonaConfig() {
  const box = document.getElementById('personaConfig');
  box.innerHTML = participantIds().map(id => `
    <div class="card mb-2"><div class="card-body py-2">
      <div class="fw-semibold mb-2">${esc(labelFor(id))}</div>
      <div class="row g-2">
        <div class="col-md-4"><select class="form-select form-select-sm" data-persona="${id}">${personaOpts}</select></div>
        <div class="col-md-4"><select class="form-select form-select-sm" data-role="${id}">${roleOpts}</select></div>
        <div class="col-md-4"><input class="form-control form-control-sm" data-obj="${id}" placeholder="هدف این اکانت (اختیاری)"></div>
      </div>
    </div></div>`).join('');
}

function buildPayload() {
  const ids = participantIds();
  const participants = ids.map((id, ix) => ({
    account_id: id, order_index: ix,
    provider_id: val(`[data-ai="${id}"]`),
    persona_id: val(`[data-persona="${id}"]`),
    role_id: val(`[data-role="${id}"]`),
    objective: val(`[data-obj="${id}"]`),
    delay_seconds: +document.getElementById('cfgDelay').value || 6,
    random_delay: +document.getElementById('cfgRandom').value || 0,
  }));
  return {
    name: document.getElementById('wzName').value.trim(),
    topic: document.getElementById('wzTopic').value.trim(),
    initial_message: document.getElementById('wzInitial').value.trim(),
    mother_account_id: motherId,
    scenario_id: document.getElementById('wzScenario').value || null,
    destination,
    participants,
    config: {
      mother_participates: motherJoins,
      delay_seconds: +document.getElementById('cfgDelay').value || 6,
      random_delay: +document.getElementById('cfgRandom').value || 0,
      memory_size: +document.getElementById('cfgMemory').value || 20,
      rate: {
        max_per_hour: +document.getElementById('cfgMaxHour').value || 0,
        max_per_day: +document.getElementById('cfgMaxDay').value || 0,
        anti_flood: document.getElementById('cfgAntiFlood').checked,
      },
      stopping: {
        max_messages: +document.getElementById('stopMsgs').value || 0,
        max_per_account: +document.getElementById('stopPerAcc').value || 0,
        max_minutes: +document.getElementById('stopMinutes').value || 0,
        idle_minutes: +document.getElementById('stopIdle').value || 0,
        ai_conclusion: document.getElementById('stopAi').checked,
      },
      summary: {
        enabled: document.getElementById('summaryEnabled').checked,
        account_id: ids[0] || null,
      },
    },
  };
}

function renderReview() {
  document.getElementById('reviewBox').textContent = JSON.stringify(buildPayload(), null, 2);
}

function createInteraction() {
  const btn = document.getElementById('createBtn');
  const st = document.getElementById('createStatus');
  btn.disabled = true;
  btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>در حال ساخت...';
  fetch('/interactions/create', {
    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-2"></i>ساخت تعامل'; }
    else { st.innerHTML = '<div class="alert alert-success">ساخته شد! در حال انتقال...</div>'; location.href = d.redirect; }
  }).catch(e => { st.innerHTML = `<div class="alert alert-danger">خطای شبکه: ${e.message}</div>`; btn.disabled=false; });
}

function val(sel) { const el = document.querySelector(sel); return el ? (el.value || null) : null; }
function esc(s) { return String(s==null?'':s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }

show(0);
</script>
{% endblock %}