{% extends "base.html" %}

{% block content %}
<div class="container-fluid">
  <h2 class="mb-3">Communications</h2>

  <div class="alert alert-info">
    <strong>Phase A+</strong>: The app does <strong>not</strong> send emails. Instead, it generates editable draft messages from <strong>saved</strong> assignments so staff can copy/paste or download packets.
  </div>

  <div class="card mb-4">
    <div class="card-header"><strong>Editable Templates</strong></div>
    <div class="card-body">
      <form method="get" action="{{ url_for('main.communications') }}" class="row g-2 align-items-end">
        <div class="col-md-6">
          <label class="form-label">Template</label>
          <select class="form-select" name="template_id" onchange="this.form.submit()">
            {% for t in templates %}
              <option value="{{ t.id }}" {% if selected_template and t.id == selected_template.id %}selected{% endif %}>{{ t.name }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-md-6">
          <label class="form-label">Audience</label>
          <select class="form-select" name="audience" onchange="this.form.submit()">
            {% for key, label in audience_options.items() %}
              <option value="{{ key }}" {% if audience == key %}selected{% endif %}>{{ label }}</option>
            {% endfor %}
          </select>
          <div class="form-text">Controls which recipients are included when generating drafts and downloads.</div>
        </div>
        <div class="col-12">
          <div class="small text-muted">
            Tip: Use the token buttons below to insert merge fields (e.g., mentor name, mentee needs).
          </div>
        </div>
      </form>

      <hr class="my-3" />

      <div class="mb-2">
        <div class="small fw-semibold">Token picker</div>
        <div class="d-flex flex-wrap gap-2">
          {% for tok in allowed_tokens %}
            <button type="button" class="btn btn-outline-secondary btn-sm" onclick="insertToken('{{ tok }}')">{{ tok }}</button>
          {% endfor %}
        </div>
      </div>

      <form method="post" class="mt-3">
        <input type="hidden" name="template_id" value="{{ selected_template.id if selected_template else '' }}" />

        <div class="mb-3">
          <label class="form-label">Subject</label>
          <textarea id="subjectField" name="subject" class="form-control" rows="2">{{ current_subject }}</textarea>
        </div>

        <div class="mb-3">
          <label class="form-label">Body</label>
          <textarea id="bodyField" name="body" class="form-control" rows="10">{{ current_body }}</textarea>
        </div>

        <div class="d-flex flex-wrap gap-2 align-items-end">
          <button class="btn btn-primary" name="action" value="save_template" type="submit">Save template</button>
          <button class="btn btn-outline-secondary" name="action" value="preview" type="submit">Preview</button>

          <div class="input-group" style="max-width: 420px;">
            <span class="input-group-text">New template name</span>
            <input type="text" class="form-control" name="new_template_name" placeholder="e.g., Intro — Spring Cohort" value="">
          </div>
          <button class="btn btn-outline-primary" name="action" value="save_as_new_template" type="submit">Save as new</button>

          <button class="btn btn-outline-danger" name="action" value="reset_default" type="submit" onclick="return confirm('Reset this template back to the default wording?')">Reset to default</button>
        </div>
      </form>
    </div>
  </div>

  <div class="card mb-4">
    <div class="card-header"><strong>Preview</strong></div>
    <div class="card-body">
      {% if preview_ready %}
        <div class="mb-2"><strong>To:</strong> {{ preview_to }}<br><strong>CC:</strong> {{ preview_cc }}</div>
        <div class="mb-2"><strong>Subject:</strong> {{ preview_subject }}</div>
        <pre class="p-3 bg-light border" style="white-space: pre-wrap;">{{ preview_body }}</pre>
      {% else %}
        <div class="text-muted">Click <strong>Preview</strong> to render this template using the first locked match (if any). If there are no locked matches yet, a sample preview is shown.</div>
      {% endif %}
    </div>
  </div>

  <div class="card mb-4">
    <div class="card-header"><strong>Generate Drafts</strong></div>
    <div class="card-body">
      <p class="mb-2">Downloads generate drafts for <strong>locked assignments only</strong> and exclude archived mentors/mentees.</p>
      {% if selected_template %}
        <div class="d-flex flex-wrap gap-2">
          <a class="btn btn-outline-primary" href="{{ url_for('main.communications_download', format='html', template_id=selected_template.id, audience=audience) }}">Download HTML packet</a>
          <a class="btn btn-outline-primary" href="{{ url_for('main.communications_download', format='xlsx', template_id=selected_template.id, audience=audience) }}">Download Excel (mail merge)</a>
          <a class="btn btn-outline-primary" href="{{ url_for('main.communications_download', format='csv', template_id=selected_template.id, audience=audience) }}">Download CSV (mail merge)</a>
        </div>
      {% else %}
        <div class="text-muted">No templates found.</div>
      {% endif %}
    </div>
  </div>

</div>

<script>
  // Insert token into whichever field currently has focus.
  let lastFocusedId = 'bodyField';
  const subjectField = document.getElementById('subjectField');
  const bodyField = document.getElementById('bodyField');
  if (subjectField) subjectField.addEventListener('focus', () => { lastFocusedId = 'subjectField'; });
  if (bodyField) bodyField.addEventListener('focus', () => { lastFocusedId = 'bodyField'; });

  function insertToken(tok) {
    const el = document.getElementById(lastFocusedId) || bodyField;
    if (!el) return;
    const start = el.selectionStart || 0;
    const end = el.selectionEnd || 0;
    const before = el.value.substring(0, start);
    const after = el.value.substring(end);
    el.value = before + tok + after;
    const newPos = start + tok.length;
    el.setSelectionRange(newPos, newPos);
    el.focus();
  }
</script>
{% endblock %}