{% extends "base.html" %}
{% block title %}mita panel{% endblock %}
{% block content %}

<!-- DASHBOARD -->
<div class="page active" id="page-dashboard">
  <h1>Дашборд</h1>
  <p class="subtitle">Обзор сервера в реальном времени</p>
  <div class="grid-4" id="stat-cards">
    <div class="stat-card"><div class="stat-label">IP сервера</div><div class="stat-value accent" style="font-size:1.1rem" id="s-server-ip">—</div></div>
    <div class="stat-card"><div class="stat-label">IP WARP</div><div class="stat-value ok" style="font-size:1.1rem" id="s-warp-ip">—</div></div>
    <div class="stat-card"><div class="stat-label">Трафик за неделю</div><div class="stat-value accent" id="s-week">—</div><div class="stat-sub">ГБ</div></div>
    <div class="stat-card"><div class="stat-label">Трафик за месяц</div><div class="stat-value ok" id="s-month">—</div><div class="stat-sub">ГБ</div></div>
  </div>
  <div class="grid-2">
    <div class="stat-card"><div class="stat-label">Порты mita</div><div class="stat-value" style="font-size:1.1rem" id="s-port">—</div></div>
    <div class="stat-card"><div class="stat-label">Пользователей</div><div class="stat-value" id="s-users">—</div></div>
  </div>
  <div class="card">
    <div class="card-title">Быстрые действия</div>
    <div class="btn-group">
      <button class="btn btn-secondary" onclick="loadDashboard()">⟳ Обновить</button>
      <button class="btn btn-secondary" onclick="showPage('users',document.querySelectorAll('.nav-item')[1])">Управление пользователями</button>
      <button class="btn btn-secondary" onclick="showPage('ssl',document.querySelectorAll('.nav-item')[2])">Настройка SSL</button>
    </div>
  </div>
</div>

<!-- USERS -->
<div class="page" id="page-users">
  <div class="section-head">
    <div><h1>Пользователи</h1><p class="subtitle">Создание и управление доступом</p></div>
  </div>

  <div class="card">
    <div class="card-title">Создать пользователей</div>
    <div class="form-row">
      <div class="form-group" style="max-width:180px">
        <label>Режим создания</label>
        <select id="create-mode" onchange="toggleCreateMode()">
          <option value="auto">Авто (случайные имена)</option>
          <option value="manual">Вручную (свои имена)</option>
          <option value="bulk-manual">Несколько вручную</option>
        </select>
      </div>
      <div class="form-group" id="count-group" style="max-width:120px">
        <label>Количество</label>
        <input type="number" id="create-count" value="1" min="1" max="50">
      </div>
      <div class="form-group" id="single-name-group">
        <label>Имя пользователя</label>
        <input type="text" id="create-name" placeholder="например: vasya">
      </div>
      <div>
        <button class="btn btn-primary" onclick="createUsers()">
          <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 4v16m8-8H4"/></svg>
          Создать
        </button>
      </div>
    </div>
    <div id="bulk-names-group" style="display:none">
      <label style="font-size:.8rem;color:var(--muted);display:block;margin-bottom:6px">Имена (по одному на строку)</label>
      <textarea id="bulk-names" rows="4" style="width:100%;background:var(--surface2);border:1px solid var(--border);
        color:var(--text);padding:10px;border-radius:var(--radius);font-family:var(--mono);font-size:.85rem;resize:vertical;outline:none"
        placeholder="alice&#10;bob&#10;charlie"></textarea>
    </div>
  </div>

  <div class="card">
    <div class="card-title">Список пользователей</div>
    <div class="table-wrap">
      <table>
        <thead><tr><th>Имя</th><th>WARP</th><th>Конфиг клиента</th><th>Действия</th></tr></thead>
        <tbody id="users-tbody"><tr><td colspan="4" style="color:var(--muted);text-align:center;padding:20px">Загрузка...</td></tr></tbody>
      </table>
    </div>
  </div>
</div>

<!-- SSL -->
<div class="page" id="page-ssl">
  <h1>SSL-сертификаты</h1>
  <p class="subtitle">Защита панели управления</p>

  <div class="card" id="ssl-status-card">
    <div class="card-title">Текущий сертификат</div>
    <div id="ssl-current"><div style="color:var(--muted)">Загрузка...</div></div>
  </div>

  <div class="grid-2">
    <div class="card">
      <div class="card-title">Самоподписной сертификат</div>
      <p style="color:var(--muted);font-size:.875rem;margin-bottom:16px;line-height:1.6">
        Генерируется мгновенно, действует <strong style="color:var(--text)">10 лет</strong>.
        Браузер покажет предупреждение — его можно принять.
        Подходит для личного использования.
      </p>
      <button class="btn btn-secondary" onclick="genSelfSigned()">
        <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
        Создать самоподписной
      </button>
      <div id="selfsigned-result" style="margin-top:12px"></div>
    </div>
    <div class="card">
      <div class="card-title">Let's Encrypt (бесплатный)</div>
      <p style="color:var(--muted);font-size:.875rem;margin-bottom:16px;line-height:1.6">
        Доверенный сертификат на <strong style="color:var(--text)">90 дней</strong>, продлевается автоматически.
        Требует домен, указывающий на этот сервер, и открытый порт 80.
      </p>
      <div class="form-group" style="margin-bottom:10px">
        <label>Домен</label>
        <input type="text" id="le-domain" placeholder="panel.example.com">
      </div>
      <div class="form-group" style="margin-bottom:14px">
        <label>Email (необязательно)</label>
        <input type="email" id="le-email" placeholder="admin@example.com">
      </div>
      <button class="btn btn-ok" onclick="getLetsEncrypt()">
        <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z"/></svg>
        Получить сертификат
      </button>
      <div id="le-result" style="margin-top:12px"></div>
    </div>
  </div>

  <div class="card">
    <div class="card-title">Применение сертификата</div>
    <div class="alert alert-warn">
      После смены сертификата необходимо перезапустить панель:<br>
      <code style="font-family:var(--mono);font-size:.85rem">systemctl restart mita-panel</code>
    </div>
  </div>
</div>

{% endblock %}

{% block scripts %}
<script>
// ──────────────── DASHBOARD ────────────────
async function loadDashboard(){
  const d=await api('/api/dashboard');
  if(!d)return;
  document.getElementById('s-server-ip').textContent=d.server_ip||'?';
  document.getElementById('s-warp-ip').textContent=d.warp_ip||'?';
  document.getElementById('s-week').textContent=d.week_gb||'0';
  document.getElementById('s-month').textContent=d.month_gb||'0';
  document.getElementById('s-port').textContent=d.mita_port||'?';
  document.getElementById('s-users').textContent=d.users_count||'0';
}
loadDashboard();

// ──────────────── USERS ────────────────
let warpUsers=new Set();

async function loadUsers(){
  const [ud,wd]=await Promise.all([api('/api/users'),api('/api/users/warp_status')]);
  if(!ud)return;
  warpUsers=new Set(wd?.warp_users||[]);
  const tbody=document.getElementById('users-tbody');
  if(!ud.users.length){
    tbody.innerHTML='<tr><td colspan="4" style="color:var(--muted);text-align:center;padding:20px">Нет пользователей</td></tr>';
    return;
  }
  tbody.innerHTML=ud.users.map(u=>{
    const wOn=warpUsers.has(u.name);
    return `<tr>
      <td><strong>${escH(u.name)}</strong></td>
      <td>
        <label class="toggle" title="WARP для этого пользователя">
          <input type="checkbox" ${wOn?'checked':''} onchange="setWarp('${escH(u.name)}',this.checked)">
          <span class="toggle-slider"></span>
        </label>
        <span style="font-size:.8rem;color:var(--muted);margin-left:8px">${wOn?'WARP':'Прямой'}</span>
      </td>
      <td><button class="btn btn-secondary btn-sm" onclick="showConfig('${escH(u.name)}')">Показать конфиг</button></td>
      <td><button class="btn btn-danger btn-sm" onclick="deleteUser('${escH(u.name)}')">Удалить</button></td>
    </tr>`;
  }).join('');
}

function toggleCreateMode(){
  const mode=document.getElementById('create-mode').value;
  document.getElementById('count-group').style.display=mode==='manual'?'none':'';
  document.getElementById('single-name-group').style.display=mode==='manual'?'':'none';
  document.getElementById('bulk-names-group').style.display=mode==='bulk-manual'?'':'none';
}
toggleCreateMode();

async function createUsers(){
  const mode=document.getElementById('create-mode').value;
  let body={};
  if(mode==='auto'){
    body={mode:'auto',count:parseInt(document.getElementById('create-count').value)||1};
  }else if(mode==='manual'){
    const n=document.getElementById('create-name').value.trim();
    if(!n){showToast('Введите имя',true);return;}
    body={mode:'manual',names:[n],count:1};
  }else{
    const lines=document.getElementById('bulk-names').value.split('\n').map(s=>s.trim()).filter(Boolean);
    if(!lines.length){showToast('Введите имена',true);return;}
    body={mode:'manual',names:lines,count:lines.length};
  }
  const d=await api('/api/users/create','POST',body);
  if(!d||!d.created){showToast('Ошибка',true);return;}
  showToast(`Создано: ${d.created.length}`);
  showCreatedConfigs(d.created);
  loadUsers();
}

function showCreatedConfigs(created){
  if(!created.length)return;
  let html='';
  if(created.length===1){
    const u=created[0];
    html=`<p style="margin-bottom:12px;color:var(--muted);font-size:.875rem">
      Пользователь <strong style="color:var(--text)">${escH(u.name)}</strong> создан.<br>
      Пароль: <code style="font-family:var(--mono)">${escH(u.password)}</code></p>
      ${codeBlock(u.client_config)}`;
  }else{
    html=`<p style="margin-bottom:16px;color:var(--muted);font-size:.875rem">Создано ${created.length} пользователей. Выберите нужного:</p>`+
      created.map(u=>`
        <div class="accordion-item">
          <div class="accordion-header" onclick="toggleAccordion(this)">
            <span>${escH(u.name)}</span>
            <span class="accordion-arrow">&#x25BC;</span>
          </div>
          <div class="accordion-body">
            <p style="font-size:.8rem;color:var(--muted);margin-bottom:8px">
              Пароль: <code style="font-family:var(--mono)">${escH(u.password)}</code>
            </p>
            ${codeBlock(u.client_config)}
          </div>
        </div>`).join('');
  }
  openModal('Конфиги созданных пользователей', html);
}

async function showConfig(name){
  // Нам нужен пароль — mita его не возвращает в get users,
  // поэтому показываем шаблон с placeholder для пароля
  const cfg=await api('/api/users');
  const note='<div class="alert alert-warn" style="margin-bottom:12px">Пароль не отображается из соображений безопасности после создания. Используйте конфиг из момента создания пользователя.</div>';
  openModal(`Конфиг: ${name}`, note);
}

async function deleteUser(name){
  if(!confirm(`Удалить пользователя "${name}"?`))return;
  await api('/api/users/delete','POST',{name});
  showToast(`${name} удалён`);
  loadUsers();
}

async function setWarp(name,enabled){
  await api('/api/users/warp','POST',{name,enabled});
  showToast(`WARP для ${name}: ${enabled?'включён':'выключен'}`);
  // Обновить текстовый label рядом с тогглом
  loadUsers();
}

// ──────────────── SSL ────────────────
async function loadSSL(){
  const d=await api('/api/ssl/status');
  if(!d)return;
  const el=document.getElementById('ssl-current');
  if(d.type==='none'){
    el.innerHTML='<div class="alert alert-warn">Сертификат не настроен. Панель работает по HTTP.</div>';
  }else{
    const icon=d.type==='letsencrypt'?'🔒':'🔑';
    const label=d.type==='letsencrypt'?"Let's Encrypt":'Самоподписной';
    el.innerHTML=`
      <div style="display:flex;align-items:center;gap:16px;flex-wrap:wrap">
        <div style="font-size:2rem">${icon}</div>
        <div>
          <div style="font-weight:700;margin-bottom:4px">${label}</div>
          ${d.domain?`<div style="color:var(--muted);font-size:.85rem">Домен: <span style="color:var(--accent)">${escH(d.domain)}</span></div>`:''}
          <div style="color:var(--muted);font-size:.85rem">Файл: <code style="font-family:var(--mono)">${escH(d.cert)}</code></div>
          <div style="color:var(--muted);font-size:.85rem;margin-top:4px">${escH(d.expires)}</div>
        </div>
      </div>`;
  }
}

async function genSelfSigned(){
  const btn=event.target;
  btn.disabled=true;btn.innerHTML='<span class="spinner"></span> Генерация...';
  const el=document.getElementById('selfsigned-result');
  const d=await api('/api/ssl/selfsigned','POST');
  btn.disabled=false;btn.textContent='Создать самоподписной';
  if(!d)return;
  if(d.ok){
    el.innerHTML=`<div class="alert alert-ok">✓ Сертификат создан (10 лет)<br><small>${escH(d.expires||'')}</small><br><small style="opacity:.7">${escH(d.note||'')}</small></div>`;
    loadSSL();
  }else{
    el.innerHTML=`<div class="alert alert-err">Ошибка: ${escH(d.error||'')}</div>`;
  }
}

async function getLetsEncrypt(){
  const domain=document.getElementById('le-domain').value.trim();
  const email=document.getElementById('le-email').value.trim();
  if(!domain){showToast('Укажите домен',true);return;}
  const btn=event.target;
  btn.disabled=true;btn.innerHTML='<span class="spinner"></span> Получение (может занять минуту)...';
  const el=document.getElementById('le-result');
  const d=await api('/api/ssl/letsencrypt','POST',{domain,email});
  btn.disabled=false;btn.textContent="Получить сертификат";
  if(!d)return;
  if(d.ok){
    el.innerHTML=`<div class="alert alert-ok">✓ Сертификат получен!<br><small>${escH(d.expires||'')}</small><br><small style="opacity:.7">${escH(d.note||'')}</small></div>`;
    loadSSL();
  }else{
    el.innerHTML=`<div class="alert alert-err">Ошибка:<br><pre style="white-space:pre-wrap;font-size:.78rem;margin-top:6px">${escH(d.error||'')}</pre></div>`;
  }
}

function escH(s){return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');}
function codeBlock(json){
  const txt=JSON.stringify(json,null,2);
  const id='cb'+Math.random().toString(36).slice(2);
  return `<div class="code-block" id="${id}">${escH(txt)}</div>
    <button class="btn btn-secondary btn-sm" style="margin-top:8px" onclick="navigator.clipboard.writeText(document.getElementById('${id}').textContent).then(()=>showToast('Скопировано ✓'))">Копировать</button>`;
}
</script>
{% endblock %}