{% extends 'base.html' %}
{% block title %}域名详情 - {{ domain.name }}{% endblock %}
{% block extra_head %}
<style>
  .sidebar-sticky { position: sticky; top: 80px; }
  .list-group .list-group-item.active { background-color: #0d6efd; border-color: #0d6efd; }
  .card .badge { font-size: 0.9rem; }
  .progress { height: 20px; }
  .progress-bar { font-size: 0.8rem; }
  @media (max-width: 991.98px){ .sidebar-sticky { position: static; } }
  .table td, .table th { vertical-align: middle; }
  .text-muted.small { line-height: 1.2; }
</style>
{% endblock %}

{% block content %}
  <div class="row g-4">
    <div class="col-lg-2 col-md-3">
      <div class="sidebar-sticky">
        <div class="list-group">
          <a class="list-group-item list-group-item-action active" href="#">概览</a>
          <a class="list-group-item list-group-item-action" href="#">统计</a>
          <a class="list-group-item list-group-item-action" href="#">接入信息</a>
          <a class="list-group-item list-group-item-action" href="{% url 'domains:settings' domain_id=domain.id %}">设置</a>
        </div>
      </div>
    </div>
    <div class="col-lg-10 col-md-9">
      <div class="d-flex justify-content-between align-items-center mb-3">
        <h3>域名：{{ domain.name }}</h3>
        <div class="btn-group">
          <a href="{% url 'domains:list' %}" class="btn btn-outline-secondary">返回列表</a>
          <a href="{% url 'domains:upgrade' domain_id=domain.id %}" class="btn btn-primary" onclick="return confirm('升级套餐将影响后续计费，确认继续？');">升级套餐</a>
          <a href="{% url 'domains:logs' domain_id=domain.id %}" class="btn btn-outline-primary">访问日志</a>
        </div>
      </div>

      <div class="card mb-4">
        <div class="card-header">概览</div>
        <div class="card-body">
          <div class="row mb-3">
            <div class="col-md-6">
              <div>当前套餐：{% if domain.current_plan %}{{ domain.current_plan.name }}{% else %}-{% endif %}</div>
              <div>状态：{{ domain.get_status_display }}</div>
            </div>
            <div class="col-md-6">
              <div class="mb-1">本月流量：{{ used_gb }} GB / {{ total_quota_gb }} GB</div>
              <div class="progress" role="progressbar" aria-label="Monthly usage" aria-valuenow="{{ progress_pct }}" aria-valuemin="0" aria-valuemax="100">
                <div class="progress-bar" style="width: {{ progress_pct }}%">{{ progress_pct }}%</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="card mb-4">
        <div class="card-header">统计（近30天）</div>
        <div class="card-body">
          <div class="row mb-3">
            <div class="col-md-4">
              <div class="fw-semibold">近 7 天合计</div>
              <div><span class="badge bg-primary">{{ last7_total_gb|default:0 }} GB</span></div>
              <div class="text-muted small">均值：{{ last7_avg_gb|default:0 }} GB/日</div>
            </div>
            <div class="col-md-4">
              <div class="fw-semibold">近 30 天合计</div>
              <div><span class="badge bg-info text-dark">{{ last30_total_gb|default:0 }} GB</span></div>
              <div class="text-muted small">均值：{{ last30_avg_gb|default:0 }} GB/日</div>
            </div>
            <div class="col-md-4">
              <div class="fw-semibold">峰值日（流量）</div>
              <div>
                {% if peak_volume_day %}
                <span class="badge bg-warning text-dark">{{ peak_volume_day.day }} / {{ peak_volume_day.gb }} GB</span>
                {% else %}
                <span class="text-muted">无数据</span>
                {% endif %}
              </div>
            </div>
          </div>
          <div class="row mb-3">
            <div class="col-md-4">
              <div class="fw-semibold">峰值日（带宽）</div>
              <div>
                {% if peak_bandwidth_day %}
                  <span class="badge bg-secondary">{{ peak_bandwidth_day.day }} / {{ peak_bandwidth_day.mbps }} Mbps</span>
                {% else %}
                  <span class="text-muted">无数据</span>
                {% endif %}
              </div>
            </div>
            <div class="col-md-8">
              <div class="fw-semibold">请求数 / 状态码分布</div>
              <div class="mb-2">
                {% if requests_24h_total %}
                  近 24 小时请求数：<span class="badge bg-primary">{{ requests_24h_total }}</span>
                {% else %}
                  <span class="text-muted">请求数不可用（请在设置启用访问日志）</span>
                {% endif %}
              </div>
              {% if status_bins %}
              <div class="d-flex gap-2 flex-wrap">
                <span class="badge text-bg-success">2xx {{ status_bins.2xx }}</span>
                <span class="badge text-bg-info">3xx {{ status_bins.3xx }}</span>
                <span class="badge text-bg-warning text-dark">4xx {{ status_bins.4xx }}</span>
                <span class="badge text-bg-danger">5xx {{ status_bins.5xx }}</span>
              </div>
              {% if status_top %}
              <div class="text-muted small mt-1">Top 状态码：
                {% for code,count in status_top %}
                  <span class="me-2"><code>{{ code }}</code> {{ count }}</span>
                {% endfor %}
              </div>
              {% endif %}
              {% else %}
              <div class="text-muted small">状态码分布不可用。</div>
              {% endif %}
            </div>
          </div>
          {% if traffic_rows %}
          <canvas id="trafficChart" height="120" class="mb-3" style="width: 100%;"></canvas>
          <div class="table-responsive">
            <table class="table table-sm align-middle">
              <thead>
                <tr>
                  <th>日期</th>
                  <th>流量（GB）</th>
                  <th>峰值带宽（Mbps）</th>
                </tr>
              </thead>
              <tbody>
                {% for r in traffic_rows %}
                <tr>
                  <td>{{ r.day }}</td>
                  <td>{{ r.gb }}</td>
                  <td>{% if r.peak_mbps %}{{ r.peak_mbps }}{% else %}<span class="text-muted">-</span>{% endif %}</td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
          {% else %}
          <div class="text-muted">暂无统计数据。</div>
          {% endif %}
          <div class="small text-muted">说明：统计数据来源于 GoEdge 每日拉取结果，仅供参考。</div>
        </div>
      </div>

      <div class="card mb-4">
        <div class="card-header">接入信息（CNAME）</div>
        <div class="card-body">
          <table class="table table-sm">
            <thead>
              <tr>
                <th>主机名</th>
                <th>期望 CNAME 目标</th>
                <th>实际解析</th>
                <th>状态</th>
              </tr>
            </thead>
            <tbody>
            {% if cname_results %}
              {% for r in cname_results %}
              <tr>
                <td>{{ r.hostname }}</td>
                <td><code>{{ r.expected }}</code></td>
                <td>
                  {% if r.actual %}
                    {% for a in r.actual %}<code>{{ a }}</code>{% if not forloop.last %}, {% endif %}{% endfor %}
                  {% else %}
                    <span class="text-muted">(无)</span>
                  {% endif %}
                </td>
                <td>
                  {% if r.ok %}
                    <span class="badge text-bg-success">正确</span>
                  {% else %}
                    <span class="badge text-bg-warning">未匹配</span>
                    {% if r.error %}<div class="text-muted">{{ r.error }}</div>{% endif %}
                  {% endif %}
                </td>
              </tr>
              {% endfor %}
            {% else %}
              {% for host, target in domain.cname_targets.items %}
              <tr>
                <td>{{ host }}</td>
                <td><code>{{ target }}</code></td>
                <td class="text-muted">(未检测)</td>
                <td><span class="badge text-bg-secondary">未知</span></td>
              </tr>
              {% endfor %}
            {% endif %}
            </tbody>
          </table>

          <form method="post" action="{% url 'domains:check_dns' domain_id=domain.id %}" class="mt-2">
            {% csrf_token %}
            <button type="submit" class="btn btn-primary">立即检测 DNS 生效</button>
          </form>
        </div>
      </div>

      <div class="card mb-4">
        <div class="card-header">GoEdge 同步状态</div>
        <div class="card-body">
          {% if goedge_status and not goedge_status.error %}
          <div class="row g-3">
            <div class="col-md-3">
              <div class="fw-semibold">Web ID</div>
              <div>{% if goedge_status.webId %}<span class="badge text-bg-secondary">{{ goedge_status.webId }}</span>{% else %}<span class="text-muted">未获取</span>{% endif %}</div>
            </div>
            <div class="col-md-3">
              <div class="fw-semibold">访问日志</div>
              {% if goedge_status.accessLog.isOn %}
                <span class="badge text-bg-success">已启用</span>
              {% elif goedge_status.accessLog.isOn is not none %}
                <span class="badge text-bg-secondary">未启用</span>
              {% else %}
                <span class="text-muted">未知</span>
              {% endif %}
              {% if goedge_status.accessLog.policyId %}
                <div class="text-muted small">PolicyId: {{ goedge_status.accessLog.policyId }}</div>
              {% endif %}
            </div>
            <div class="col-md-3">
              <div class="fw-semibold">WebSocket</div>
              {% if goedge_status.websocket.isOn %}
                <span class="badge text-bg-success">已启用</span>
              {% elif goedge_status.websocket.isOn is not none %}
                <span class="badge text-bg-secondary">未启用</span>
              {% else %}
                <span class="text-muted">未知</span>
              {% endif %}
            </div>
            <div class="col-md-3">
              <div class="fw-semibold">WAF</div>
              {% if goedge_status.firewall.isOn %}
                <span class="badge text-bg-success">已启用</span>
              {% elif goedge_status.firewall.isOn is not none %}
                <span class="badge text-bg-secondary">未启用</span>
              {% else %}
                <span class="text-muted">未知</span>
              {% endif %}
              {% if goedge_status.firewall.policyId %}
                <div class="text-muted small">PolicyId: {{ goedge_status.firewall.policyId }}</div>
              {% endif %}
            </div>
            <div class="col-md-3">
              <div class="fw-semibold">SSL策略</div>
              <div>{% if goedge_status.sslPolicy.id %}<span class="badge text-bg-secondary">{{ goedge_status.sslPolicy.id }}</span>{% else %}<span class="text-muted">未获取</span>{% endif %}</div>
            </div>
            <div class="col-md-3">
              <div class="fw-semibold">HTTP/3</div>
              {% if goedge_status.sslPolicy.http3Enabled %}
                <span class="badge text-bg-success">已启用</span>
              {% elif goedge_status.sslPolicy.http3Enabled is not none %}
                <span class="badge text-bg-secondary">未启用</span>
              {% else %}
                <span class="text-muted">未知</span>
              {% endif %}
            </div>
          </div>
          {% elif goedge_status and goedge_status.error %}
            <div class="alert alert-warning">状态查询失败：{{ goedge_status.error }}</div>
          {% else %}
            <div class="text-muted">当前域名尚未关联 GoEdge 服务或无可查询信息。</div>
          {% endif %}
        </div>
      </div>

    </div>
  </div>
{% endblock %}

{% block extra_scripts %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    var rows = [
      {% for r in traffic_rows reversed %}
        { day: '{{ r.day|date:"Y-m-d" }}', gb: {{ r.gb|default:0 }}, peak_mbps: {% if r.peak_mbps %}{{ r.peak_mbps }}{% else %}null{% endif %} },
      {% endfor %}
    ];
    if (!rows.length || !window.Chart) return;
    var labels = rows.map(function(x){ return x.day; });
    var dataGb = rows.map(function(x){ return x.gb || 0; });
    var dataMbps = rows.map(function(x){ return x.peak_mbps === null ? null : x.peak_mbps; });
    var el = document.getElementById('trafficChart');
    if (!el) return;
    var ctx = el.getContext('2d');
    new Chart(ctx, {
      type: 'line',
      data: {
        labels: labels,
        datasets: [
          {
            label: '流量（GB）',
            data: dataGb,
            borderColor: '#0d6efd',
            backgroundColor: 'rgba(13,110,253,0.15)',
            fill: true,
            tension: 0.3,
            yAxisID: 'yGb'
          },
          {
            label: '峰值带宽（Mbps）',
            data: dataMbps,
            borderColor: '#6f42c1',
            backgroundColor: 'rgba(111,66,193,0.08)',
            fill: false,
            tension: 0.3,
            yAxisID: 'yMbps'
          }
        ]
      },
      options: {
        responsive: true,
        interaction: { mode: 'index', intersect: false },
        plugins: {
          legend: { position: 'bottom' },
          tooltip: {
            callbacks: {
              label: function(ctx){
                var suffix = ctx.dataset.yAxisID === 'yGb' ? ' GB' : ' Mbps';
                return ctx.dataset.label + ': ' + ctx.formattedValue + suffix;
              }
            }
          }
        },
        scales: {
          yGb: { type: 'linear', position: 'left', title: { display: true, text: 'GB' } },
          yMbps: { type: 'linear', position: 'right', title: { display: true, text: 'Mbps' }, grid: { drawOnChartArea: false } }
        }
      }
    });
  });
</script>
{% endblock %}