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

{% block title %}실시간 관제 센터 | H2-Flex AX{% endblock %}

{% block head_extra %}
<link rel="stylesheet" href="{% static 'css/dashboard.css' %}">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<script defer src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.1/dist/cdn.min.js"></script>
{{ summary|json_script:"ops-summary" }}
{% endblock %}

{% block content %}
<div class="app-shell" x-data="opsConsole()">
  <!-- 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">
        <i data-lucide="bar-chart-3"></i> <span>정책 분석 리포트</span>
      </a>
      <a href="{% url 'dashboard-ops' %}" class="nav-item active">
        <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(16,185,129,0.08); border-radius:12px; border:1px solid rgba(16,185,129,0.18);">
      <p style="font-size:0.65rem; color:#10b981; font-weight:700; margin:0 0 8px; text-transform:uppercase; letter-spacing:0.08em;">Operational Status</p>
      <p style="font-size:0.95rem; font-weight:800; color:white; margin:0;" x-text="summary.fault_banner === 'ACTIVE' ? '⚠ 고장 발생' : 'STABLE'"></p>
      <p style="font-size:0.7rem; color:#94a3b8; margin:8px 0 0;">
        가용 <span x-text="summary.mobile_units_available"></span> / 총 <span x-text="summary.mobile_units_total"></span> 유닛
      </p>
    </div>
  </aside>

  <!-- Main Body -->
  <div class="app-body">
    <header class="app-topbar">
      <div style="display:flex; align-items:center; gap:1rem; flex:1; min-width:0;">
        <span class="status-tag" :class="summary.stations_fault > 0 ? 'status-tag--alert' : 'status-tag--ok'"
              x-text="summary.stations_fault > 0 ? 'ALERT' : 'STABLE'"></span>
        <div class="ticker">
          <template x-if="summary.stations_fault > 0">
            <span><strong x-text="summary.stations_fault"></strong>개 충전소 고장 감지 — 대체 배차 검토 필요</span>
          </template>
          <template x-if="summary.stations_fault === 0">
            <span>모든 충전소 정상 운영 · 가용 모바일 유닛 <strong x-text="summary.mobile_units_available"></strong>대</span>
          </template>
        </div>
      </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:"Operator_01" }}</p>
            <p style="font-size:0.7rem; color:var(--text-muted); margin:0;">{{ user.email|default:"ops@h2flex.ax" }}</p>
          </div>
          <div style="width:36px; height:36px; background:#10b981; border-radius:10px; display:flex; align-items:center; justify-content:center; color:white; font-weight:800;">OP</div>
        </div>
      </div>
    </header>

    <main class="app-scroll-area" style="display:flex; flex-direction:column; gap:1.5rem;">
      <!-- Top Metrics -->
      <div class="kpi-row">
        <div class="glass-card" style="padding:1.25rem;">
          <div class="kpi-title">가용 이동형 유닛</div>
          <div class="kpi-value" style="font-size:1.5rem;">
            <span x-text="summary.mobile_units_available"></span> / <span x-text="summary.mobile_units_total"></span>
          </div>
        </div>
        <div class="glass-card" style="padding:1.25rem;">
          <div class="kpi-title">충전소 운영 수</div>
          <div class="kpi-value" style="font-size:1.5rem;" x-text="summary.stations_total"></div>
        </div>
        <div class="glass-card" style="padding:1.25rem;">
          <div class="kpi-title">대기 배차</div>
          <div class="kpi-value" style="font-size:1.5rem;" x-text="totalQueueCount() + ' Requests'"></div>
        </div>
        <div class="glass-card" style="padding:1.25rem;">
          <div class="kpi-title">고장 감지</div>
          <div class="kpi-value" style="font-size:1.5rem;" :style="summary.stations_fault > 0 ? 'color:#ef4444;' : ''"
               x-text="summary.stations_fault + '건'"></div>
        </div>
      </div>

      <!-- Map + Queue -->
      <div class="ops-grid">
        <div class="glass-card" style="padding:0; overflow:hidden; position:relative; display:flex; flex-direction:column;">
          <div id="map" style="flex:1; min-height:480px;"></div>
          <div style="position:absolute; bottom:1rem; left:1rem; z-index:1000; background:var(--bg-card); padding:0.6rem 1rem; border-radius:10px; border:1px solid var(--border); font-size:0.75rem; font-weight:600; box-shadow:var(--shadow-md);">
            <span style="color:#10b981;">●</span> 정상 ·
            <span style="color:#f59e0b;">●</span> 주의 ·
            <span style="color:#ef4444;">●</span> 고장 ·
            <span style="color:#3b82f6;">▲</span> 모바일 유닛
          </div>
        </div>

        <!-- Live Queue -->
        <div style="display:flex; flex-direction:column; gap:1rem;">
          <h3 style="margin:0; font-size:1rem; font-weight:700; display:flex; align-items:center; gap:8px;">
            <i data-lucide="list-ordered"></i> Live Queue
          </h3>

          <div class="queue-tabs">
            <button :class="tab === 'fault_replace' ? 'queue-tab active' : 'queue-tab'" @click="tab = 'fault_replace'">고장 대체</button>
            <button :class="tab === 'event_temp' ? 'queue-tab active' : 'queue-tab'" @click="tab = 'event_temp'">이벤트</button>
            <button :class="tab === 'regular' ? 'queue-tab active' : 'queue-tab'" @click="tab = 'regular'">정기</button>
          </div>

          <template x-if="(summary.queue_groups[tab] || []).length === 0">
            <div class="glass-card" style="text-align:center; padding:2rem 1rem; color:var(--text-muted); font-size:0.85rem;">
              <i data-lucide="inbox" style="margin-bottom:8px;"></i>
              <p style="margin:0;">큐가 비어있습니다.</p>
            </div>
          </template>

          <template x-for="card in summary.queue_groups[tab] || []" :key="card.id">
            <div class="glass-card queue-card" :class="`queue-card--${tab}`">
              <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;">
                <span class="status-tag" :class="`status-tag--${tab}`" x-text="tab.toUpperCase()"></span>
                <span style="font-size:0.7rem; color:var(--text-muted); font-weight:700;" x-text="formatTime(card.created_at)"></span>
              </div>
              <p style="font-weight:700; font-size:0.92rem; margin:0 0 4px;" x-text="card.station"></p>
              <p style="font-size:0.75rem; color:var(--text-muted); margin:0 0 12px;">
                Unit: <strong x-text="card.unit"></strong> · ETA: <strong x-text="card.eta_minutes"></strong>분 · <span x-text="card.distance_km"></span>km
              </p>
              <button class="queue-action" @click="openSlideover(card)">상세 보기</button>
            </div>
          </template>

          <!-- Trigger fault replace simulation -->
          <button class="queue-action queue-action--ghost" @click="simulateFault()" style="margin-top:0.5rem;">
            <i data-lucide="zap"></i> 고장 시뮬레이션 트리거
          </button>
        </div>
      </div>
    </main>
  </div>

  <!-- Slideover -->
  <div x-show="slideover" x-transition.opacity class="slideover-backdrop" @click="slideover = null" x-cloak></div>
  <aside x-show="slideover" x-transition class="slideover" x-cloak>
    <template x-if="slideover">
      <div>
        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:1.25rem;">
          <h3 style="margin:0; font-size:1.1rem;">배차 상세</h3>
          <button @click="slideover = null" style="background:none; border:none; cursor:pointer; color:var(--text-muted);" aria-label="닫기">
            <i data-lucide="x"></i>
          </button>
        </div>
        <div style="display:flex; flex-direction:column; gap:0.75rem; font-size:0.9rem;">
          <div class="slideover-row"><span>대상 충전소</span><strong x-text="slideover.station"></strong></div>
          <div class="slideover-row"><span>배정 유닛</span><strong x-text="slideover.unit"></strong></div>
          <div class="slideover-row"><span>예상 ETA</span><strong x-text="slideover.eta_minutes + '분'"></strong></div>
          <div class="slideover-row"><span>예상 거리</span><strong x-text="slideover.distance_km + ' km'"></strong></div>
          <div class="slideover-row"><span>생성 시각</span><strong x-text="formatTime(slideover.created_at)"></strong></div>
        </div>
        <div style="margin-top:1.5rem; display:flex; gap:8px;">
          <button class="queue-action" style="flex:1;" @click="approve()">자동 배차 승인</button>
          <button class="queue-action queue-action--ghost" style="flex:1;" @click="slideover = null">닫기</button>
        </div>
      </div>
    </template>
  </aside>
</div>

<style>
  .ops-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    flex: 1;
    min-height: 500px;
  }
  @media (min-width: 1100px) { .ops-grid { grid-template-columns: 1fr 340px; } }

  .ticker {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    font-size: 0.85rem;
    color: var(--text-muted);
  }
  .ticker strong { color: var(--text-main); }

  .status-tag {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
  }
  .status-tag--ok { background: rgba(16,185,129,0.12); color: #047857; }
  .status-tag--alert { background: rgba(239,68,68,0.12); color: #b91c1c; }
  .status-tag--fault_replace { background: #fee2e2; color: #991b1b; }
  .status-tag--event_temp { background: #fef3c7; color: #92400e; }
  .status-tag--regular { background: #dbeafe; color: #1d4ed8; }

  .queue-tabs { display: flex; gap: 6px; }
  .queue-tab {
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
  }
  .queue-tab:hover { color: var(--text-main); }
  .queue-tab.active { background: var(--primary); color: white; border-color: var(--primary); }

  .queue-card { padding: 1rem; border-left: 4px solid var(--border); }
  .queue-card--fault_replace { border-left-color: #ef4444; }
  .queue-card--event_temp { border-left-color: #f59e0b; }
  .queue-card--regular { border-left-color: #3b82f6; }

  .queue-action {
    width: 100%;
    padding: 8px 12px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: filter 0.15s;
  }
  .queue-action:hover { filter: brightness(1.05); }
  .queue-action--ghost {
    background: transparent;
    color: var(--text-main);
    border: 1px dashed var(--border);
  }

  .slideover-backdrop {
    position: fixed; inset: 0; background: rgba(15,23,42,0.45); z-index: 100;
  }
  .slideover {
    position: fixed; right: 0; top: 0; height: 100vh;
    width: min(420px, 92vw);
    background: var(--bg-card);
    border-left: 1px solid var(--border);
    box-shadow: -8px 0 32px rgba(15,23,42,0.18);
    z-index: 101;
    padding: 2rem;
    overflow-y: auto;
  }
  .slideover-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--border); }
  [x-cloak] { display: none !important; }
</style>
{% endblock %}

{% block scripts_extra %}
<script>
  function opsConsole() {
    return {
      summary: JSON.parse(document.getElementById('ops-summary').textContent),
      tab: 'fault_replace',
      slideover: null,
      mapInstance: null,

      init() {
        this.$nextTick(() => this.renderMap());
      },
      totalQueueCount() {
        const g = this.summary.queue_groups || {};
        return (g.regular || []).length + (g.fault_replace || []).length + (g.event_temp || []).length;
      },
      formatTime(iso) {
        if (!iso) return '';
        try {
          const d = new Date(iso);
          return d.toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit' });
        } catch (_) { return iso; }
      },
      openSlideover(card) { this.slideover = card; this.$nextTick(() => window.lucide && window.lucide.createIcons()); },
      approve() { alert('배차 승인이 처리되었습니다 (MVP placeholder).'); this.slideover = null; },
      async simulateFault() {
        const stations = this.summary.stations || [];
        if (!stations.length) { alert('충전소가 없습니다.'); return; }
        const target = stations.find(s => s.status === 'normal') || stations[0];
        try {
          const res = await fetch('/api/v1/mobile/dispatch/fault/', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            credentials: 'same-origin',
            body: JSON.stringify({ station_id: target.id, fault_type: 'simulated' }),
          });
          const data = await res.json();
          alert('고장 대체 배차 시뮬레이션 결과:\n' + JSON.stringify(data, null, 2));
        } catch (err) {
          alert('시뮬레이션 호출 실패: ' + err.message);
        }
      },
      renderMap() {
        if (!window.L) { setTimeout(() => this.renderMap(), 200); return; }
        const center = this.summary.stations.length
          ? [this.summary.stations[0].lat, this.summary.stations[0].lng]
          : [37.5665, 126.9780];
        const map = L.map('map', { zoomControl: false }).setView(center, 11);
        L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png').addTo(map);
        L.control.zoom({ position: 'topright' }).addTo(map);
        const colors = { normal: '#10b981', warning: '#f59e0b', fault: '#ef4444' };
        this.summary.stations.forEach(s => {
          L.circleMarker([s.lat, s.lng], {
            radius: 8,
            color: colors[s.status] || '#3b82f6',
            fillColor: colors[s.status] || '#3b82f6',
            fillOpacity: 0.85,
            weight: 2,
          })
          .addTo(map)
          .bindPopup(`<strong>${s.name}</strong><br>${s.type} · ${s.capacity}<br><em>${s.status}</em>`);
        });
        this.summary.mobile_units.forEach(u => {
          if (u.lat == null || u.lng == null) return;
          const marker = L.marker([u.lat, u.lng]);
          marker.addTo(map).bindPopup(`<strong>${u.name}</strong><br>H₂ ${u.hydrogen_remaining_pct}% · ${u.is_available ? '가용' : '운행중'}`);
        });
        this.mapInstance = map;
      },
    };
  }
</script>
{% endblock %}