{#
 Licensed to the Apache Software Foundation (ASF) under one
 or more contributor license agreements.  See the NOTICE file
 distributed with this work for additional information
 regarding copyright ownership.  The ASF licenses this file
 to you under the Apache License, Version 2.0 (the
 "License"); you may not use this file except in compliance
 with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing,
 software distributed under the License is distributed on an
 "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License.
#}

{% extends base_template %}

{% block page_title %}仪表盘 - {{ appbuilder.app_name }}{% endblock %}

{% block head_css %}
  {{ super() }}
  <style>
    .dashboard-container {
      padding: 12px 16px;
      background: #f8fafc;
      min-height: calc(100vh - 50px);
    }

    /* 头部 */
    .dashboard-header {
      margin-bottom: 12px;
    }
    .dashboard-header h1 {
      font-size: 18px;
      font-weight: 600;
      color: #1e293b;
      margin: 0 0 2px 0;
    }
    .dashboard-header p {
      color: #64748b;
      font-size: 12px;
      margin: 0;
    }

    /* 统计卡片 */
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin-bottom: 12px;
    }
    @media (max-width: 1200px) {
      .stats-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 640px) {
      .stats-grid { grid-template-columns: 1fr; }
    }
    
    .stat-card {
      background: #fff;
      border-radius: 8px;
      padding: 12px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      border: 1px solid #e2e8f0;
      transition: all 0.2s;
    }
    .stat-card:hover {
      box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    }

    .stat-icon-wrap {
      width: 28px;
      height: 28px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 8px;
    }
    .stat-icon-wrap.blue { background: #eff6ff; }
    .stat-icon-wrap.green { background: #f0fdf4; }
    .stat-icon-wrap.orange { background: #fff7ed; }
    .stat-icon-wrap.red { background: #fef2f2; }

    .stat-icon-wrap .material-icons {
      font-size: 14px;
    }
    .stat-icon-wrap.blue .material-icons { color: #3b82f6; }
    .stat-icon-wrap.green .material-icons { color: #22c55e; }
    .stat-icon-wrap.orange .material-icons { color: #f97316; }
    .stat-icon-wrap.red .material-icons { color: #ef4444; }

    .stat-number {
      font-size: 20px;
      font-weight: 700;
      color: #1e293b;
      line-height: 1;
      margin-bottom: 2px;
    }
    .stat-label {
      font-size: 11px;
      color: #64748b;
    }

    /* 主内容区 */
    .content-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    @media (max-width: 1024px) {
      .content-grid { grid-template-columns: 1fr; }
    }
    
    .panel {
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      border: 1px solid #e2e8f0;
      overflow: hidden;
    }

    .panel-header {
      padding: 10px 12px;
      border-bottom: 1px solid #f1f5f9;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .panel-header h3 {
      font-size: 12px;
      font-weight: 600;
      color: #1e293b;
      margin: 0;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .panel-header .material-icons {
      font-size: 14px;
      color: #64748b;
    }
    .panel-badge {
      font-size: 10px;
      padding: 2px 6px;
      border-radius: 10px;
      background: #f1f5f9;
      color: #64748b;
      font-weight: 500;
    }

    .panel-body {
      padding: 10px 12px;
    }
    
    /* 系统状态 */
    .status-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .status-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 12px;
      background: #f8fafc;
      border-radius: 6px;
    }
    .status-left {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .status-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
    }
    .status-dot.running {
      background: #22c55e;
      box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
    }
    .status-dot.stopped {
      background: #ef4444;
      box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
    }
    .status-dot.warning {
      background: #f59e0b;
      box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
    }
    .status-name {
      font-size: 12px;
      font-weight: 500;
      color: #1e293b;
    }
    .status-tag {
      font-size: 10px;
      padding: 2px 6px;
      border-radius: 4px;
      font-weight: 500;
    }
    .status-tag.running {
      background: #dcfce7;
      color: #166534;
    }
    .status-tag.stopped {
      background: #fee2e2;
      color: #991b1b;
    }
    .status-tag.warning {
      background: #fef3c7;
      color: #92400e;
    }
    
    /* 资源监控 */
    .resource-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .resource-item {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .resource-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 11px;
    }
    .resource-label {
      display: flex;
      align-items: center;
      gap: 4px;
      color: #475569;
      font-weight: 500;
    }
    .resource-label .material-icons {
      font-size: 12px;
      color: #64748b;
    }
    .resource-value {
      color: #1e293b;
      font-weight: 600;
    }
    .resource-bar {
      height: 4px;
      background: #e2e8f0;
      border-radius: 2px;
      overflow: hidden;
    }
    .resource-bar-fill {
      height: 100%;
      border-radius: 2px;
      transition: width 0.3s;
    }
    .resource-bar-fill.low { background: #22c55e !important; }
    .resource-bar-fill.medium { background: #f59e0b !important; }
    .resource-bar-fill.high { background: #ef4444 !important; }
    
    /* 任务统计 */
    .task-stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
    }
    .task-box {
      text-align: center;
      padding: 10px 6px;
      border-radius: 6px;
      background: #f8fafc;
    }
    .task-box.success { border-bottom: 2px solid #22c55e; }
    .task-box.failed { border-bottom: 2px solid #ef4444; }
    .task-box.running { border-bottom: 2px solid #3b82f6; }
    .task-box.queued { border-bottom: 2px solid #94a3b8; }
    .task-box.restarted { border-bottom: 2px solid #f59e0b; }
    .task-box.upstream_failed { border-bottom: 2px solid #ec4899; }
    .task-box.skipped { border-bottom: 2px solid #64748b; }
    .task-box.deferred { border-bottom: 2px solid #8b5cf6; }
    
    .task-count {
      font-size: 18px;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 2px;
    }
    .task-name {
      font-size: 10px;
      color: #64748b;
    }
    
    /* 快捷链接 */
    .link-list {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .link-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      background: #f8fafc;
      border-radius: 6px;
      text-decoration: none;
      color: #334155;
      transition: all 0.15s;
    }
    .link-item:hover {
      background: #eff6ff;
      color: #3b82f6;
      text-decoration: none;
    }
    .link-item .material-icons {
      font-size: 16px;
      color: #64748b;
    }
    .link-item:hover .material-icons {
      color: #3b82f6;
    }
    .link-text {
      flex: 1;
      font-size: 12px;
      font-weight: 500;
    }
    .link-arrow {
      color: #94a3b8;
      font-size: 16px;
    }
    
    /* 失败记录 */
    .failure-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .failure-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      background: #fef2f2;
      border: 1px solid #fecaca;
      border-radius: 6px;
    }
    .failure-icon {
      width: 24px;
      height: 24px;
      border-radius: 4px;
      background: #fee2e2;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .failure-icon .material-icons {
      font-size: 14px;
      color: #ef4444;
    }
    .failure-info {
      flex: 1;
    }
    .failure-dag {
      font-weight: 600;
      color: #1e293b;
      font-size: 12px;
      margin-bottom: 0;
    }
    .failure-dag a {
      color: inherit;
      text-decoration: none;
    }
    .failure-dag a:hover {
      color: #3b82f6;
    }
    .failure-time {
      font-size: 10px;
      color: #64748b;
    }
    .failure-badge {
      font-size: 9px;
      padding: 2px 6px;
      border-radius: 4px;
      background: #ef4444;
      color: #fff;
      font-weight: 600;
    }
    
    .empty-state {
      text-align: center;
      padding: 24px 16px;
      color: #64748b;
    }
    .empty-state .material-icons {
      font-size: 32px;
      margin-bottom: 6px;
      color: #cbd5e1;
    }
    .empty-state p {
      margin: 0;
      font-size: 12px;
    }
  </style>
{% endblock %}

{% block content %}
<div class="dashboard-container">
  <div class="dashboard-header">
    <h1>仪表盘</h1>
    <p>查看系统状态、任务分布和最近活动</p>
  </div>
  
  <!-- 顶部统计 -->
  <div class="stats-grid">
    <div class="stat-card">
      <div class="stat-icon-wrap blue">
        <span class="material-icons">device_hub</span>
      </div>
      <div class="stat-number">{{ total_dags }}</div>
      <div class="stat-label">总 DAG 数</div>
    </div>
    <div class="stat-card">
      <div class="stat-icon-wrap green">
        <span class="material-icons">play_arrow</span>
      </div>
      <div class="stat-number">{{ active_dags }}</div>
      <div class="stat-label">活跃 DAG</div>
    </div>
    <div class="stat-card">
      <div class="stat-icon-wrap orange">
        <span class="material-icons">pause</span>
      </div>
      <div class="stat-number">{{ paused_dags }}</div>
      <div class="stat-label">暂停 DAG</div>
    </div>
    <div class="stat-card">
      <div class="stat-icon-wrap red">
        <span class="material-icons">error_outline</span>
      </div>
      <div class="stat-number">{{ import_errors_count }}</div>
      <div class="stat-label">导入错误</div>
    </div>
  </div>
  
  <div class="content-grid">
    <!-- 系统状态 -->
    <div class="panel">
      <div class="panel-header">
        <h3><span class="material-icons">dns</span>系统状态</h3>
        <span class="panel-badge">实时</span>
      </div>
      <div class="panel-body">
        <div class="status-list">
          <div class="status-row">
            <div class="status-left">
              <div class="status-dot {{ 'running' if scheduler_status == 'healthy' else 'stopped' }}"></div>
              <span class="status-name">调度器</span>
            </div>
            <span class="status-tag {{ 'running' if scheduler_status == 'healthy' else 'stopped' }}">
              {{ '运行中' if scheduler_status == 'healthy' else '已停止' }}
            </span>
          </div>
          <div class="status-row">
            <div class="status-left">
              <div class="status-dot running"></div>
              <span class="status-name">Web 服务</span>
            </div>
            <span class="status-tag running">运行中</span>
          </div>
        </div>
        {% if system_metrics %}
        <div style="margin-top: 12px; padding-top: 12px; border-top: 1px solid #f1f5f9;">
          <div class="resource-list">
            <div class="resource-item">
              <div class="resource-header">
                <span class="resource-label"><span class="material-icons">memory</span>CPU</span>
                <span class="resource-value" id="cpu-value">{{ system_metrics.cpu.percent }}%</span>
              </div>
              <div class="resource-bar">
                <div class="resource-bar-fill {{ 'low' if system_metrics.cpu.percent < 50 else 'medium' if system_metrics.cpu.percent < 80 else 'high' }}" id="cpu-bar" style="width: {{ system_metrics.cpu.percent }}%"></div>
              </div>
            </div>
            <div class="resource-item">
              <div class="resource-header">
                <span class="resource-label"><span class="material-icons">sd_storage</span>内存</span>
                <span class="resource-value" id="mem-value">{{ system_metrics.memory.used }}G / {{ system_metrics.memory.total }}G</span>
              </div>
              <div class="resource-bar">
                <div class="resource-bar-fill {{ 'low' if system_metrics.memory.percent < 50 else 'medium' if system_metrics.memory.percent < 80 else 'high' }}" id="mem-bar" style="width: {{ system_metrics.memory.percent }}%"></div>
              </div>
            </div>
            <div class="resource-item">
              <div class="resource-header">
                <span class="resource-label"><span class="material-icons">disc_full</span>磁盘</span>
                <span class="resource-value" id="disk-value">{{ system_metrics.disk.used }}G / {{ system_metrics.disk.total }}G</span>
              </div>
              <div class="resource-bar">
                <div class="resource-bar-fill {{ 'low' if system_metrics.disk.percent < 50 else 'medium' if system_metrics.disk.percent < 80 else 'high' }}" id="disk-bar" style="width: {{ system_metrics.disk.percent }}%"></div>
              </div>
            </div>
          </div>
        </div>
        {% endif %}
      </div>
    </div>
    
    <!-- 任务分布 -->
    <div class="panel">
      <div class="panel-header">
        <h3><span class="material-icons">donut_large</span>任务分布</h3>
      </div>
      <div class="panel-body">
        <div class="task-stats">
          <div class="task-box success">
            <div class="task-count">{{ task_stats.get('success', 0) }}</div>
            <div class="task-name">成功</div>
          </div>
          <div class="task-box failed">
            <div class="task-count">{{ task_stats.get('failed', 0) }}</div>
            <div class="task-name">失败</div>
          </div>
          <div class="task-box running">
            <div class="task-count">{{ task_stats.get('running', 0) }}</div>
            <div class="task-name">运行中</div>
          </div>
          <div class="task-box queued">
            <div class="task-count">{{ task_stats.get('queued', 0) }}</div>
            <div class="task-name">队列中</div>
          </div>
          <div class="task-box restarted">
            <div class="task-count">{{ task_stats.get('restarted', 0) }}</div>
            <div class="task-name">重启</div>
          </div>
          <div class="task-box upstream_failed">
            <div class="task-count">{{ task_stats.get('upstream_failed', 0) }}</div>
            <div class="task-name">上游失败</div>
          </div>
          <div class="task-box skipped">
            <div class="task-count">{{ task_stats.get('skipped', 0) }}</div>
            <div class="task-name">跳过</div>
          </div>
          <div class="task-box deferred">
            <div class="task-count">{{ task_stats.get('deferred', 0) }}</div>
            <div class="task-name">延迟</div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 快捷入口 -->
    <div class="panel">
      <div class="panel-header">
        <h3><span class="material-icons">bolt</span>快捷入口</h3>
      </div>
      <div class="panel-body">
        <div class="link-list">
          <a href="{{ url_for('Airflow.index', status='active') }}" class="link-item">
            <span class="material-icons">play_arrow</span>
            <span class="link-text">查看活跃 DAG</span>
            <span class="material-icons link-arrow">chevron_right</span>
          </a>
          <a href="{{ url_for('Airflow.index', status='paused') }}" class="link-item">
            <span class="material-icons">pause</span>
            <span class="link-text">查看暂停 DAG</span>
            <span class="material-icons link-arrow">chevron_right</span>
          </a>
          <a href="{{ url_for('DagRunModelView.list') }}" class="link-item">
            <span class="material-icons">history</span>
            <span class="link-text">DAG 运行记录</span>
            <span class="material-icons link-arrow">chevron_right</span>
          </a>
          <a href="{{ url_for('TaskInstanceModelView.list') }}" class="link-item">
            <span class="material-icons">assignment</span>
            <span class="link-text">任务实例列表</span>
            <span class="material-icons link-arrow">chevron_right</span>
          </a>
        </div>
      </div>
    </div>
    
    <!-- 最近失败 -->
    <div class="panel">
      <div class="panel-header">
        <h3><span class="material-icons">warning</span>最近失败</h3>
        <span class="panel-badge">最近 5 条</span>
      </div>
      <div class="panel-body">
        {% if recent_failed_runs %}
          <div class="failure-list">
            {% for run in recent_failed_runs %}
              <div class="failure-item">
                <div class="failure-icon">
                  <span class="material-icons">error</span>
                </div>
                <div class="failure-info">
                  <div class="failure-dag">
                    <a href="{{ url_for('Airflow.graph', dag_id=run.dag_id) }}">{{ run.dag_id }}</a>
                  </div>
                  <div class="failure-time">{{ run.execution_date.strftime('%Y-%m-%d %H:%M') }}</div>
                </div>
                <span class="failure-badge">失败</span>
              </div>
            {% endfor %}
          </div>
        {% else %}
          <div class="empty-state">
            <span class="material-icons">check_circle</span>
            <p>最近没有失败的运行</p>
          </div>
        {% endif %}
      </div>
    </div>
  </div>
</div>

<script>
(function() {
  // 从 meta 标签获取 CSRF token
  function getCsrfToken() {
    var meta = document.querySelector('meta[name="csrf_token"]');
    return meta ? meta.content : '';
  }
  
  // 刷新系统资源数据
  function refreshSystemMetrics() {
    fetch('/api/v1/dashboard/metrics', {
      credentials: 'same-origin',
      headers: {
        'X-CSRFToken': getCsrfToken()
      }
    })
      .then(r => r.json())
      .then(data => {
        if (data.cpu !== undefined) {
          // CPU
          document.getElementById('cpu-value').textContent = data.cpu + '%';
          var cpuBar = document.getElementById('cpu-bar');
          cpuBar.style.width = data.cpu + '%';
          cpuBar.className = 'resource-bar-fill ' + (data.cpu < 50 ? 'low' : data.cpu < 80 ? 'medium' : 'high');
        }
        if (data.memory) {
          // Memory
          document.getElementById('mem-value').textContent = data.memory.used + 'G / ' + data.memory.total + 'G';
          var memBar = document.getElementById('mem-bar');
          memBar.style.width = data.memory.percent + '%';
          memBar.className = 'resource-bar-fill ' + (data.memory.percent < 50 ? 'low' : data.memory.percent < 80 ? 'medium' : 'high');
        }
        if (data.disk) {
          // Disk
          document.getElementById('disk-value').textContent = data.disk.used + 'G / ' + data.disk.total + 'G';
          var diskBar = document.getElementById('disk-bar');
          diskBar.style.width = data.disk.percent + '%';
          diskBar.className = 'resource-bar-fill ' + (data.disk.percent < 50 ? 'low' : data.disk.percent < 80 ? 'medium' : 'high');
        }
      })
      .catch(() => {});
  }
  
  // 每5秒刷新一次
  setInterval(refreshSystemMetrics, 5000);
})();
</script>
{% endblock %}