{% extends "base.html" %}
{% block title %}Dashboard{% endblock %}
{% block page_title %}Dashboard{% endblock %}
{% set active = "dashboard" %}

{% block topbar_actions %}
<form hx-post="/generate" hx-target="#gen-result" hx-swap="innerHTML" hx-indicator="#gen-spinner">
  <button type="submit" class="btn btn-primary">
    <svg viewBox="0 0 20 20" fill="currentColor" width="16"><path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd"/></svg>
    Generate Timetable
    <span id="gen-spinner" class="htmx-indicator spinner-sm"></span>
  </button>
</form>
{% endblock %}

{% block content %}
<div id="gen-result"></div>

{% if welcome %}
<div class="welcome-banner">
  <div class="wb-icon">🎉</div>
  <div>
    <h3>Welcome to TimetableGen, {{ user.school_name }}!</h3>
    <p>Your school account is ready. Follow the checklist below to set up your first timetable.</p>
  </div>
</div>
{% endif %}

<div class="school-banner">
  <div class="school-info">
    <h2>{{ school.name }}</h2>
    <span class="badge">{{ school.board }}</span>
    {% if cfg %}<span class="badge badge-green">AY {{ cfg.academic_year }}</span>{% endif %}
    {% if school.city %}<span style="color:rgba(255,255,255,.6);font-size:13px">{{ school.city }}, {{ school.state }}</span>{% endif %}
  </div>
  <a href="/setup" class="btn btn-ghost btn-sm">Edit Info</a>
</div>

<div class="stats-grid">
  <div class="stat-card">
    <div class="stat-icon icon-blue"><svg viewBox="0 0 20 20" fill="currentColor"><path d="M10.394 2.08a1 1 0 00-.788 0l-7 3a1 1 0 000 1.84L5.25 8.051a.999.999 0 01.356-.257l4-1.714a1 1 0 11.788 1.838L7.667 8.9l1.927.827A1 1 0 0111 10.6v4a1 1 0 01-.83.988l-5 1a1 1 0 01-1.168-.849A1 1 0 014 15.6V11a1 1 0 01.552-.894L8 8.39V6.618l-2 .857V8a1 1 0 11-2 0V7a1 1 0 01.608-.924l4-1.714z"/></svg></div>
    <div class="stat-body"><div class="stat-value">{{ stats.classes }}</div><div class="stat-label">Classes</div></div>
    <a href="/classes" class="stat-link">Manage →</a>
  </div>
  <div class="stat-card">
    <div class="stat-icon icon-green"><svg viewBox="0 0 20 20" fill="currentColor"><path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3z"/></svg></div>
    <div class="stat-body"><div class="stat-value">{{ stats.teachers }}</div><div class="stat-label">Teachers</div></div>
    <a href="/teachers" class="stat-link">Manage →</a>
  </div>
  <div class="stat-card">
    <div class="stat-icon icon-purple"><svg viewBox="0 0 20 20" fill="currentColor"><path d="M9 4.804A7.968 7.968 0 005.5 4c-1.255 0-2.443.29-3.5.804v10A7.969 7.969 0 015.5 14c1.669 0 3.218.51 4.5 1.385A7.962 7.962 0 0114.5 14c1.255 0 2.443.29 3.5.804v-10A7.968 7.968 0 0014.5 4c-1.255 0-2.443.29-3.5.804V12a1 1 0 11-2 0V4.804z"/></svg></div>
    <div class="stat-body"><div class="stat-value">{{ stats.subjects }}</div><div class="stat-label">Subjects</div></div>
    <a href="/subjects" class="stat-link">Manage →</a>
  </div>
  <div class="stat-card {% if clashes %}card-danger{% elif stats.has_timetable %}card-success{% endif %}">
    <div class="stat-icon {% if clashes %}icon-red{% elif stats.has_timetable %}icon-green{% else %}icon-gray{% endif %}"><svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5 4v3H4a2 2 0 00-2 2v3a2 2 0 002 2h1v1a2 2 0 002 2h6a2 2 0 002-2v-1h1a2 2 0 002-2V9a2 2 0 00-2-2h-1V4a2 2 0 00-2-2H7a2 2 0 00-2 2z" clip-rule="evenodd"/></svg></div>
    <div class="stat-body">
      <div class="stat-value">{% if stats.has_timetable %}{% if clashes %}{{ clashes|length }} clash{% else %}✓ Ready{% endif %}{% else %}—{% endif %}</div>
      <div class="stat-label">Timetable</div>
    </div>
    <a href="/timetable" class="stat-link">View →</a>
  </div>
</div>

{% if clashes %}
<div class="alert alert-danger clash-bar">
  <strong>⚠ {{ clashes|length }} Teacher Clash(es) Detected</strong>
  <ul class="clash-list">{% for c in clashes %}<li>{{ c.teacher_name }} — {{ c.day }}, Period {{ c.period_no }}</li>{% endfor %}</ul>
  <a href="/timetable" class="btn btn-sm btn-danger" style="margin-top:8px">Fix in Timetable →</a>
</div>
{% endif %}

<div class="two-col-layout" style="gap:20px">
  <div>
    <h3 class="section-title">Quick Actions</h3>
    <div class="action-cards" style="grid-template-columns:repeat(2,1fr)">
      <a href="/setup" class="action-card"><div class="action-icon">⚙️</div><div class="action-label">School Setup</div><div class="action-desc">Periods, days, breaks</div></a>
      <a href="/requirements" class="action-card"><div class="action-icon">📋</div><div class="action-label">Requirements</div><div class="action-desc">Subjects per class</div></a>
      <a href="/timetable" class="action-card"><div class="action-icon">📅</div><div class="action-label">View Timetable</div><div class="action-desc">Edit & export</div></a>
      <a href="/substitute" class="action-card"><div class="action-icon">🔄</div><div class="action-label">Substitution</div><div class="action-desc">Cover absent teachers</div></a>
    </div>
  </div>
  <div>
    <h3 class="section-title">Setup Checklist</h3>
    <div class="checklist-card">
      <div class="checklist">
        <div class="check-item {% if stats.classes > 0 %}done{% endif %}"><span class="check-icon">{% if stats.classes > 0 %}✓{% else %}○{% endif %}</span><span>Add classes & sections</span><a href="/classes" class="check-link">Go →</a></div>
        <div class="check-item {% if stats.subjects > 0 %}done{% endif %}"><span class="check-icon">{% if stats.subjects > 0 %}✓{% else %}○{% endif %}</span><span>Add subjects</span><a href="/subjects" class="check-link">Go →</a></div>
        <div class="check-item {% if stats.teachers > 0 %}done{% endif %}"><span class="check-icon">{% if stats.teachers > 0 %}✓{% else %}○{% endif %}</span><span>Add teachers & assign subjects</span><a href="/teachers" class="check-link">Go →</a></div>
        <div class="check-item {% if cfg %}done{% endif %}"><span class="check-icon">{% if cfg %}✓{% else %}○{% endif %}</span><span>Configure timetable settings</span><a href="/setup" class="check-link">Go →</a></div>
        <div class="check-item"><span class="check-icon">○</span><span>Set class-subject requirements</span><a href="/requirements" class="check-link">Go →</a></div>
        <div class="check-item {% if stats.has_timetable %}done{% endif %}"><span class="check-icon">{% if stats.has_timetable %}✓{% else %}○{% endif %}</span><span>Generate timetable</span></div>
      </div>
    </div>
  </div>
</div>
{% endblock %}