{% extends "base.html" %}
{% block title %}Class Timetable{% endblock %}
{% block page_title %}Class Timetable{% endblock %}
{% set active = "timetable" %}

{% block topbar_actions %}
{% if selected_class %}
<a href="/export/class/{{ selected_class }}/pdf" class="btn btn-ghost btn-sm" target="_blank">
  <svg viewBox="0 0 20 20" fill="currentColor" width="14"><path fill-rule="evenodd" d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V7.414A2 2 0 0015.414 6L12 2.586A2 2 0 0010.586 2H6zm5 6a1 1 0 10-2 0v3.586l-1.293-1.293a1 1 0 10-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 11.586V8z" clip-rule="evenodd"/></svg>
  Export PDF
</a>
{% endif %}
{% endblock %}

{% block content %}
<!-- Class Selector Tabs -->
<div class="class-tabs-wrap">
  <div class="class-tabs">
    {% for cls in classes %}
    <a href="/timetable?class_id={{ cls.id }}"
       class="class-tab {% if cls.id == selected_class %}active{% endif %}">
      {{ cls.grade }}-{{ cls.section }}
    </a>
    {% endfor %}
  </div>
</div>

{% if not cfg %}
<div class="empty-state">
  <div class="empty-icon">📅</div>
  <h3>No Timetable Configuration</h3>
  <p>Complete school setup first, then click "Generate Timetable".</p>
  <a href="/setup" class="btn btn-primary">Go to Setup</a>
</div>

{% elif not classes %}
<div class="empty-state">
  <div class="empty-icon">🏫</div>
  <h3>No Classes Added</h3>
  <p>Add classes before generating a timetable.</p>
  <a href="/classes" class="btn btn-primary">Add Classes</a>
</div>

{% elif not grid %}
<div class="empty-state">
  <div class="empty-icon">⚡</div>
  <h3>Timetable Not Generated</h3>
  <p>Set up your requirements and click Generate Timetable.</p>
  <button class="btn btn-primary"
    hx-post="/generate" hx-target="#gen-result" hx-swap="innerHTML">
    Generate Now
  </button>
  <div id="gen-result" style="margin-top:12px"></div>
</div>

{% else %}

<!-- Clash Banner -->
{% if clashes %}
<div class="alert alert-danger clash-bar" id="clash-bar">
  <strong>⚠ {{ clashes|length }} clash(es) detected.</strong>
  Click a highlighted cell to fix it.
  <button onclick="document.getElementById('clash-bar').style.display='none'" style="float:right;background:none;border:none;cursor:pointer;font-size:18px;color:inherit">×</button>
</div>
{% endif %}

<!-- Timetable Grid -->
<div class="tt-container">
  <div class="tt-scroll">
    <table class="timetable" id="tt-table">
      <thead>
        <tr>
          <th class="day-col">Day</th>
          {% for p in periods %}
            {% if p in break_periods %}
            <th class="break-col">Break</th>
            {% else %}
            <th>P{{ p }}</th>
            {% endif %}
          {% endfor %}
        </tr>
      </thead>
      <tbody>
        {% for day in days %}
        <tr>
          <td class="day-label">{{ day }}</td>
          {% for p in periods %}
          {% set cell = grid.get((day, p), {}) %}
            {% if cell.get('is_break') %}
            <td class="cell-break">☕</td>
            {% else %}
            {% set is_clash = (day, p, cell.get('teacher_id')) in clash_slots and cell.get('teacher_id') %}
            <td class="tt-cell {% if is_clash %}cell-clash{% elif cell.get('is_free') or not cell %}cell-free{% endif %}"
                data-day="{{ day }}"
                data-period="{{ p }}"
                data-class="{{ selected_class }}"
                data-config="{{ cfg.id }}"
                data-subject="{{ cell.get('subject_id', '') }}"
                data-teacher="{{ cell.get('teacher_id', '') }}"
                {% if cell.get('color') %}style="--cell-color: {{ cell.color }}"{% endif %}
                onclick="openCellEditor(this)">

              {% if cell.get('subject_id') %}
              <div class="cell-inner" style="border-left: 3px solid {{ cell.get('color', '#4F8EF7') }}">
                <div class="cell-subject">{{ cell.get('subj_name', '') }}</div>
                <div class="cell-teacher">{{ cell.get('teacher_name', '') }}</div>
                {% if cell.get('subject_type') in ['lab', 'PT'] %}
                <div class="cell-badge">{{ cell.subject_type }}</div>
                {% endif %}
              </div>
              {% elif cell.get('is_free') or not cell %}
              <div class="cell-free-label">Free</div>
              {% endif %}
            </td>
            {% endif %}
          {% endfor %}
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<!-- Cell Editor Modal -->
<div id="cell-modal" class="modal-overlay" style="display:none" onclick="closeCellModal(event)">
  <div class="modal-box">
    <div class="modal-header">
      <h3 id="modal-title">Edit Period</h3>
      <button onclick="closeCellModal()" class="modal-close">×</button>
    </div>
    <div class="modal-body">
      <div class="form-row">
        <label>Subject</label>
        <select id="edit-subject" class="form-select" onchange="filterTeachers()">
          <option value="">— Free Period —</option>
          {% for s in subjects %}
          <option value="{{ s.id }}" data-type="{{ s.subject_type }}">{{ s.name }} ({{ s.subject_type }})</option>
          {% endfor %}
        </select>
      </div>
      <div class="form-row">
        <label>Teacher</label>
        <select id="edit-teacher" class="form-select">
          <option value="">— Select Teacher —</option>
          {% for t in teachers %}
          <option value="{{ t.id }}">{{ t.name }}</option>
          {% endfor %}
        </select>
      </div>
      <div id="clash-warning" class="clash-warning" style="display:none">
        ⚠ This teacher already has a class at this period!
      </div>
    </div>
    <div class="modal-footer">
      <button onclick="closeCellModal()" class="btn btn-ghost">Cancel</button>
      <button onclick="saveCellEdit()" class="btn btn-primary">Save</button>
    </div>
  </div>
</div>

{% endif %}
{% endblock %}

{% block extra_js %}
<script>
let currentCell = null;

function openCellEditor(td) {
  currentCell = td;
  const day = td.dataset.day;
  const period = td.dataset.period;
  document.getElementById('modal-title').textContent = `Edit — ${day}, Period ${period}`;
  document.getElementById('edit-subject').value = td.dataset.subject || '';
  document.getElementById('edit-teacher').value = td.dataset.teacher || '';
  document.getElementById('clash-warning').style.display = 'none';
  document.getElementById('cell-modal').style.display = 'flex';
}

function closeCellModal(e) {
  if (!e || e.target === document.getElementById('cell-modal')) {
    document.getElementById('cell-modal').style.display = 'none';
    currentCell = null;
  }
}

async function saveCellEdit() {
  if (!currentCell) return;
  const subjectId = document.getElementById('edit-subject').value;
  const teacherId = document.getElementById('edit-teacher').value;

  const form = new FormData();
  form.append('config_id', currentCell.dataset.config);
  form.append('class_id', currentCell.dataset.class);
  form.append('day', currentCell.dataset.day);
  form.append('period_no', currentCell.dataset.period);
  if (subjectId) form.append('subject_id', subjectId);
  if (teacherId) form.append('teacher_id', teacherId);

  const res = await fetch('/timetable/update-cell', { method: 'POST', body: form });
  const data = await res.json();

  // Update cell display
  currentCell.dataset.subject = subjectId;
  currentCell.dataset.teacher = teacherId;
  const sel = document.getElementById('edit-subject');
  const subjectName = sel.options[sel.selectedIndex]?.text || '';
  const teacherSel = document.getElementById('edit-teacher');
  const teacherName = teacherSel.options[teacherSel.selectedIndex]?.text || '';

  if (subjectId) {
    currentCell.classList.remove('cell-free', 'cell-clash');
    currentCell.innerHTML = `<div class="cell-inner"><div class="cell-subject">${subjectName.split(' (')[0]}</div><div class="cell-teacher">${teacherName}</div></div>`;
  } else {
    currentCell.classList.add('cell-free');
    currentCell.classList.remove('cell-clash');
    currentCell.innerHTML = '<div class="cell-free-label">Free</div>';
  }

  // Update clash highlights
  document.querySelectorAll('.cell-clash').forEach(c => c.classList.remove('cell-clash'));
  if (data.clashes && data.clashes.length) {
    document.querySelectorAll('.tt-cell').forEach(c => {
      const isClash = data.clashes.some(cl =>
        cl.day === c.dataset.day &&
        parseInt(cl.period_no) === parseInt(c.dataset.period) &&
        parseInt(cl.teacher_id) === parseInt(c.dataset.teacher)
      );
      if (isClash) c.classList.add('cell-clash');
    });
    document.getElementById('clash-bar') && (document.getElementById('clash-bar').style.display = '');
  }

  closeCellModal();
  showToast('Period updated!', 'success');
}
</script>
{% endblock %}