{% extends "base.html" %}
{% from "_ui.html" import page_head, rich_editor %}
{% block title %}{{ 'Edit KT' if kt else (block_meta[block_type].label if block_type else 'Add KT') }}{% endblock %}
{% block content %}
<style>
  fieldset.kt-set { position: relative; border: 1px solid var(--line-strong); border-radius: 8px; padding: 20px 20px 18px; margin: 24px 0 0; background: var(--surface-3); }
  fieldset.kt-set legend { padding: 0; }
  .legend-pill { display: inline-flex; align-items: center; gap: 7px; background: var(--primary); color: #fff; border-radius: 999px; padding: 3px 14px 3px 11px; font-size: .86rem; font-weight: 600; }
  .desc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
  .desc-head label { margin: 0; font-weight: 600; font-size: .9rem; color: var(--text); }
  .desc-head .kind { width: auto; min-width: 190px; }
  .desc-body .v { width: 100%; }
  .desc-body input[type=date].v, .desc-body input[type=time].v { width: auto; min-width: 210px; }
  .desc-body textarea.v { min-height: 110px; }
  .opt-row { display: flex; align-items: center; gap: 8px; margin: 7px 0; }
  .opt-row .opt { flex: 1; }
  .opt-row .sel { width: 18px; height: 18px; flex: none; cursor: pointer; }

  .field-set { position: relative; border: 1px solid var(--line); border-radius: 8px; padding: 16px 16px 14px;
               margin-top: 16px; background: var(--surface); }
  .field-set .field-set-head { display: flex; align-items: flex-start; gap: 10px; }
  .field-set .field-set-head .field { flex: 1; margin: 0; }
  .field-set .rm-field { flex: none; margin-top: 24px; }
  .field-set .label-input { width: 100%; }

  .block-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin-top: 4px; }
  .block-tile { display: flex; flex-direction: column; gap: 8px; background: var(--surface); border: 1px solid var(--line);
                border-radius: 14px; padding: 20px; text-align: left; cursor: pointer; font: inherit; color: inherit;
                text-decoration: none; transition: box-shadow .15s, border-color .15s, transform .15s; }
  .block-tile:hover { box-shadow: var(--pop-shadow); border-color: var(--line-strong); transform: translateY(-2px); }
  .block-tile .bt-ic { width: 42px; height: 42px; border-radius: 10px; background: var(--ph-ic-bg); color: var(--primary-ink); display: grid; place-items: center; }
  .block-tile .bt-ic .ic { width: 1.3rem; height: 1.3rem; }
  .block-tile strong { font-size: 1rem; color: var(--heading); }
  .block-tile .bt-desc { color: var(--muted); font-size: .85rem; line-height: 1.4; }

  .reminder-notice { margin-top: 14px; padding: 11px 14px; border-radius: 10px; border: 1px solid; font-weight: 600; font-size: .92rem; }
  .reminder-notice.upcoming { background: color-mix(in srgb, var(--ok) 12%, var(--surface)); border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); }
  .reminder-notice.due_soon { background: color-mix(in srgb, #d97706 14%, var(--surface)); border-color: color-mix(in srgb, #d97706 45%, var(--line)); }
  .reminder-notice.overdue { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }
  .check-row { display: flex; align-items: center; gap: 6px; font-size: .88rem; margin: 6px 0; cursor: pointer; }
  .rich-field { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--bg); }
  .rich-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px 8px;
                  background: var(--surface-3); border-bottom: 1px solid var(--line); }
  .rich-toolbar button { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
                          border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text);
                          cursor: pointer; padding: 0; }
  .rich-toolbar button:hover { background: var(--surface); border-color: var(--line); }
  .rich-toolbar button.active { background: var(--primary); color: #fff; }
  .rich-toolbar button .ic { width: 16px; height: 16px; }
  .rich-sep { width: 1px; align-self: stretch; margin: 4px 4px; background: var(--line); }
  .rich-editor { min-height: 130px; padding: 10px 12px; font: inherit; color: var(--text); background: var(--bg);
                 white-space: pre-wrap; outline: none; }
  .rich-editor:empty::before { content: attr(data-placeholder); color: var(--muted); }
  .rich-editor ul, .rich-editor ol { margin: 4px 0 4px 1.4em; }
  .rich-editor blockquote { margin: 0; border: 0; padding: 0; }
  .rich-raw { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
              clip: rect(0 0 0 0); overflow: hidden; }
</style>

{% if not block_type %}
{# ---------- step 1: pick a block type (the KT Criteria is already fixed) ---------- #}
{{ page_head('list', 'Add KT', 'Choose what kind of KT to add inside ' ~ (selected_criteria.title if selected_criteria else 'this KT Criteria') ~ '.') }}
{% if selected_criteria %}
<div class="card">
  <div class="card-body">
    <div class="cell">
      <span class="pill" style="font-size:.9rem;padding:5px 14px">{{ icon('cap') }} {{ selected_criteria.college_name }}</span>
      <span class="muted">&rsaquo;</span>
      <span class="pill" style="font-size:.9rem;padding:5px 14px">{{ icon('list') }} {{ selected_criteria.title }}</span>
    </div>
  </div>
</div>
<div class="block-picker">
  {% for value, label, icon_name, hint in block_types %}
  <a class="block-tile" href="{{ url_for('kt_new', criteria=selected_criteria.id, type=value) }}">
    <span class="bt-ic">{{ icon(icon_name) }}</span>
    <strong>{{ label }}</strong>
    <span class="bt-desc">{{ hint }}</span>
  </a>
  {% endfor %}
</div>
{% else %}
<div class="card"><div class="card-body"><p class="hint">Choose a KT Criteria first, then add KT inside it. <a href="{{ url_for('search') }}">Go to Find College KT</a>.</p></div></div>
{% endif %}

{% else %}
{# ---------- step 2: the form for the chosen block type ---------- #}
{% set meta = block_meta[block_type] %}
{{ page_head(meta.icon, 'Edit KT' if kt else meta.label, meta.hint if not kt else 'Update this KT.') }}
<div class="card">
  <div class="card-head"><h3>{{ icon(meta.icon) }} KT details</h3></div>
  <div class="card-body">
    <form method="post" enctype="multipart/form-data">
      <input type="hidden" name="csrf" value="{{ csrf_token }}">
      <input type="hidden" name="block_type" value="{{ block_type }}">
      <div class="field">
        <label>KT Criteria</label>
        <div class="cell">
          <span class="pill" style="font-size:.9rem;padding:5px 14px">{{ icon('cap') }} {{ selected_criteria.college_name }}</span>
          <span class="muted">&rsaquo;</span>
          <span class="pill" style="font-size:.9rem;padding:5px 14px">{{ icon('list') }} {{ selected_criteria.title }}</span>
        </div>
      </div>

      <fieldset class="kt-set">
        <legend><span class="legend-pill">{{ icon(meta.icon) }} {{ meta.label if not kt else 'KT' }}</span></legend>

        <div class="field">
          <label class="req">Title</label>
          <div class="input-icon">{{ icon('type') }}<input name="title" value="{{ values.title }}" required placeholder="e.g. Admission process"></div>
        </div>

        {% if block_type == 'description' %}
        <div class="field" style="margin-top:16px">
          <label class="req">Description</label>
          {{ rich_editor('kt', values.text, required=True, placeholder='Description') }}
        </div>

        {% elif block_type == 'form' %}
        <div class="field" style="margin-top:16px">
          <label>Description</label>
          {{ rich_editor('description', values.description, placeholder='Optional description or instructions') }}
        </div>

        <div id="fieldList"></div>
        <button type="button" id="addFieldBtn" class="btn small ghost" style="margin-top:14px">{{ icon('plus') }} Add</button>
        <script nonce="{{ csp_nonce }}" type="application/json" id="fieldsInitial">{{ values.fields|tojson }}</script>
        <script nonce="{{ csp_nonce }}" type="application/json" id="kindOptions">{{ kinds|list|tojson }}</script>

        {% elif block_type == 'link' %}
        <div class="field" style="margin-top:16px">
          <label class="req">Link URL</label>
          <div class="input-icon">{{ icon('link') }}<input type="url" name="url" value="{{ values.url }}" required placeholder="https://example.com"></div>
          <p class="hint">Shown as an "Open link" button that opens in a new tab.</p>
        </div>

        {% elif block_type == 'embed' %}
        <div class="field" style="margin-top:16px">
          <label class="req">Media URL</label>
          <textarea name="url" required placeholder="https://www.youtube.com/watch?v=... or paste a full &lt;iframe&gt; embed code">{{ values.url }}</textarea>
          <p class="hint">YouTube and Vimeo links embed automatically. You can also paste a full &lt;iframe&gt; embed code (e.g. from YouTube's Share &rarr; Embed) - the address is pulled out automatically. Other pages embed as typed if they allow it.</p>
        </div>

        {% elif block_type == 'alert' %}
        <div class="field" style="margin-top:16px">
          <label class="req">Alert Level</label>
          <select name="level" required>
            <option value="">-- Select level --</option>
            <option value="info" {{ 'selected' if values.level == 'info' }}>Info</option>
            <option value="warning" {{ 'selected' if values.level == 'warning' }}>Warning</option>
            <option value="critical" {{ 'selected' if values.level == 'critical' }}>Critical</option>
          </select>
        </div>
        <div class="field" style="margin-top:16px">
          <label class="req">Message</label>
          <textarea name="kt" required placeholder="Alert message">{{ values.text }}</textarea>
        </div>

        {% elif block_type == 'attachment' %}
        <div class="field" style="margin-top:16px">
          <label {{ 'class=req' if not kt }}>File</label>
          <input type="file" name="file" {{ 'required' if not kt }}>
          {% if kt and kt.file_name %}
          <p class="hint">Current file: <strong>{{ kt.file_name }}</strong>{% if kt.file_size %} ({{ (kt.file_size / 1024)|round(1) }} KB){% endif %}. Choose a new file to replace it, or leave this blank to keep it.</p>
          {% endif %}
          <p class="hint">Allowed: PDF, Word, Excel, PowerPoint, OpenDocument, RTF, text, CSV, image or ZIP. Up to 15&nbsp;MB.</p>
        </div>

        {% elif block_type == 'faculty' %}
        <div class="field" style="margin-top:16px">
          <label for="facultyPick" class="req">Faculty</label>
          <select name="faculty_id" id="facultyPick" required>
            <option value="">-- Select faculty --</option>
            {% for f in faculty_list %}{% set taken = f.id in used_faculty and f.id != (kt.faculty_id if kt else None) %}<option value="{{ f.id }}" {{ 'selected' if f.id == values.faculty_id and not taken }} {{ 'disabled' if taken }}>{{ f.title }} {{ f.first_name }} {{ f.last_name }} ({{ f.email }}){{ ' - already has a KT here' if taken }}</option>{% endfor %}
          </select>
          {% if not faculty_list %}
          <p class="hint">There is no faculty yet. <a href="{{ url_for('faculty_new') }}">Add a faculty</a> first, then come back.</p>
          {% else %}
          <p class="hint">Choose from the Faculty List. Need someone new? <a href="{{ url_for('faculty_new') }}" target="_blank" rel="noopener">Add a faculty</a>, then reload this page.</p>
          {% endif %}
        </div>
        <div class="field" style="margin-top:16px">
          <label for="facultyFile">Add Attachment</label>
          <input type="file" name="file" id="facultyFile">
          {% if kt and kt.file_name %}
          <p class="hint">Current file: <strong>{{ kt.file_name }}</strong>{% if kt.file_size %} ({{ (kt.file_size / 1024)|round(1) }} KB){% endif %}. Choose a new file to replace it, or leave this blank to keep it.</p>
          <label class="check-row"><input type="checkbox" name="remove_file" value="1"> Remove the current file</label>
          {% endif %}
          <p class="hint">Optional. Any document format: PDF, Word, Excel, PowerPoint, OpenDocument, RTF, text, CSV and more (images and ZIP too). Up to 15&nbsp;MB.</p>
        </div>
        <div class="field" style="margin-top:16px">
          <label for="facultyLink">Add Link</label>
          <div class="input-icon">{{ icon('link') }}<input type="url" name="url" id="facultyLink" value="{{ values.url }}" placeholder="https://example.com"></div>
          <p class="hint">Optional. Shown as an "Open link" button that opens in a new tab.</p>
        </div>

        {% elif block_type == 'reminder' %}
        <div class="field" style="margin-top:16px">
          <label for="reminderFaculty" class="req">Faculty</label>
          <select name="faculty_id" id="reminderFaculty" required>
            <option value="">-- Select faculty --</option>
            {% for f in faculty_list %}{% set taken = f.id in used_faculty and f.id != (kt.faculty_id if kt else None) %}<option value="{{ f.id }}" {{ 'selected' if f.id == values.faculty_id and not taken }} {{ 'disabled' if taken }}>{{ f.title }} {{ f.first_name }} {{ f.last_name }} ({{ f.email }}){{ ' - already has a KT here' if taken }}</option>{% endfor %}
          </select>
          <p class="hint">Choose the faculty this reminder is for from the Faculty List. A faculty can be used only once in a KT Criteria.{% if not faculty_list %} There is no faculty yet - <a href="{{ url_for('faculty_new') }}">add a faculty</a> first, then come back.{% endif %}</p>
        </div>
        <div class="field" style="margin-top:16px">
          <label class="req">Availability Updated Date</label>
          <div class="input-icon">{{ icon('calendar') }}<input type="date" name="updated" value="{{ values.updated }}" required></div>
        </div>
        <div class="field" style="margin-top:16px">
          <label class="req">Availability Due Date</label>
          <div class="input-icon">{{ icon('calendar') }}<input type="date" name="due" value="{{ values.due }}" required></div>
        </div>
        <div class="reminder-notice" id="reminderNotice" role="status" hidden></div>
        {% endif %}
      </fieldset>

      <div class="form-actions">
        <button class="btn">{{ icon('save') }} Save</button>
        <a class="btn ghost" href="{{ url_for('search') }}">{{ icon('x') }} Cancel</a>
      </div>
    </form>
  </div>
</div>

{% if block_type == 'form' %}
<script nonce="{{ csp_nonce }}">
  (function () {
    const CHOICE = ['multiple_choice', 'checkboxes', 'dropdown'];
    const HINTS = {
      multiple_choice: 'Add the options and select the one that applies.',
      checkboxes: 'Add the options and tick every one that applies.',
      dropdown: 'Add the options and select the one that applies.'
    };
    const svg = n => '<svg class="ic" aria-hidden="true"><use href="#i-' + n + '"></use></svg>';
    const list = document.getElementById('fieldList');
    const addBtn = document.getElementById('addFieldBtn');
    const KIND_OPTIONS = JSON.parse(document.getElementById('kindOptions').textContent);
    let initialFields = [];
    try {
      initialFields = JSON.parse(document.getElementById('fieldsInitial').textContent);
      if (!Array.isArray(initialFields) || !initialFields.length) initialFields = [null];
    } catch (e) { initialFields = [null]; }

    function el(tag, props = {}, ...kids) { const e = Object.assign(document.createElement(tag), props); e.append(...kids); return e; }

    function optRow(multi, text, checked, i) {
      return el('div', { className: 'opt-row' },
        el('input', { type: multi ? 'checkbox' : 'radio', className: 'sel', name: 'sel', checked, title: multi ? 'Tick if chosen' : 'Select if chosen' }),
        el('input', { type: 'text', className: 'opt', value: text, maxLength: 200, placeholder: 'Option ' + (i + 1) }),
        el('button', { type: 'button', className: 'btn icon del rm-opt', title: 'Remove option', innerHTML: svg('x') }));
    }

    function addField(initial) {
      const st = { value: '', options: ['', ''], selected: [] };
      if (initial) {
        st.value = typeof initial.value === 'string' ? initial.value : '';
        st.options = Array.isArray(initial.options) && initial.options.length ? initial.options.map(String) : ['', ''];
        st.selected = Array.isArray(initial.selected) ? initial.selected.filter(Number.isInteger) : [];
      }

      const labelInput = el('input', { type: 'text', className: 'label-input', name: 'field_label', required: true,
                                        maxLength: 300, placeholder: 'e.g. What is your full name?', value: (initial && initial.label) || '' });
      const kindSel = el('select', { name: 'field_kind', className: 'kind', 'aria-label': 'Answer type' },
        ...KIND_OPTIONS.map(([v, l]) => el('option', { value: v, textContent: l, selected: v === ((initial && initial.kind) || 'paragraph') })));
      const body = el('div', { className: 'desc-body' });
      const payloadInput = el('input', { type: 'hidden', name: 'field_payload' });
      const rmBtn = el('button', { type: 'button', className: 'btn icon del rm-field', title: 'Remove question', 'aria-label': 'Remove question', innerHTML: svg('x') });

      function render() {
        const kind = kindSel.value;
        body.replaceChildren();
        if (kind === 'short') {
          body.append(el('input', { type: 'text', className: 'v', maxLength: 500, placeholder: 'Short answer text', value: st.value.split('\n')[0] }));
        } else if (kind === 'paragraph') {
          body.append(el('textarea', { className: 'v', placeholder: 'Paragraph answer', value: st.value }));
        } else if (kind === 'date') {
          body.append(el('input', { type: 'date', className: 'v', value: st.value }));
        } else if (kind === 'time') {
          body.append(el('input', { type: 'time', className: 'v', value: st.value }));
        } else {
          const multi = kind === 'checkboxes';
          st.options.forEach((o, i) => body.append(optRow(multi, o, st.selected.includes(i), i)));
          body.append(el('p', { className: 'hint' }, HINTS[kind]),
                      el('button', { type: 'button', className: 'btn small ghost add-opt', innerHTML: svg('plus') + ' Add option' }));
        }
        sync();
      }

      function collect() {
        const v = body.querySelector('.v'), rows = [...body.querySelectorAll('.opt-row')];
        if (v) st.value = v.value;
        if (rows.length) {
          st.options = rows.map(r => r.querySelector('.opt').value);
          st.selected = rows.flatMap((r, i) => r.querySelector('.sel').checked ? [i] : []);
        }
      }

      function sync() {
        collect();
        payloadInput.value = JSON.stringify(CHOICE.includes(kindSel.value) ? { options: st.options, selected: st.selected } : { value: st.value });
      }

      kindSel.addEventListener('change', () => {
        collect();
        const k = kindSel.value;
        if (k === 'date' && !/^\d{4}-\d{2}-\d{2}$/.test(st.value)) st.value = '';
        if (k === 'time' && !/^\d{2}:\d{2}/.test(st.value)) st.value = '';
        if (k === 'short') st.value = st.value.split('\n')[0];
        if (k !== 'checkboxes') st.selected = st.selected.slice(0, 1);
        render();
      });
      body.addEventListener('input', sync);
      body.addEventListener('change', sync);
      body.addEventListener('click', e => {
        const btn = e.target.closest('button');
        if (!btn) return;
        if (btn.classList.contains('add-opt')) { collect(); st.options.push(''); render(); const o = body.querySelectorAll('.opt'); o[o.length - 1].focus(); }
        else if (btn.classList.contains('rm-opt')) {
          collect();
          const rows = [...body.querySelectorAll('.opt-row')], i = rows.indexOf(btn.closest('.opt-row'));
          if (rows.length <= 1) return;
          st.options.splice(i, 1);
          st.selected = st.selected.filter(x => x !== i).map(x => x > i ? x - 1 : x);
          render();
        }
      });

      const wrap = el('div', { className: 'field-set' },
        el('div', { className: 'field-set-head' },
          el('div', { className: 'field' }, el('label', { className: 'req', textContent: 'Label' }), labelInput),
          rmBtn),
        el('div', { className: 'field', style: 'margin-top:12px' },
          el('div', { className: 'desc-head' }, el('label', { textContent: 'Answer area' }), kindSel),
          body, payloadInput));

      rmBtn.addEventListener('click', () => {
        if (list.children.length <= 1) return;   // keep at least one question
        wrap.remove();
      });

      list.append(wrap);
      render();
    }

    addBtn.addEventListener('click', () => addField(null));
    initialFields.forEach(addField);
  })();
</script>
{% endif %}

{% if block_type == 'reminder' %}
<script nonce="{{ csp_nonce }}">
  (function () {
    var MESSAGES = {{ REMINDER_MESSAGES|tojson }}, SOON = {{ REMINDER_END_SOON_DAYS }};
    var due = document.querySelector('input[name=due]'), box = document.getElementById('reminderNotice');
    function update() {
      if (!due.value) { box.hidden = true; return; }
      var p = due.value.split('-').map(Number), now = new Date();
      var days = Math.round((new Date(p[0], p[1] - 1, p[2]) - new Date(now.getFullYear(), now.getMonth(), now.getDate())) / 86400000);
      var state = days < 0 ? 'overdue' : days < SOON ? 'due_soon' : 'upcoming';
      box.className = 'reminder-notice ' + state; box.textContent = MESSAGES[state]; box.hidden = false;
    }
    due.addEventListener('input', update); update();
  })();
</script>
{% endif %}

<script nonce="{{ csp_nonce }}">
  (function () {
    document.querySelectorAll('.rich-field').forEach(function (field) {
      const editor = field.querySelector('.rich-editor');
      const raw = field.querySelector('.rich-raw');
      const toolbar = field.querySelector('.rich-toolbar');
      const ALIGN = ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'];
      const TOGGLE = { bold: 'bold', italic: 'italic', underline: 'underline',
                        insertUnorderedList: 'insertUnorderedList', insertOrderedList: 'insertOrderedList' };

      function sync() { raw.value = editor.innerHTML; }

      function refreshToolbar() {
        toolbar.querySelectorAll('button[data-cmd]').forEach(function (btn) {
          const cmd = btn.dataset.cmd;
          let on = false;
          try { on = (cmd in TOGGLE || ALIGN.includes(cmd)) && document.queryCommandState(cmd); } catch (e) {}
          btn.classList.toggle('active', on);
        });
      }

      toolbar.addEventListener('click', function (e) {
        const btn = e.target.closest('button[data-cmd]');
        if (!btn) return;
        editor.focus();
        document.execCommand(btn.dataset.cmd, false, null);
        sync();
        refreshToolbar();
      });
      editor.addEventListener('input', sync);
      editor.addEventListener('keyup', refreshToolbar);
      editor.addEventListener('mouseup', refreshToolbar);
      editor.addEventListener('focus', refreshToolbar);
      sync();
      field.closest('form').addEventListener('submit', sync);
    });
  })();
</script>
{% endif %}
{% endblock %}