{% extends "base.html" %}
{% block title %}{{ inter.name }}{% endblock %}
{% block page_title %}<i class="bi bi-chat-text"></i> {{ inter.name }}{% endblock %}

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

{% set st = inter.status %}
{% set badge = {'running':'chip-active','paused':'chip-group','completed':'chip-telegram','stopped':'chip-inactive','error':'chip-inactive','draft':'chip-private'}.get(st,'chip-private') %}

<div class="card mb-3"><div class="card-body d-flex flex-wrap align-items-center gap-3">
  <div>
    <div class="text-muted text-xs">وضعیت</div>
    <span class="chip {{ badge }}" id="statusChip">{{ st }}</span>
  </div>
  <div><div class="text-muted text-xs">مقصد</div><div class="fw-semibold">{{ inter.destination_title or inter.destination_chat_id or '—' }}</div></div>
  <div><div class="text-muted text-xs">موضوع</div><div class="fw-semibold">{{ inter.topic or '—' }}</div></div>
  <div><div class="text-muted text-xs">شرکت‌کننده‌ها</div><div class="fw-semibold">{{ participants|length }}</div></div>

  <div class="ms-auto d-flex gap-2">
    <form method="POST" action="{{ url_for('interactions.start', interaction_id=inter.id) }}"><button class="btn btn-sm btn-success"><i class="bi bi-play-fill me-1"></i>اجرا</button></form>
    <form method="POST" action="{{ url_for('interactions.pause', interaction_id=inter.id) }}"><button class="btn btn-sm btn-outline-warning"><i class="bi bi-pause-fill me-1"></i>توقف موقت</button></form>
    <form method="POST" action="{{ url_for('interactions.resume', interaction_id=inter.id) }}"><button class="btn btn-sm btn-outline-primary"><i class="bi bi-arrow-clockwise me-1"></i>ادامه</button></form>
    <form method="POST" action="{{ url_for('interactions.stop', interaction_id=inter.id) }}"><button class="btn btn-sm btn-outline-danger"><i class="bi bi-stop-fill me-1"></i>پایان</button></form>
    <form method="POST" action="{{ url_for('interactions.delete', interaction_id=inter.id) }}" onsubmit="return confirm('حذف کامل این تعامل؟')"><button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash3"></i></button></form>
  </div>
</div></div>

{% if inter.status_detail %}<div class="alert alert-info text-xs"><i class="bi bi-info-circle me-1"></i>{{ inter.status_detail }}</div>{% endif %}

{# Full interaction settings — editable; a running conversation reads these
   once at start, so changes here take effect from the next start, not
   retroactively (see InteractionService.update_settings). #}
<div class="card mb-3">
  <div class="card-header d-flex align-items-center justify-content-between">
    <h6><i class="bi bi-sliders me-2 text-accent"></i>تنظیمات تعامل</h6>
    <span class="text-muted text-xs">تغییرات از اجرای بعدی اعمال می‌شود</span>
  </div>
  <div class="card-body">
    {% set rate = config.get('rate', {}) %}
    {% set stopping = config.get('stopping', {}) %}
    {% set summary = config.get('summary', {}) %}
    {% set ov = config.get('ai_overrides', {}) %}
    {% set bg = config.get('brand_guard', {}) %}
    <div class="row g-3">
      <div class="col-md-3"><label class="form-label text-xs">تأخیر پایه (ثانیه)</label><input id="cfgDelay" type="number" step="0.1" class="form-control form-control-sm" value="{{ config.get('delay_seconds', 6) }}"></div>
      <div class="col-md-3"><label class="form-label text-xs">تأخیر تصادفی (ثانیه)</label><input id="cfgRandom" type="number" step="0.1" class="form-control form-control-sm" value="{{ config.get('random_delay', 4) }}"></div>
      <div class="col-md-3"><label class="form-label text-xs">اندازه حافظه گفتگو (پیام)</label><input id="cfgMemory" type="number" class="form-control form-control-sm" value="{{ config.get('memory_size', 20) }}"></div>
      <div class="col-md-3 d-flex align-items-end pb-1"><div class="form-check form-switch"><input id="cfgAntiFlood" class="form-check-input" type="checkbox" {{ 'checked' if rate.get('anti_flood', True) else '' }}><label class="form-check-label text-xs">Anti-Flood</label></div></div>

      <div class="col-md-3"><label class="form-label text-xs">سقف پیام/ساعت</label><input id="cfgMaxHour" type="number" class="form-control form-control-sm" value="{{ rate.get('max_per_hour', 0) }}"></div>
      <div class="col-md-3"><label class="form-label text-xs">سقف پیام/روز</label><input id="cfgMaxDay" type="number" class="form-control form-control-sm" value="{{ rate.get('max_per_day', 0) }}"></div>
      <div class="col-md-3"><label class="form-label text-xs">حداکثر پیام کل</label><input id="stopMsgs" type="number" class="form-control form-control-sm" value="{{ stopping.get('max_messages', 0) }}"></div>
      <div class="col-md-3"><label class="form-label text-xs">حداکثر پیام هر اکانت</label><input id="stopPerAcc" type="number" class="form-control form-control-sm" value="{{ stopping.get('max_per_account', 0) }}"></div>

      <div class="col-md-3"><label class="form-label text-xs">حداکثر مدت (دقیقه)</label><input id="stopMinutes" type="number" class="form-control form-control-sm" value="{{ stopping.get('max_minutes', 0) }}"></div>
      <div class="col-md-3"><label class="form-label text-xs">توقف پس از سکوت (دقیقه)</label><input id="stopIdle" type="number" class="form-control form-control-sm" value="{{ stopping.get('idle_minutes', 0) }}"></div>
      <div class="col-md-3 d-flex align-items-end pb-1"><div class="form-check form-switch"><input id="stopAi" class="form-check-input" type="checkbox" {{ 'checked' if stopping.get('ai_conclusion') else '' }}><label class="form-check-label text-xs">توقف با جمع‌بندی AI</label></div></div>
      <div class="col-md-3 d-flex align-items-end pb-1"><div class="form-check form-switch"><input id="summaryEnabled" class="form-check-input" type="checkbox" {{ 'checked' if summary.get('enabled') else '' }}><label class="form-check-label text-xs">پیام جمع‌بندی پایانی</label></div></div>

      <div class="col-md-4">
        <label class="form-label text-xs">اکانت ارسال‌کنندهٔ جمع‌بندی</label>
        <select id="summaryAccount" class="form-select form-select-sm">
          <option value="">اولین شرکت‌کننده</option>
          {% for p in participants %}<option value="{{ p.account_id }}" {{ 'selected' if summary.get('account_id') == p.account_id else '' }}>{{ account_names.get(p.account_id, p.account_id) }}</option>{% endfor %}
        </select>
      </div>
      <div class="col-md-4"><label class="form-label text-xs">Override مدل AI (اختیاری)</label><input id="ovModel" class="form-control form-control-sm" placeholder="پیش‌فرض Provider" value="{{ ov.get('model', '') }}"></div>
      <div class="col-md-4"><label class="form-label text-xs">Override Timeout (ثانیه، اختیاری)</label><input id="ovTimeout" type="number" class="form-control form-control-sm" placeholder="۶۰ (پیش‌فرض)" value="{{ ov.get('timeout', '') }}"></div>
    </div>

    <hr class="my-2">
    <div class="text-muted text-xs mb-2">محافظت از نام برند</div>
    <div class="row g-3">
      <div class="col-md-6"><label class="form-label text-xs">عبارات ممنوع (هر خط یک مورد)</label>
        <textarea id="cfgBrandTerms" class="form-control form-control-sm" rows="2">{{ bg.get('terms', [])|join('\n') }}</textarea></div>
      <div class="col-md-3"><label class="form-label text-xs">حداکثر تکرار مجاز</label>
        <input id="cfgBrandMax" type="number" class="form-control form-control-sm" value="{{ bg.get('max_mentions', 0) }}"></div>
      <div class="col-md-3"><label class="form-label text-xs">در بازه (تعداد پیام اخیر)</label>
        <input id="cfgBrandWindow" type="number" class="form-control form-control-sm" value="{{ bg.get('window_messages', 10) }}"></div>
    </div>

    <div class="d-flex align-items-center gap-2 mt-3">
      <button class="btn btn-sm btn-primary" id="saveSettingsBtn" onclick="saveSettings()"><i class="bi bi-save me-1"></i>ذخیره تنظیمات</button>
      <div id="settingsStatus" class="small"></div>
    </div>

    {% if inter.initial_message %}
    <hr><div class="text-muted text-xs mb-1">پیام آغازین</div>
    <div style="font-size:.85rem;white-space:pre-wrap">{{ inter.initial_message }}</div>
    {% endif %}
  </div>
</div>

{# Manual mother intervention — always available, even while running #}
<div class="card mb-3" style="border-color:var(--accent)">
  <div class="card-header d-flex align-items-center justify-content-between">
    <h6><i class="bi bi-send-plus me-2 text-accent"></i>ارسال پیام دستی با اکانت مادر</h6>
    <span class="chip chip-channel">مداخله مستقیم</span>
  </div>
  <div class="card-body">
    {% if inter.mother_account_id %}
    <div class="d-flex gap-2 align-items-start">
      <textarea id="manualText" class="form-control" rows="2" placeholder="پیام فوری اکانت مادر را بنویسید و ارسال کنید..."></textarea>
      <button class="btn btn-primary" id="manualSendBtn" onclick="sendManual()" style="white-space:nowrap">
        <i class="bi bi-send me-1"></i>ارسال
      </button>
    </div>
    <div id="manualStatus" class="small mt-2"></div>
    <div class="text-muted text-xs mt-1">این پیام بلافاصله (حتی هنگام اجرای گفتگو) توسط اکانت مادر ارسال و در متن گفتگو ثبت می‌شود تا اکانت‌های هوش مصنوعی آن را ببینند و مسیر بحث اصلاح شود.</div>
    {% else %}
    <div class="text-muted small">برای این تعامل اکانت مادر تعیین نشده است؛ ارسال دستی در دسترس نیست.</div>
    {% endif %}
  </div>
</div>

<div class="row g-3">
  {# Live dashboard #}
  <div class="col-lg-5">
    <div class="card mb-3">
      <div class="card-header d-flex justify-content-between align-items-center">
        <h6><i class="bi bi-broadcast-pin me-2 text-accent"></i>داشبورد زنده</h6>
        <span class="status-dot" id="liveDot"></span>
      </div>
      <div class="card-body">
        <div class="d-flex justify-content-between mb-2"><span class="text-muted text-xs">تعداد پیام</span><span class="fw-bold" id="liveCount">{{ messages|selectattr('error','none')|list|length }}</span></div>
        <div class="d-flex justify-content-between mb-2"><span class="text-muted text-xs">خطاها</span><span class="fw-bold text-danger" id="liveErrors">0</span></div>
        <div class="d-flex justify-content-between mb-3"><span class="text-muted text-xs">در حال تایپ</span><span class="fw-bold text-accent" id="liveTyping">—</span></div>
        <div class="text-muted text-xs mb-1">آخرین پیام</div>
        <div class="p-2" style="background:#faf9ff;border-radius:8px;font-size:.8rem" id="liveLast">—</div>
        <hr>
        <div class="text-muted text-xs mb-2">اکانت‌ها</div>
        <div id="liveAccounts"></div>
      </div>
    </div>
  </div>

  {# Report + participants #}
  <div class="col-lg-7">
    {% if report %}
    <div class="card mb-3">
      <div class="card-header"><h6><i class="bi bi-bar-chart-line me-2 text-accent"></i>گزارش</h6></div>
      <div class="card-body">
        <div class="row g-2 text-center">
          <div class="col-4"><div class="fw-bold fs-5">{{ report.total_messages }}</div><div class="text-muted text-xs">پیام موفق</div></div>
          <div class="col-4"><div class="fw-bold fs-5 text-danger">{{ report.failed_messages }}</div><div class="text-muted text-xs">ناموفق</div></div>
          <div class="col-4"><div class="fw-bold fs-5">{{ '%.1f'|format(report.duration_seconds/60) }}</div><div class="text-muted text-xs">دقیقه</div></div>
          <div class="col-4"><div class="fw-bold">{{ '%.2f'|format(report.avg_response_time) }}s</div><div class="text-muted text-xs">میانگین پاسخ</div></div>
          <div class="col-4"><div class="fw-bold">{{ report.token_usage.tokens_in + report.token_usage.tokens_out }}</div><div class="text-muted text-xs">توکن کل</div></div>
          <div class="col-4"><div class="fw-bold">{{ report.retry_count }}</div><div class="text-muted text-xs">Retry</div></div>
        </div>
        {% if report.cost_estimate %}
        <hr><div class="text-muted text-xs mb-1">هزینه تقریبی</div>
        {% for prov, cost in report.cost_estimate.items() %}<div class="d-flex justify-content-between text-xs"><span>{{ prov }}</span><span class="font-mono">${{ '%.4f'|format(cost) }}</span></div>{% endfor %}
        {% endif %}
      </div>
    </div>
    {% endif %}

    <div class="card">
      <div class="card-header"><h6><i class="bi bi-people me-2"></i>شرکت‌کننده‌ها</h6></div>
      <div class="table-responsive"><table class="table table-sm align-middle mb-0">
        <thead><tr><th>#</th><th>اکانت</th><th>AI</th><th>Persona</th><th>Role</th><th>هدف</th></tr></thead>
        <tbody>
          {% for p in participants %}
          <tr>
            <td class="text-xs text-muted">{{ p.order_index + 1 }}</td>
            <td class="fw-semibold">{{ account_names.get(p.account_id, p.account_id) }}</td>
            <td class="text-xs">{{ provider_names.get(p.provider_id, '—') }}</td>
            <td class="text-xs">{{ persona_names.get(p.persona_id, '—') }}</td>
            <td class="text-xs">{{ role_names.get(p.role_id, '—') }}</td>
            <td class="text-xs text-muted">{{ p.objective or '—' }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table></div>
    </div>
  </div>
</div>

{# Transcript #}
<div class="card mt-3">
  <div class="card-header"><h6><i class="bi bi-chat-square-text me-2"></i>متن گفتگو ({{ messages|length }})</h6></div>
  <div class="card-body" style="max-height:480px;overflow:auto" id="transcript">
    {% for m in messages %}
    <div class="mb-2 pb-2" style="border-bottom:1px solid var(--border-light)">
      <div class="d-flex justify-content-between">
        <span class="fw-semibold text-xs">{{ m.sender_name }}</span>
        <span class="text-muted" style="font-size:.68rem">{{ m.created_at|jalali('%H:%M:%S') if m.created_at else '' }}{% if m.response_time %} · {{ '%.1f'|format(m.response_time) }}s{% endif %}</span>
      </div>
      {% if m.error %}<div class="text-danger text-xs"><i class="bi bi-exclamation-triangle me-1"></i>{{ m.error }}</div>
      {% else %}<div style="font-size:.85rem;white-space:pre-wrap">{{ m.content }}</div>{% endif %}
    </div>
    {% else %}<div class="empty-state"><i class="bi bi-chat-square"></i><p>هنوز پیامی رد و بدل نشده است</p></div>{% endfor %}
  </div>
</div>

{% endblock %}

{% block scripts %}
<script>
const IID = {{ inter.id }};
let lastCount = {{ messages|length }};

function poll() {
  fetch(`/interactions/api/live/${IID}`)
    .then(r => r.json())
    .then(d => {
      if (d.error) return;
      document.getElementById('liveCount').textContent = d.message_count ?? '0';
      document.getElementById('liveErrors').textContent = d.errors ?? '0';
      document.getElementById('liveTyping').textContent = d.typing || '—';
      document.getElementById('statusChip').textContent = d.status || '';
      const dot = document.getElementById('liveDot');
      dot.className = 'status-dot ' + (d.is_running ? 'connected' : 'disconnected');
      if (d.last_message) {
        document.getElementById('liveLast').textContent = `${d.last_message.name}: ${d.last_message.content}`;
      }
      const acc = d.accounts || {};
      document.getElementById('liveAccounts').innerHTML = Object.values(acc).map(a =>
        `<div class="d-flex justify-content-between text-xs mb-1">
          <span>${esc(a.name||'')}</span>
          <span class="text-muted">${esc(a.status||'')} · ${a.messages||0} پیام${a.last_response_time?(' · '+a.last_response_time+'s'):''}</span>
        </div>`).join('') || '<div class="text-muted text-xs">—</div>';
      // Reload transcript when new messages arrive and conversation is live.
      if (d.is_running && (d.message_count||0) > lastCount) {
        lastCount = d.message_count;
        setTimeout(() => location.reload(), 1200);
      }
    })
    .catch(()=>{});
}
function esc(s){return String(s==null?'':s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');}

function sendManual() {
  const t = document.getElementById('manualText');
  const btn = document.getElementById('manualSendBtn');
  const st = document.getElementById('manualStatus');
  if (!t.value.trim()) return;
  const orig = btn.innerHTML;
  btn.disabled = true;
  btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span>';
  fetch(`/interactions/${IID}/send-manual`, {
    method: 'POST', headers: {'Content-Type':'application/json'},
    body: JSON.stringify({ text: t.value })
  }).then(r => r.json()).then(d => {
    st.className = 'small mt-2 ' + (d.ok ? 'text-success' : 'text-danger');
    st.textContent = d.message || '';
    if (d.ok) { t.value = ''; lastCount = -1; setTimeout(() => location.reload(), 1000); }
  }).catch(e => { st.className = 'small mt-2 text-danger'; st.textContent = 'خطای شبکه'; })
    .finally(() => { btn.disabled = false; btn.innerHTML = orig; });
}

function saveSettings() {
  const btn = document.getElementById('saveSettingsBtn');
  const st = document.getElementById('settingsStatus');
  const orig = btn.innerHTML;
  btn.disabled = true;
  btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span>';
  const payload = {
    delay_seconds: +document.getElementById('cfgDelay').value || 0,
    random_delay: +document.getElementById('cfgRandom').value || 0,
    memory_size: +document.getElementById('cfgMemory').value || 0,
    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: document.getElementById('summaryAccount').value || null,
    },
    ai_overrides: {
      model: document.getElementById('ovModel').value.trim(),
      timeout: +document.getElementById('ovTimeout').value || null,
    },
    brand_guard: {
      terms: document.getElementById('cfgBrandTerms').value,
      max_mentions: +document.getElementById('cfgBrandMax').value || 0,
      window_messages: +document.getElementById('cfgBrandWindow').value || 0,
    },
  };
  fetch(`/interactions/${IID}/settings`, {
    method: 'POST', headers: {'Content-Type':'application/json'},
    body: JSON.stringify(payload)
  }).then(r => r.json()).then(d => {
    st.className = 'small ' + (d.ok ? 'text-success' : 'text-danger');
    st.textContent = d.message || '';
  }).catch(() => { st.className = 'small text-danger'; st.textContent = 'خطای شبکه'; })
    .finally(() => { btn.disabled = false; btn.innerHTML = orig; });
}

poll();
setInterval(poll, 4000);
</script>
{% endblock %}