{% extends 'base/layout.html' %}
{% load helpers %}
{% load pve_sync_tags %}
{% load render_table from django_tables2 %}

{% block title %}VM 佈建{% endblock %}

{% block content %}

{# ── 頁首 ── #}
<div class="d-flex align-items-center mb-4">
  <h1 class="mb-0"><i class="mdi mdi-server-plus text-primary"></i> VM 佈建</h1>
  <button class="btn btn-primary ms-auto" type="button"
          data-bs-toggle="collapse" data-bs-target="#new-vm-panel"
          aria-expanded="{{ expand_form|yesno:'true,false' }}">
    <i class="mdi mdi-plus"></i> 新增 VM
  </button>
</div>

{% if messages %}
  {% for message in messages %}
    <div class="alert alert-{% if message.tags == 'error' %}danger{% else %}{{ message.tags }}{% endif %} alert-dismissible fade show">
      {{ message }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
  {% endfor %}
{% endif %}

{# ── 可收合的新增表單 ── #}
<div class="collapse {% if expand_form %}show{% endif %} mb-4" id="new-vm-panel">
<form method="post" id="vm-planner-form">
{% csrf_token %}

<div class="row g-4">

  {# ── 左欄：VM 基本資訊 ── #}
  <div class="col-lg-6">
    <div class="card">
      <h5 class="card-header"><i class="mdi mdi-server"></i> VM 基本資訊</h5>
      <div class="card-body">

        <div class="mb-3">
          <label class="form-label fw-semibold">VM 名稱 <span class="text-danger">*</span></label>
          <input type="text" name="vm_name" id="vm_name" class="form-control"
                 placeholder="例如：web-prod-01" autocomplete="off" required>
        </div>

        <div class="row g-2 mb-3">
          <div class="col-7">
            <label class="form-label fw-semibold">PVE 叢集</label>
            <select name="cluster" id="cluster" class="form-select">
              <option value="">— 選擇叢集 —</option>
              {% for c in clusters %}
                <option value="{{ c.name }}">{{ c.name }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="col-5">
            <label class="form-label fw-semibold">節點</label>
            <select name="node" id="node" class="form-select">
              <option value="">— 選擇節點 —</option>
              {% for c in clusters %}
                {% with nodes=cluster_nodes|get_item:c.name %}
                  {% if nodes %}
                    <optgroup label="{{ c.name }}">
                      {% for node in nodes %}
                        <option value="{{ node }}">{{ node }}</option>
                      {% endfor %}
                    </optgroup>
                  {% endif %}
                {% endwith %}
              {% endfor %}
            </select>
          </div>
        </div>

        <div class="row g-2 mb-3">
          <div class="col-5">
            <label class="form-label fw-semibold">VMID</label>
            <input type="number" name="vmid" id="vmid" class="form-control"
                   placeholder="例如：200" min="100" max="999999999">
          </div>
          <div class="col-7">
            <label class="form-label fw-semibold">作業系統</label>
            <select name="os_type" class="form-select">
              <option value="">— 選擇 OS —</option>
              <option>Ubuntu 22.04 LTS</option>
              <option>Ubuntu 24.04 LTS</option>
              <option>Debian 12</option>
              <option>Rocky Linux 9</option>
              <option>AlmaLinux 9</option>
              <option>Windows Server 2022</option>
            </select>
          </div>
        </div>

        <div class="row g-2 mb-3">
          <div class="col">
            <label class="form-label fw-semibold">CPU</label>
            <div class="input-group">
              <input type="number" name="cpu" class="form-control" placeholder="4" min="1">
              <span class="input-group-text">vCPU</span>
            </div>
          </div>
          <div class="col">
            <label class="form-label fw-semibold">記憶體</label>
            <div class="input-group">
              <input type="number" name="ram_gb" class="form-control" placeholder="8" min="1">
              <span class="input-group-text">GB</span>
            </div>
          </div>
          <div class="col">
            <label class="form-label fw-semibold">磁碟</label>
            <div class="input-group">
              <input type="number" name="disk_gb" class="form-control" placeholder="50" min="1">
              <span class="input-group-text">GB</span>
            </div>
          </div>
        </div>

        <div class="mb-0">
          <label class="form-label fw-semibold">備註</label>
          <textarea name="notes" class="form-control" rows="2" placeholder="部署說明、特殊需求…"></textarea>
        </div>

      </div>
    </div>
  </div>

  {# ── 右欄：IP 分配 ── #}
  <div class="col-lg-6">
    <div class="card">
      <h5 class="card-header"><i class="mdi mdi-ip-network"></i> IP 分配</h5>
      <div class="card-body">

        {# Management NIC #}
        <div class="mb-4">
          <div class="d-flex align-items-center gap-2 mb-2">
            <span class="badge bg-primary">NIC 1</span>
            <span class="fw-semibold">Management</span>
            <span class="text-muted small">內部管理網路</span>
          </div>
          <div class="mb-2">
            <label class="form-label small fw-semibold">IP Range</label>
            <select name="management_ip_range" id="mgmt_range" class="form-select form-select-sm"
                    onchange="loadFreeIps('mgmt', this.value)">
              <option value="">— 選擇 IP Range —</option>
              {% for r in ip_ranges %}
                <option value="{{ r.pk }}">{{ r.start_address.ip }} – {{ r.end_address.ip }}{% if r.description %} ({{ r.description }}){% endif %}</option>
              {% endfor %}
            </select>
          </div>
          <div class="mb-2">
            <label class="form-label small fw-semibold">IP 位址</label>
            <div class="input-group input-group-sm">
              <select id="mgmt_ip_select" class="form-select" onchange="syncIpInput('mgmt'); probeIp('mgmt')" disabled>
                <option value="">— 先選擇 IP Range —</option>
              </select>
              <input type="text" name="management_ip" id="mgmt_ip_input" class="form-control"
                     placeholder="或手動輸入 IP" oninput="probeIp('mgmt')">
            </div>
            <div id="mgmt_probe_result" class="mt-1"></div>
          </div>
          <div>
            <label class="form-label small fw-semibold">閘道</label>
            <input type="text" name="management_gateway" id="mgmt_gateway"
                   class="form-control form-control-sm" placeholder="例如：10.10.88.254">
          </div>
        </div>

        <hr class="my-3">

        {# Internet NIC #}
        <div>
          <div class="d-flex align-items-center gap-2 mb-2">
            <span class="badge bg-success">NIC 2</span>
            <span class="fw-semibold">Internet</span>
            <span class="text-muted small">外部網路</span>
          </div>
          <div class="mb-2">
            <label class="form-label small fw-semibold">IP Range</label>
            <select name="internet_ip_range" id="inet_range" class="form-select form-select-sm"
                    onchange="loadFreeIps('inet', this.value)">
              <option value="">— 選擇 IP Range —</option>
              {% for r in ip_ranges %}
                <option value="{{ r.pk }}">{{ r.start_address.ip }} – {{ r.end_address.ip }}{% if r.description %} ({{ r.description }}){% endif %}</option>
              {% endfor %}
            </select>
          </div>
          <div class="mb-2">
            <label class="form-label small fw-semibold">IP 位址</label>
            <div class="input-group input-group-sm">
              <select id="inet_ip_select" class="form-select" onchange="syncIpInput('inet'); probeIp('inet')" disabled>
                <option value="">— 先選擇 IP Range —</option>
              </select>
              <input type="text" name="internet_ip" id="inet_ip_input" class="form-control"
                     placeholder="或手動輸入 IP" oninput="probeIp('inet')">
            </div>
            <div id="inet_probe_result" class="mt-1"></div>
          </div>
          <div>
            <label class="form-label small fw-semibold">閘道</label>
            <input type="text" name="internet_gateway" id="inet_gateway"
                   class="form-control form-control-sm" placeholder="例如：172.17.0.1">
          </div>
        </div>

      </div>
    </div>
  </div>

</div>{# /row #}

{# ── QEMU Guest Agent ── #}
<div class="card mt-4">
  <h5 class="card-header"><i class="mdi mdi-chip"></i> QEMU Guest Agent</h5>
  <div class="card-body">
    <div class="row g-3">
      {% for key, label in qemu_ga_items %}
      <div class="col-md-4">
        <div class="form-check">
          <input type="hidden" name="chk_exists_{{ key }}" value="1">
          <input class="form-check-input" type="checkbox" name="{{ key }}" id="{{ key }}" value="on">
          <label class="form-check-label" for="{{ key }}">{{ label }}</label>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</div>

{# ── 提交 ── #}
<div class="d-flex align-items-center gap-3 mt-3 mb-2">
  <button type="submit" class="btn btn-primary px-4">
    <i class="mdi mdi-content-save"></i> 建立規劃記錄
  </button>
  <button type="button" class="btn btn-outline-secondary"
          data-bs-toggle="collapse" data-bs-target="#new-vm-panel">
    取消
  </button>
</div>

</form>
</div>{# /collapse #}

{# ── 規劃記錄列表 ── #}
<div class="card" id="log-table-card">
  <div class="card-body p-0">
    {% render_table table %}
  </div>
</div>

<script>
const panel = document.getElementById('new-vm-panel');
const tableCard = document.getElementById('log-table-card');
panel.addEventListener('show.bs.collapse',  () => tableCard.style.display = 'none');
panel.addEventListener('hidden.bs.collapse', () => tableCard.style.display = '');

const FREE_IPS_URL = "{% url 'plugins:pve_sync_plugin:vm-planner-free-ips' 0 %}".replace('/0/', '/');
const CHECK_IP_URL = "{% url 'plugins:pve_sync_plugin:vm-planner-check-ip' %}";

function getLastOctet(ip) { const m = (ip || '').match(/\.(\d+)$/); return m ? m[1] : null; }

function loadFreeIps(nic, rangeId) {
  const prefix = nic === 'mgmt' ? 'mgmt' : 'inet';
  const select = document.getElementById(prefix + '_ip_select');
  const input  = document.getElementById(prefix + '_ip_input');
  const probe  = document.getElementById(prefix + '_probe_result');
  if (!rangeId) { select.disabled = true; select.innerHTML = '<option value="">— 先選擇 IP Range —</option>'; input.value = ''; probe.innerHTML = ''; return; }
  probe.innerHTML = '<span class="text-muted small">載入空閒 IP 中…</span>';
  select.disabled = true;
  let url = FREE_IPS_URL + rangeId + '/';
  if (nic === 'inet') { const octet = getLastOctet(document.getElementById('mgmt_ip_input').value); if (octet) url += '?prefer_last_octet=' + octet; }
  fetch(url, {headers: {'X-Requested-With': 'XMLHttpRequest'}})
    .then(r => r.json())
    .then(data => {
      if (data.error) { probe.innerHTML = '<span class="text-danger small">' + data.error + '</span>'; return; }
      select.innerHTML = '<option value="">— 選擇空閒 IP —</option>';
      data.free_ips.forEach(item => { const o = document.createElement('option'); o.value = item.ip; o.textContent = item.ip; select.appendChild(o); });
      select.disabled = false;
      if (data.free_ips.length === 0) { probe.innerHTML = '<span class="text-danger small">此 Range 無空閒 IP</span>'; return; }
      const chosen = data.preferred || data.free_ips[0];
      select.value = chosen.ip; input.value = chosen.ip; probeIp(nic);
      if (data.preferred) {
        const octet = getLastOctet(document.getElementById('mgmt_ip_input').value);
        probe.innerHTML = '<span class="text-success small"><i class="mdi mdi-link"></i> 依 Management 末位 <strong>.' + octet + '</strong> 自動對齊 ' + chosen.ip + '</span>';
      } else if (nic === 'inet') {
        const octet = getLastOctet(document.getElementById('mgmt_ip_input').value);
        probe.innerHTML = '<span class="text-warning small">自動選擇第一個空閒 IP' + (octet ? '（末位 .' + octet + ' 已佔用）' : '') + '</span>';
      } else {
        probe.innerHTML = '<span class="text-success small">找到 ' + data.free_ips.length + ' 個空閒 IP</span>';
      }
    })
    .catch(e => { probe.innerHTML = '<span class="text-danger small">請求失敗：' + e + '</span>'; });
}

function syncIpInput(nic) { const sel = document.getElementById(nic + '_ip_select'); const inp = document.getElementById(nic + '_ip_input'); if (sel.value) inp.value = sel.value; }

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('mgmt_ip_input').addEventListener('change', function() {
    const inetRangeId = document.getElementById('inet_range').value;
    if (inetRangeId) loadFreeIps('inet', inetRangeId);
  });
});

const _probeTimers = {}, _probeGen = {};
function probeIp(nic) {
  const ip  = document.getElementById(nic + '_ip_input').value.trim();
  const box = document.getElementById(nic + '_probe_result');
  box.innerHTML = '';
  _probeGen[nic] = (_probeGen[nic] || 0) + 1;
  clearTimeout(_probeTimers[nic]);
  if (!ip || ip.length < 7) return;
  const gen = _probeGen[nic];
  _probeTimers[nic] = setTimeout(function() { _doProbe(nic, ip, box, gen); }, 800);
}
function _doProbe(nic, ip, box, gen) {
  if (gen !== _probeGen[nic]) return;
  box.innerHTML = '<span class="badge bg-secondary"><span class="spinner-border spinner-border-sm" style="width:.65rem;height:.65rem"></span> 探測 ' + ip + '…</span>';
  fetch(CHECK_IP_URL + '?ip=' + encodeURIComponent(ip), {headers: {'X-Requested-With': 'XMLHttpRequest'}})
  .then(r => r.json())
  .then(data => {
    if (gen !== _probeGen[nic]) return;
    if (data.error) { box.innerHTML = '<span class="badge bg-warning text-dark">' + data.error + '</span>'; return; }
    if (data.status === 'in_use')
      box.innerHTML = '<span class="badge bg-danger"><i class="mdi mdi-alert-circle"></i> IP 不可用</span> <small class="text-danger">' + data.detail + '</small>';
    else if (data.status === 'free')
      box.innerHTML = '<span class="badge bg-success"><i class="mdi mdi-check-circle"></i> IP 可用</span> <small class="text-muted">' + data.detail + '</small>';
    else
      box.innerHTML = '<span class="badge bg-secondary"><i class="mdi mdi-help-circle"></i> 無法確認</span> <small class="text-muted">' + data.detail + '</small>';
  })
  .catch(e => { if (gen !== _probeGen[nic]) return; box.innerHTML = '<span class="badge bg-warning text-dark">探測失敗：' + e + '</span>'; });
}
</script>
{% endblock %}