{% extends "base.html" %}
{% block title %}Dashboard{% endblock %}

{% block content %}
<div class="phase-banner">
  🌿 v{{ app_version }} · 2026-10-18 · <a href="{{ url_for('healthz') }}">/healthz</a>
</div>

<h1>進行中的診次</h1>

<div class="hero-stats">
  <div class="stat-card">
    <div class="label">Active sessions</div>
    <div class="value">2</div>
    <div class="sub">1 paused · 1 done</div>
  </div>
  <div class="stat-card">
    <div class="label">Pending follow-up</div>
    <div class="value">1</div>
    <div class="sub">桂枝湯 +6h 觀察節點</div>
  </div>
  <div class="stat-card">
    <div class="label">Library size</div>
    <div class="value">112</div>
    <div class="sub">條文 · 4 版本</div>
  </div>
</div>

<div class="card">
  <img src="{{ url_for('static', filename='img/P4_onboarding_panels.png') }}" alt="診斷三步驟" style="width: 100%; border-radius: var(--radius-lg); margin-bottom: var(--space-3);">
  <div class="card-title">Primary CTA</div>
  <a href="{{ url_for('quick') }}" class="btn btn-primary btn-lg">⚡ 快診 (2 分鐘)</a>
  &nbsp;
  <a href="{{ url_for('intake_root') }}" class="btn btn-secondary btn-lg">📋 詳診 (完整 8 步)</a>
  &nbsp;
  <a href="#sessions" class="btn btn-ghost">查看進行中診次 →</a>
</div>

<h2 id="sessions">目前診次</h2>
{% if current_session %}
<div class="session-list">
  <div class="card session-card" style="border-left: 4px solid var(--brand-500);">
    <div class="head">
      <div>
        <div class="date">⏱ {{ current_session.date }}</div>
        <div class="syndrome">{{ current_session.syndrome }}</div>
      </div>
      <span class="pill pill-brand">{{ current_session.match }}%</span>
    </div>
    <div class="prescription">選定方證：{{ current_session.prescription }}</div>
    <a href="{{ url_for('observe') }}" class="btn btn-primary">繼續 →</a>
  </div>
</div>
{% else %}
<div class="card muted" style="padding: var(--space-4); font-size: 13px;">
  尚無進行中的診次 — 用上方「⚡ 快診」或「📋 詳診」開始新診。
</div>
{% endif %}

<h2 id="demo-sessions">範例診次 <span class="muted" style="font-size: 12px; font-weight: normal;">(展示用假資料, 非真實紀錄)</span></h2>
<div class="session-list">
  {% for s in active_sessions %}
  <div class="card session-card" style="opacity: 0.65;">
    <div class="head">
      <div>
        <div class="date">⏱ {{ s.date }}</div>
        <div class="syndrome">{{ s.syndrome }}</div>
      </div>
      <span class="pill">{{ s.match }}%</span>
    </div>
    <div class="prescription">候選方證：{{ s.prescription }}</div>
    <div class="status muted">狀態：{{ s.status }}</div>
  </div>
  {% endfor %}
</div>

<h2>Library activity</h2>
<div class="card">
  <ul style="line-height: 2; margin: 0; padding-left: 20px; color: var(--text-secondary); font-size: 13px;">
    <li>新增 3 條鑑別問題規則（#P1-007）— 2026-10-15</li>
    <li>Jev 後端權重校準（來蘇集 v4）— 2026-10-14</li>
    <li>v2 視覺方向重設（clinical × SaaS dashboard）— 2026-10-16</li>
  </ul>
</div>

<h2>UI 素材（MOSS-Image-SFT 渲染 · v2）</h2>
<p class="muted" style="margin-bottom: var(--space-3);">
  P0 素材與四診教學插圖 · 完整報告見 <code>v2_moss_p0/REPORT.md</code>
</p>
<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3);">
  <a href="{{ url_for('img', filename='P1_app_icon.png') }}" target="_blank">
    <div class="card" style="padding: var(--space-2);"><img src="{{ url_for('img', filename='P1_app_icon.png') }}" alt="P1" style="width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm);"><div class="muted" style="font-size: 11px; margin-top: 4px;">P1 App icon</div></div>
  </a>
  <a href="{{ url_for('img', filename='P2_launch_screen.png') }}" target="_blank">
    <div class="card" style="padding: var(--space-2);"><img src="{{ url_for('img', filename='P2_launch_screen.png') }}" alt="P2" style="width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm);"><div class="muted" style="font-size: 11px; margin-top: 4px;">P2 Launch</div></div>
  </a>
  <a href="{{ url_for('img', filename='P70_og_twitter.png') }}" target="_blank">
    <div class="card" style="padding: var(--space-2);"><img src="{{ url_for('img', filename='P70_og_twitter.png') }}" alt="P70" style="width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm);"><div class="muted" style="font-size: 11px; margin-top: 4px;">P70 OG card</div></div>
  </a>
  <a href="{{ url_for('img', filename='S3x_bagang_guide.png') }}" target="_blank">
    <div class="card" style="padding: var(--space-2);"><img src="{{ url_for('img', filename='S3x_bagang_guide.png') }}" alt="八綱" style="width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm);"><div class="muted" style="font-size: 11px; margin-top: 4px;">八綱辨證卡</div></div>
  </a>
</div></div>
  </a>
</div>
{% endblock %}