{% extends "base.html" %}
{% load static %}

{% block title %}운영 단계 정보 · H2-Flex AX{% endblock %}

{% block head_extra %}
<style>
  .sysdep-shell {
    min-height: 100vh;
    background: #f4f7fa;
    padding: 2.5rem 1.5rem 4rem;
  }
  :root[data-theme='dark'] .sysdep-shell { background: #020617; color: #f1f5f9; }
  .sysdep-container { max-width: 1100px; margin: 0 auto; }
  .sysdep-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 1.5rem;
    color: #475569;
    font-size: 0.85rem;
    text-decoration: none;
  }
  .sysdep-back:hover { color: #0f172a; }
  :root[data-theme='dark'] .sysdep-back { color: #94a3b8; }

  .sysdep-header {
    background: white;
    border-radius: 18px;
    padding: 1.75rem 2rem;
    border: 1px solid #e2e8f0;
    margin-bottom: 1.5rem;
  }
  :root[data-theme='dark'] .sysdep-header { background: #0f172a; border-color: #1e293b; }
  .sysdep-header h1 {
    margin: 0 0 8px;
    font-size: 1.5rem;
    font-weight: 800;
    color: #0a2540;
  }
  :root[data-theme='dark'] .sysdep-header h1 { color: #f1f5f9; }
  .sysdep-header__sub { margin: 0; font-size: 0.85rem; color: #64748b; line-height: 1.6; }
  .sysdep-header__row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 1rem;
  }

  .sysdep-card {
    background: white;
    border-radius: 18px;
    border: 1px solid #e2e8f0;
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.5rem;
  }
  :root[data-theme='dark'] .sysdep-card { background: #0f172a; border-color: #1e293b; }
  .sysdep-card h2 {
    margin: 0 0 1rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #0a2540;
  }
  :root[data-theme='dark'] .sysdep-card h2 { color: #f1f5f9; }
  .sysdep-card__sub { margin: -8px 0 1.25rem; font-size: 0.8rem; color: #64748b; }

  .metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
  }
  .metric {
    padding: 1rem 1.1rem;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
  }
  :root[data-theme='dark'] .metric { background: #1e293b; border-color: #334155; }
  .metric__label {
    font-size: 0.7rem;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .metric__value {
    margin-top: 6px;
    font-size: 1.4rem;
    font-weight: 800;
    color: #0a2540;
  }
  :root[data-theme='dark'] .metric__value { color: #f1f5f9; }
  .metric__threshold { font-size: 0.75rem; color: #94a3b8; margin-left: 6px; font-weight: 500; }
  .metric__bar {
    margin-top: 10px;
    height: 6px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
  }
  :root[data-theme='dark'] .metric__bar { background: #334155; }
  .metric__bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.4s;
  }
  .metric__bar-fill--ok { background: #10b981; }
  .metric__bar-fill--warn { background: #f59e0b; }
  .metric__bar-fill--danger { background: #ef4444; }
  .metric__pct {
    margin-top: 6px;
    font-size: 0.7rem;
    font-weight: 700;
  }
  .metric__pct--ok { color: #047857; }
  .metric__pct--warn { color: #b45309; }
  .metric__pct--danger { color: #b91c1c; }

  .stack-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
  }
  .stack-table th, .stack-table td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
  }
  .stack-table th {
    font-size: 0.7rem;
    font-weight: 700;
    color: #475569;
    background: #f8fafc;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  :root[data-theme='dark'] .stack-table th { background: #1e293b; color: #94a3b8; border-bottom-color: #334155; }
  :root[data-theme='dark'] .stack-table td { border-bottom-color: #1e293b; }
  .stack-table tr:last-child td { border-bottom: none; }
  .col-current { color: #b45309; font-weight: 600; }
  .col-prod { color: #047857; font-weight: 700; }

  .checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
  }
  .checklist li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.85rem;
  }
  :root[data-theme='dark'] .checklist li { background: #1e293b; border-color: #334155; }
  .checklist li::before {
    content: "□";
    font-size: 1.1rem;
    color: #94a3b8;
  }

  .tier-state {
    margin-top: 1rem;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
  }
  .tier-state--ok { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
  .tier-state--warn { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
</style>
{% endblock %}

{% block content %}
<div class="sysdep-shell">
  <div class="sysdep-container">
    <a class="sysdep-back" href="/">← 메인으로</a>

    <header class="sysdep-header">
      <h1>Deployment Status</h1>
      <p class="sysdep-header__sub">
        본 시스템은 운영 단계에 따라 데이터 신뢰도와 권고 스택이 다릅니다.
        Tier 변경은 <code>DEPLOYMENT_TIER</code> 환경변수 변경 후 재시작이 필요하며,
        변경 이력은 감사 로그에 자동 기록됩니다.
      </p>
      <div class="sysdep-header__row">
        {% include "partials/deployment/tier_badge.html" %}
        <span style="font-size:0.85rem; color:#64748b;">현재 단계: <strong>{{ tier_label }}</strong> · {{ tier_trust }}</span>
      </div>
      {% if advisor.advisory_active %}
        <div class="tier-state tier-state--warn">
          ⚠ 마이그레이션 권고 활성 — {{ advisor.recommendation }}
        </div>
      {% else %}
        <div class="tier-state tier-state--ok">
          ✓ 현재 운영 단계에서 안정적으로 동작 중입니다 — {{ advisor.recommendation }}
        </div>
      {% endif %}
    </header>

    <section class="sysdep-card">
      <h2>현재 메트릭 vs 임계치</h2>
      <p class="sysdep-card__sub">하나라도 100%에 도달하면 다음 단계로의 마이그레이션이 권고됩니다.</p>
      <div class="metric-grid">
        {% for m in metric_cards %}
        <div class="metric">
          <div class="metric__label">{{ m.label }}</div>
          <div class="metric__value">
            {{ m.value }}<span class="metric__threshold">/ {{ m.threshold }} {{ m.unit }}</span>
          </div>
          <div class="metric__bar">
            <div class="metric__bar-fill metric__bar-fill--{{ m.state }}" style="width: {{ m.pct }}%"></div>
          </div>
          <div class="metric__pct metric__pct--{{ m.state }}">
            {{ m.pct }}%{% if m.triggered %} · 트리거 발생{% endif %}
          </div>
        </div>
        {% endfor %}
      </div>
    </section>

    <section class="sysdep-card">
      <h2>단계별 스택 비교</h2>
      <p class="sysdep-card__sub">PILOT 단계의 결과물은 정식 운영 데이터로 사용하지 마세요.</p>
      <div style="overflow-x:auto;">
        <table class="stack-table">
          <thead>
            <tr>
              <th>영역</th>
              <th>PILOT (현재)</th>
              <th>PRE-PROD</th>
              <th>PROD (권고)</th>
            </tr>
          </thead>
          <tbody>
            {% for row in stack_matrix %}
            <tr>
              <td><strong>{{ row.0 }}</strong></td>
              <td class="col-current">{{ row.1 }}</td>
              <td>{{ row.2 }}</td>
              <td class="col-prod">{{ row.3 }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </section>

    <section class="sysdep-card">
      <h2>PROD 승격 체크리스트</h2>
      <p class="sysdep-card__sub">상용 서비스 승격 전 모든 항목이 충족되어야 합니다.</p>
      <ul class="checklist">
        {% for item in prod_checklist %}
        <li>{{ item }}</li>
        {% endfor %}
      </ul>
    </section>
  </div>
</div>
{% endblock %}