{% extends "base.html" %}
{% block content %}

<!-- Hero: 오늘 요약 -->
<section class="rounded-2xl hero text-white p-6 md:p-8 shadow-sm mb-6">
  <div class="flex items-center justify-between gap-4">
    <div>
      <h1 class="text-2xl md:text-3xl font-bold tracking-tight">데이터 수집 현황</h1>
      <p class="mt-2 text-white/90 text-sm md:text-base">정부·전력그룹사 실시간 데이터 수집 현황</p>
    </div>
    <div class="hidden md:flex items-center gap-3">
      <div class="px-4 py-2 rounded-xl bg-white/15 backdrop-blur text-center">
        <div class="text-xs opacity-90">정부</div>
        <div class="text-lg font-semibold">{{ gov_today|length if gov_today else 0 }}</div>
      </div>
      <div class="px-4 py-2 rounded-xl bg-white/15 backdrop-blur text-center">
        <div class="text-xs opacity-90">전력그룹사</div>
        <div class="text-lg font-semibold">{{ group_today|length if group_today else 0 }}</div>
      </div>
    </div>
  </div>
</section>

<!-- 수집 추이 미니차트 -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
  <!-- 정부 7일 -->
  <div class="bg-white rounded-2xl shadow-sm ring-1 ring-slate-900/5 overflow-hidden">
    <div class="px-5 py-4 border-b flex items-center justify-between">
      <div class="flex items-center gap-2">
        <span class="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-sky-50 text-sky-700 ring-1 ring-sky-100">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor"><path d="M4 6h16v2H4zM4 11h16v2H4zM4 16h10v2H4z"/></svg>
        </span>
        <h2 class="text-base md:text-lg font-semibold">정부 수집 추이 <span class="text-slate-400 text-sm">(최근 {{ window }}일)</span></h2>
      </div>
      <div class="hidden md:flex items-center gap-1 text-xs">
        {% set w = window or 7 %}
        <a href="/?window=7" class="px-2 py-1 rounded {{ 'bg-slate-800 text-white' if w==7 else 'bg-slate-100 text-slate-700' }}">7일</a>
        <a href="/?window=30" class="px-2 py-1 rounded {{ 'bg-slate-800 text-white' if w==30 else 'bg-slate-100 text-slate-700' }}">30일</a>
      </div>
    </div>
    <div class="p-4">
      <canvas id="chartGov7d" height="80"></canvas>
    </div>
  </div>

  <!-- 그룹사 7일 -->
  <div class="bg-white rounded-2xl shadow-sm ring-1 ring-slate-900/5 overflow-hidden">
    <div class="px-5 py-4 border-b flex items-center justify-between">
      <div class="flex items-center gap-2">
        <span class="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-amber-50 text-amber-700 ring-1 ring-amber-100">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L4 7v10l8 5 8-5V7l-8-5zM6 9l6 3 6-3M6 13l6 3 6-3"/></svg>
        </span>
        <h2 class="text-base md:text-lg font-semibold">전력그룹사 수집 추이 <span class="text-slate-400 text-sm">(최근 {{ window }}일)</span></h2>
      </div>
      <div class="hidden md:flex items-center gap-1 text-xs">
        {% set w = window or 7 %}
        <a href="/?window=7" class="px-2 py-1 rounded {{ 'bg-slate-800 text-white' if w==7 else 'bg-slate-100 text-slate-700' }}">7일</a>
        <a href="/?window=30" class="px-2 py-1 rounded {{ 'bg-slate-800 text-white' if w==30 else 'bg-slate-100 text-slate-700' }}">30일</a>
      </div>
    </div>
    <div class="p-4">
      <canvas id="chartGroup7d" height="80"></canvas>
    </div>
  </div>
</div>

<!-- 두 개 위젯 -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
  <!-- 대정부 위젯 -->
  <div class="bg-white rounded-2xl shadow-sm ring-1 ring-slate-900/5 overflow-hidden">
    <div class="px-5 py-4 border-b flex items-center justify-between">
      <div class="flex items-center gap-2">
        <span class="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600 ring-1 ring-indigo-100">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor"><path d="M4 6h16v2H4zM4 11h16v2H4zM4 16h10v2H4z"/></svg>
        </span>
        <h2 class="text-base md:text-lg font-semibold">정부 인사 동정 <span class="text-slate-400 text-sm">(금일)</span></h2>
      </div>
      <a href="/gov/timeline" class="text-sm font-medium text-indigo-600 hover:text-indigo-700">전체 보기</a>
    </div>

    {% if gov_today and gov_today|length > 0 %}
      <ul class="divide-y max-h-[24rem] overflow-auto">
        {% for it in gov_today %}
          <li class="py-3 px-5 flex items-start gap-3 hover:bg-slate-50/60">
            <span class="mt-0.5 badge-src {% if it.src=='MOEF' %}badge-src-moef{% elif it.src=='ME' %}badge-src-me{% else %}badge-src-motie{% endif %}">{{ it.src }}</span>
            <div class="min-w-0">
              <div class="text-sm leading-5">
                {% if it.tag %}<span class="text-slate-500 mr-1">[{{ it.tag }}]</span>{% endif %}
                {% if it.url %}
                  <a href="{{ it.url }}" target="_blank" rel="noopener" class="text-slate-800 hover:underline">{{ it.title }}</a>
                {% else %}
                  <span class="text-slate-800">{{ it.title }}</span>
                {% endif %}
              </div>
              <div class="text-xs text-slate-500 mt-0.5">{{ it.date }}</div>
            </div>
          </li>
        {% endfor %}
      </ul>
    {% else %}
      <div class="px-5 py-8 text-center text-slate-500 text-sm">금일 인사 동정이 없습니다.</div>
    {% endif %}
  </div>

  <!-- 전력그룹사 위젯 -->
  <div class="bg-white rounded-2xl shadow-sm ring-1 ring-slate-900/5 overflow-hidden">
    <div class="px-5 py-4 border-b flex items-center justify-between">
      <div class="flex items-center gap-2">
        <span class="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-amber-50 text-amber-600 ring-1 ring-amber-100">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L4 7v10l8 5 8-5V7l-8-5zM6 9l6 3 6-3M6 13l6 3 6-3"/></svg>
        </span>
        <h2 class="text-base md:text-lg font-semibold">전력그룹사 임원공시 <span class="text-slate-400 text-sm">(금일)</span></h2>
      </div>
      <a href="/group/timeline" class="text-sm font-medium text-indigo-600 hover:text-indigo-700">전체 보기</a>
    </div>

    {% if group_today and group_today|length > 0 %}
      <ul class="divide-y max-h-[24rem] overflow-auto">
        {% for it in group_today %}
          <li class="py-3 px-5 flex items-start gap-3 hover:bg-slate-50/60">
            <span class="mt-0.5 text-[11px] font-semibold px-2 py-0.5 rounded-full bg-amber-50 text-amber-700 ring-1 ring-amber-100">ALIO</span>
            <div class="min-w-0">
              <div class="text-sm leading-5">
                {% if it.url %}
                  <a href="{{ it.url }}" target="_blank" rel="noopener" class="text-slate-800 hover:underline">{{ it.department or '-' }}</a>
                {% else %}
                  <span class="text-slate-800">{{ it.department or '-' }}</span>
                {% endif %}
              </div>
              <div class="text-xs text-slate-500 mt-0.5">{{ it.date }}</div>
            </div>
          </li>
        {% endfor %}
      </ul>
    {% else %}
      <div class="px-5 py-8 text-center text-slate-500 text-sm">금일 공시가 없습니다.</div>
    {% endif %}
  </div>
</div>

<!-- 수집/연결 상태 (업그레이드) -->
<div class="bg-white rounded-2xl shadow-sm ring-1 ring-slate-900/5 overflow-hidden mt-6">
  <div class="px-5 py-4 border-b">
    <div class="flex items-center gap-2">
      <span class="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-slate-50 text-slate-700 ring-1 ring-slate-100">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor"><path d="M3 5h18v2H3zM7 10h10v2H7zM3 15h18v2H3z"/></svg>
      </span>
      <h2 class="text-base md:text-lg font-semibold">수집/연결 상태</h2>
    </div>
    <!-- <p class="mt-1 text-xs text-slate-500">핑/24시간 수집 건수와 각 파이프라인의 마지막 갱신 시각</p> -->
  </div>

  <!-- 6열 그리드: 윗줄(각 2칸 x3) / 아랫줄(각 3칸 x2)로 배치하여 공백 제거 -->
  <div class="p-4 grid grid-cols-1 md:grid-cols-6 gap-4">
    <!-- 기재부 -->
    <div class="rounded-xl border border-slate-200/70 p-4 md:col-span-2">
      <div class="flex items-center justify-between gap-3">
        <div>
          <div class="text-sm font-semibold">기재부</div>
          <div class="mt-1 text-xs text-slate-600">24h 수집 {{ status['MOEF']['count24'] }}건</div>
        </div>
        {% set p = status['MOEF']['ping'] %}
        <span
          class="px-2 py-1 rounded-full text-[11px] font-semibold
            {% if p['label']=='OK' %} bg-emerald-50 text-emerald-700 ring-1 ring-emerald-100
            {% elif p['label']=='지연' %} bg-amber-50 text-amber-700 ring-1 ring-amber-100
            {% else %} bg-rose-50 text-rose-700 ring-1 ring-rose-100 {% endif %}"
          title="응답 상태: {{ p['label'] }}{% if p['ms'] is not none %} · {{ p['ms'] }}ms{% endif %}"
        >
          {{ p['label'] }}{% if p['ms'] is not none %} · {{ p['ms'] }}ms{% endif %}
        </span>
      </div>
      <ul class="mt-3 text-xs text-slate-600 leading-6">
        <li>· 인사동정 : {{ last['MOEF']['insadongjeong'] or '-' }} 갱신 완료</li>
        <li>· 직원정보 : {{ last['MOEF']['jikwon'] or '-' }} 갱신 완료</li>
      </ul>
    </div>

    <!-- 산업부 -->
    <div class="rounded-xl border border-slate-200/70 p-4 md:col-span-2">
      <div class="flex items-center justify-between gap-3">
        <div>
          <div class="text-sm font-semibold">산업부</div>
          <div class="mt-1 text-xs text-slate-600">24h 수집 {{ status['MOTIE']['count24'] }}건</div>
        </div>
        {% set p = status['MOTIE']['ping'] %}
        <span
          class="px-2 py-1 rounded-full text-[11px] font-semibold
            {% if p['label']=='OK' %} bg-emerald-50 text-emerald-700 ring-1 ring-emerald-100
            {% elif p['label']=='지연' %} bg-amber-50 text-amber-700 ring-1 ring-amber-100
            {% else %} bg-rose-50 text-rose-700 ring-1 ring-rose-100 {% endif %}"
          title="응답 상태: {{ p['label'] }}{% if p['ms'] is not none %} · {{ p['ms'] }}ms{% endif %}"
        >
          {{ p['label'] }}{% if p['ms'] is not none %} · {{ p['ms'] }}ms{% endif %}
        </span>
      </div>
      <ul class="mt-3 text-xs text-slate-600 leading-6">
        <li>· 인사동정 : {{ last['MOTIE']['insadongjeong'] or '-' }} 갱신 완료</li>
        <li>· 직원정보 : {{ last['MOTIE']['jikwon'] or '-' }} 갱신 완료</li>
      </ul>
    </div>

    <!-- 환경부 -->
    <div class="rounded-xl border border-slate-200/70 p-4 md:col-span-2">
      <div class="flex items-center justify-between gap-3">
        <div>
          <div class="text-sm font-semibold">환경부</div>
          <div class="mt-1 text-xs text-slate-600">24h 수집 {{ status['ME']['count24'] }}건</div>
        </div>
        {% set p = status['ME']['ping'] %}
        <span
          class="px-2 py-1 rounded-full text-[11px] font-semibold
            {% if p['label']=='OK' %} bg-emerald-50 text-emerald-700 ring-1 ring-emerald-100
            {% elif p['label']=='지연' %} bg-amber-50 text-amber-700 ring-1 ring-amber-100
            {% else %} bg-rose-50 text-rose-700 ring-1 ring-rose-100 {% endif %}"
          title="응답 상태: {{ p['label'] }}{% if p['ms'] is not none %} · {{ p['ms'] }}ms{% endif %}"
        >
          {{ p['label'] }}{% if p['ms'] is not none %} · {{ p['ms'] }}ms{% endif %}
        </span>
      </div>
      <ul class="mt-3 text-xs text-slate-600 leading-6">
        <li>· 인사동정 : {{ last['ME']['insadongjeong'] or '-' }} 갱신 완료</li>
        <li>· 직원정보 : {{ last['ME']['jikwon'] or '-' }} 갱신 완료</li>
      </ul>
    </div>

    <!-- 국회 -->
    <div class="rounded-xl border border-slate-200/70 p-4 md:col-span-3">
      <div class="flex items-center justify-between gap-3">
        <div>
          <div class="text-sm font-semibold">국회</div>
          <div class="mt-1 text-xs text-slate-600">24h 수집 {{ status['CONGRESS']['count24'] }}건</div>
        </div>
        {% set p = status['CONGRESS']['ping'] %}
        <span
          class="px-2 py-1 rounded-full text-[11px] font-semibold
            {% if p['label']=='OK' %} bg-emerald-50 text-emerald-700 ring-1 ring-emerald-100
            {% elif p['label']=='지연' %} bg-amber-50 text-amber-700 ring-1 ring-amber-100
            {% else %} bg-rose-50 text-rose-700 ring-1 ring-rose-100 {% endif %}"
          title="응답 상태: {{ p['label'] }}{% if p['ms'] is not none %} · {{ p['ms'] }}ms{% endif %}"
        >
          {{ p['label'] }}{% if p['ms'] is not none %} · {{ p['ms'] }}ms{% endif %}
        </span>
      </div>
      <ul class="mt-3 text-xs text-slate-600 leading-6">
        <li>· 의원정보 : {{ last['CONGRESS']['uieon'] or '-' }} 갱신 완료</li>
      </ul>
    </div>

    <!-- ALIO -->
    <div class="rounded-xl border border-slate-200/70 p-4 md:col-span-3">
      <div class="flex items-center justify-between gap-3">
        <div>
          <div class="text-sm font-semibold">ALIO</div>
          <div class="mt-1 text-xs text-slate-600">24h 수집 {{ status['ALIO']['count24'] }}건</div>
        </div>
        {% set p = status['ALIO']['ping'] %}
        <span
          class="px-2 py-1 rounded-full text-[11px] font-semibold
            {% if p['label']=='OK' %} bg-emerald-50 text-emerald-700 ring-1 ring-emerald-100
            {% elif p['label']=='지연' %} bg-amber-50 text-amber-700 ring-1 ring-amber-100
            {% else %} bg-rose-50 text-rose-700 ring-1 ring-rose-100 {% endif %}"
          title="응답 상태: {{ p['label'] }}{% if p['ms'] is not none %} · {{ p['ms'] }}ms{% endif %}"
        >
          {{ p['label'] }}{% if p['ms'] is not none %} · {{ p['ms'] }}ms{% endif %}
        </span>
      </div>
      <ul class="mt-3 text-xs text-slate-600 leading-6">
        <li>· 공시정보 : {{ last['ALIO']['gongsi'] or '-' }} 갱신 완료</li>
      </ul>
    </div>
  </div>
</div>

<!-- 메모 -->
<p class="mt-4 text-xs text-slate-500">
  ※ ALIO, 산업부, 기재부, 환경부, 국회 홈페이지에서 자동 수집됩니다.
</p>

<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>

<!-- 👇 Jinja를 JS로 바로 넣지 말고, JSON만 주입 -->
<script id="chart-gov-json" type="application/json">{{ chart_gov_json | safe }}</script>
<script id="chart-group-json" type="application/json">{{ chart_group_json | safe }}</script>

<script>
(function(){
  // 안전 파서
  function readJSON(id){
    var el = document.getElementById(id);
    if(!el) return {};
    try { return JSON.parse(el.textContent || "{}"); }
    catch(e){ console.warn("JSON parse failed for #"+id, e); return {}; }
  }

  var gov = readJSON("chart-gov-json");
  var grp = readJSON("chart-group-json");

  function miniBar(elId, labels, data) {
    var el = document.getElementById(elId);
    if (!el) return;
    new Chart(el, {
      type: 'bar',
      data: {
        labels: labels,
        datasets: [{ label: '건수', data: data, borderWidth: 1 }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false }, tooltip: { mode: 'index', intersect: false } },
        scales: {
          x: { grid: { display: false } },
          y: { beginAtZero: true, ticks: { precision: 0 }, grid: { display: false } }
        }
      }
    });
  }

  if (Array.isArray(gov.labels) && Array.isArray(gov.counts)) {
    miniBar('chartGov7d',  gov.labels, gov.counts);
  }
  if (Array.isArray(grp.labels) && Array.isArray(grp.counts)) {
    miniBar('chartGroup7d', grp.labels, grp.counts);
  }
})();
</script>

{% endblock %}