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

{% block title %}정책 분석 리포트 | H2-Flex AX{% endblock %}

{% block head_extra %}
<link rel="stylesheet" href="{% static 'css/dashboard.css' %}">
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.1/dist/cdn.min.js"></script>
{% endblock %}

{% block content %}
<div class="app-shell">
  <!-- Sidebar -->
  <aside class="app-sidebar">
    <div class="logo-area">
      <i data-lucide="zap"></i>
      <span>H2-Flex <span style="color:white;">AX</span></span>
    </div>

    <nav class="nav-group">
      <a href="{% url 'dashboard-policy' %}" class="nav-item active">
        <i data-lucide="bar-chart-3"></i> <span>정책 분석 리포트</span>
      </a>
      <a href="{% url 'dashboard-ops' %}" class="nav-item">
        <i data-lucide="map"></i> <span>실시간 관제 센터</span>
      </a>
      <a href="{% url 'system-deployment' %}" class="nav-item">
        <i data-lucide="layers"></i> <span>운영 단계 정보</span>
      </a>
      <a href="/admin/" class="nav-item">
        <i data-lucide="settings"></i> <span>시스템 인프라 설정</span>
      </a>
    </nav>

    <div style="margin-top:auto; padding:1.25rem; background:rgba(255,255,255,0.04); border-radius:12px; border:1px solid rgba(255,255,255,0.06);">
      <p style="font-size:0.65rem; color:#64748b; font-weight:700; margin:0 0 8px; text-transform:uppercase; letter-spacing:0.08em;">Deployment</p>
      <a href="{% url 'system-deployment' %}" style="text-decoration:none;">
        {% include "partials/deployment/tier_badge.html" %}
      </a>
      <p style="font-size:0.7rem; color:#94a3b8; margin:8px 0 0;">v1.0.4 MVP</p>
    </div>
  </aside>

  <!-- Main Body -->
  <div class="app-body">
    <header class="app-topbar">
      <div style="display:flex; align-items:center; gap:12px;">
        <span style="font-weight:700; font-size:1.05rem;">Executive Dashboard</span>
        <div style="width:1px; height:16px; background:var(--border);"></div>
        <span style="font-size:0.85rem; color:var(--text-muted);">{{ now|date:"Y.m.d" }} Real-time Data</span>
      </div>

      <div style="display:flex; align-items:center; gap:1.25rem;">
        {% include "partials/deployment/tier_badge.html" %}
        <button onclick="themeToggle.toggle()" id="theme-icon" style="background:none; border:none; cursor:pointer; color:var(--text-main); display:flex;" aria-label="테마 전환">
          <i data-lucide="moon"></i>
        </button>
        <div style="display:flex; align-items:center; gap:12px; border-left:1px solid var(--border); padding-left:1.25rem;">
          <div style="text-align:right;">
            <p style="font-size:0.85rem; font-weight:700; margin:0;">{{ user.username|default:"Admin" }}</p>
            <p style="font-size:0.7rem; color:var(--text-muted); margin:0;">{{ user.email|default:"policy@h2flex.ax" }}</p>
          </div>
          <div style="width:36px; height:36px; background:var(--primary); border-radius:10px; display:flex; align-items:center; justify-content:center; color:white; font-weight:800; font-size:0.85rem;">PM</div>
        </div>
      </div>
    </header>

    <div class="app-scroll-area">
      {% include "partials/deployment/advisory_banner.html" %}

      <!-- KPI Widgets -->
      <div class="kpi-row">
        <div class="glass-card">
          <div class="kpi-title">DSR 달성률</div>
          <div class="kpi-value">{{ summary.dsr.value }}</div>
          <p style="font-size:0.75rem; color:#10b981; margin:0.5rem 0 0; font-weight:600;">목표 안정 범위 내</p>
        </div>
        <div class="glass-card">
          <div class="kpi-title">누적 절감액</div>
          <div class="kpi-value">{{ summary.savings.value }}</div>
          <p style="font-size:0.75rem; color:var(--primary); margin:0.5rem 0 0; font-weight:600;">시나리오 A 대비 (2026~2030)</p>
        </div>
        <div class="glass-card">
          <div class="kpi-title">충전소 운영 수</div>
          <div class="kpi-value">{{ summary.stations.value }}</div>
          <p style="font-size:0.75rem; color:var(--text-muted); margin:0.5rem 0 0; font-weight:600;">{{ summary.stations.subtitle }}</p>
        </div>
        <div class="glass-card">
          <div class="kpi-title">예측 정확도</div>
          <div class="kpi-value">{{ summary.forecast_accuracy.value }}</div>
          <p style="font-size:0.75rem; color:var(--text-muted); margin:0.5rem 0 0; font-weight:600;">{{ summary.forecast_accuracy.subtitle }}</p>
        </div>
      </div>

      <!-- Charts Row -->
      <div class="dual-grid">
        <div class="glass-card">
          <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:1.25rem;">
            <h3 style="margin:0; font-size:1rem;">절감 추적 (시나리오 A vs AX 최적화)</h3>
            <span class="tag">2026~2030 누적</span>
          </div>
          <div style="height:280px;"><canvas id="savingsChart"></canvas></div>
        </div>
        <div class="glass-card">
          <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:1.25rem;">
            <h3 style="margin:0; font-size:1rem;">DSR 추이 · 안정 띠 32~36%</h3>
            <span class="tag">목표 34%±2%</span>
          </div>
          <div style="height:280px;"><canvas id="dsrChart"></canvas></div>
        </div>
      </div>

      <!-- Scenario Simulator -->
      <div class="glass-card" x-data="scenarioSim()" style="margin-top:1.5rem;">
        <div style="display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:1.25rem; gap:1rem; flex-wrap:wrap;">
          <div>
            <h3 style="margin:0 0 4px; font-size:1.05rem;">시나리오 시뮬레이터</h3>
            <p style="margin:0; font-size:0.8rem; color:var(--text-muted);">FCEV 보유대수와 기존 충전소 구성을 입력하면 절감액을 산출합니다.</p>
          </div>
          <span class="tag" style="background:rgba(0,212,170,0.12); color:#047857;">AX 최적화 엔진</span>
        </div>

        <div class="sim-grid">
          <label class="sim-field">
            <span>FCEV 보유대수</span>
            <input type="number" x-model.number="fcev" min="10000" step="1000">
          </label>
          <label class="sim-field">
            <span>기존 sHRS</span>
            <input type="number" x-model.number="sHRS" min="0" step="1">
          </label>
          <label class="sim-field">
            <span>기존 msHRS</span>
            <input type="number" x-model.number="msHRS" min="0" step="1">
          </label>
          <label class="sim-field">
            <span>대상 연도</span>
            <input type="number" x-model.number="year" min="2026" max="2032">
          </label>
        </div>

        <div class="sim-result-grid" style="margin-top:1.25rem;">
          <div class="sim-result sim-result--baseline">
            <span class="sim-result__label">시나리오 A (논문)</span>
            <span class="sim-result__value" x-text="format(scenarioA().capex) + '억'"></span>
            <span class="sim-result__sub" x-text="'신설 ' + scenarioA().new + ' / 전환 ' + scenarioA().convert"></span>
          </div>
          <div class="sim-result sim-result--ax">
            <span class="sim-result__label">AX 최적화</span>
            <span class="sim-result__value" x-text="format(scenarioAX().capex) + '억'"></span>
            <span class="sim-result__sub" x-text="'신설 ' + scenarioAX().new + ' / 전환 ' + scenarioAX().convert"></span>
          </div>
          <div class="sim-result sim-result--saving">
            <span class="sim-result__label">예상 절감액</span>
            <span class="sim-result__value" style="color:#047857;" x-text="format(saving()) + '억'"></span>
            <span class="sim-result__sub" x-text="savingPct() + '% 절감'"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  .dual-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
  @media (min-width: 1100px) { .dual-grid { grid-template-columns: 2fr 1fr; } }
  .sim-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
  }
  .sim-field { display: flex; flex-direction: column; gap: 6px; }
  .sim-field span { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); letter-spacing: 0.04em; text-transform: uppercase; }
  .sim-field input {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-card);
    color: var(--text-main);
    font-size: 0.95rem;
    font-weight: 600;
  }
  .sim-field input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59,130,246,0.15); }
  .sim-result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
  }
  .sim-result {
    padding: 1rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-app);
  }
  .sim-result__label { display: block; font-size: 0.7rem; font-weight: 700; color: var(--text-muted); letter-spacing: 0.04em; text-transform: uppercase; }
  .sim-result__value { display: block; margin-top: 4px; font-size: 1.7rem; font-weight: 800; color: var(--text-main); }
  .sim-result__sub { display: block; font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }
  .sim-result--ax { border-color: rgba(0, 212, 170, 0.45); background: rgba(0, 212, 170, 0.06); }
  .sim-result--saving { border-color: rgba(16, 185, 129, 0.45); background: rgba(16, 185, 129, 0.08); }
</style>
{% endblock %}

{% block scripts_extra %}
<script>
  const months = ['2026', '2027', '2028', '2029', '2030'];

  new Chart(document.getElementById('savingsChart'), {
    type: 'line',
    data: {
      labels: months,
      datasets: [
        {
          label: '시나리오 A (논문)',
          data: [310, 920, 1620, 2480, 3500],
          borderColor: '#94a3b8',
          backgroundColor: 'rgba(148,163,184,0.08)',
          borderWidth: 2,
          borderDash: [6, 4],
          tension: 0.35,
          pointRadius: 0,
          fill: true
        },
        {
          label: 'H2-Flex AX 최적화',
          data: [220, 720, 1300, 2010, 2605],
          borderColor: '#3b82f6',
          backgroundColor: 'rgba(59,130,246,0.1)',
          borderWidth: 3,
          tension: 0.35,
          pointRadius: 0,
          fill: true
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: { legend: { position: 'top', align: 'end', labels: { usePointStyle: true, boxWidth: 6, font: { weight: '600' } } } },
      scales: {
        y: { beginAtZero: true, grid: { color: 'rgba(148,163,184,0.15)' }, ticks: { callback: v => v + '억' } },
        x: { grid: { display: false } }
      }
    }
  });

  // DSR safe band chart — render an emerald band area for [32,36] then DSR line
  const dsrLabels = ['2026 Q1', 'Q2', 'Q3', 'Q4', '2027 Q1', 'Q2', 'Q3', 'Q4'];
  new Chart(document.getElementById('dsrChart'), {
    type: 'line',
    data: {
      labels: dsrLabels,
      datasets: [
        {
          label: '안정 상한 36%',
          data: dsrLabels.map(() => 36),
          borderColor: 'rgba(16,185,129,0.4)',
          borderWidth: 1,
          pointRadius: 0,
          fill: '+1',
          backgroundColor: 'rgba(16,185,129,0.08)'
        },
        {
          label: '안정 하한 32%',
          data: dsrLabels.map(() => 32),
          borderColor: 'rgba(16,185,129,0.4)',
          borderWidth: 1,
          pointRadius: 0,
          fill: false
        },
        {
          label: 'DSR 실측',
          data: [33.6, 34.1, 34.0, 34.3, 33.9, 34.2, 34.5, 34.1],
          borderColor: '#0a2540',
          backgroundColor: '#0a2540',
          borderWidth: 3,
          tension: 0.35,
          pointRadius: 0
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: { legend: { display: false } },
      scales: {
        y: {
          min: 28, max: 40,
          grid: { color: 'rgba(148,163,184,0.15)' },
          ticks: { callback: v => v + '%' }
        },
        x: { grid: { display: false } }
      }
    }
  });

  function scenarioSim() {
    return {
      fcev: 50000,
      sHRS: 80,
      msHRS: 40,
      year: 2030,
      // 시나리오 A: 매년 50전환 + 30신설
      scenarioA() {
        const yrs = Math.max(0, this.year - 2025);
        const newCount = 30 * yrs;
        const convertCount = 50 * yrs;
        const capex = newCount * 40 + convertCount * 7.5;
        return { new: newCount, convert: convertCount, capex: Math.round(capex) };
      },
      // AX: msHRS 비중 확대 + 전환 우선 → 평균 단가 25% 절감
      scenarioAX() {
        const a = this.scenarioA();
        const reduction = 0.25;
        const newCount = Math.round(a.new * 0.7);
        const convertCount = a.convert + Math.round(a.new * 0.3);
        const capex = Math.round(a.capex * (1 - reduction));
        return { new: newCount, convert: convertCount, capex };
      },
      saving() { return this.scenarioA().capex - this.scenarioAX().capex; },
      savingPct() {
        const a = this.scenarioA().capex;
        return a ? Math.round((this.saving() / a) * 100) : 0;
      },
      format(n) { return new Intl.NumberFormat('ko-KR').format(n); }
    };
  }
</script>
{% endblock %}