{% extends "base.html" %}
{% block title %}Settings{% endblock %}
{% block content %}
<style>
  .mono { font-family: Consolas, "Courier New", monospace; font-size: .9rem; width: 100%; min-height: 300px; line-height: 1.4; }
  .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
  .chip { border: 1px solid #b8c4d6; background: #f2f6fc; color: var(--navy); border-radius: 12px; padding: 2px 10px; font: .85rem Consolas, monospace; cursor: pointer; }
  .chip:hover { background: #e3edfb; }
  .two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  @media (max-width: 1000px) { .two { grid-template-columns: 1fr; } }
  iframe.preview { width: 100%; height: 380px; border: 1px solid #d5dbe5; border-radius: 6px; background: #fff; }
  .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
  .status { font-size: .9rem; padding: 6px 10px; border-radius: 6px; display: inline-block; }
  .status.ok { background: #e2f4e5; } .status.no { background: #fbe3e1; }
</style>
<h2>Settings</h2>
{% if user.role == 'admin' %}
<div class="card" style="max-width:400px">
  <h3 style="margin-top:0">Change password</h3>
  <form method="post">
    <input type="hidden" name="csrf" value="{{ csrf_token }}">
    <label>Current password</label>
    <input name="current" type="password" required style="width:100%">
    <label>New password (6+ chars)</label>
    <input name="new" type="password" required style="width:100%">
    <p><button class="btn">Change</button></p>
  </form>
</div>

<div class="card" style="max-width:640px">
  <h3 style="margin-top:0">Sign-in options</h3>
  <form method="post" action="{{ url_for('signin_save') }}">
    <input type="hidden" name="csrf" value="{{ csrf_token }}">
    <label style="display:flex;align-items:center;gap:8px;margin:0">
      <input type="checkbox" name="otp" {{ 'checked' if otp_on }} style="width:18px;height:18px">
      <span>Let Leads and Users sign in with an emailed 6-digit code (OTP)</span>
    </label>
    <p style="color:#666;font-size:.88rem;margin:6px 0 0">Codes go to the registered email, work once and expire in 10 minutes. This needs email sending to be set up below.{% if not mail_ready %} <strong style="color:#b3261e">Email is not set up yet.</strong>{% endif %}</p>
    <p><button class="btn">Save</button></p>
  </form>
</div>

<div class="card">
  <h3 style="margin-top:0">Welcome email template</h3>
  <p style="margin-top:0;color:#555">Sent automatically when you add a new Lead or User. The body is HTML.</p>
  <p>
    {% if mail_ready %}<span class="status ok">Email sending is set up. Sent from {{ mail_from }}.</span>
    {% else %}<span class="status no">Email sending is not set up yet. Emails will not be sent until it is (see README).</span>{% endif %}
  </p>
  <form method="post" action="{{ url_for('email_save') }}" id="mailForm">
    <input type="hidden" name="csrf" value="{{ csrf_token }}">
    <label class="toggle" style="display:flex;align-items:center;gap:8px;margin:0 0 6px">
      <input type="checkbox" name="enabled" {{ 'checked' if enabled }} style="width:18px;height:18px">
      <span>Send this welcome email when a new Lead or User is added</span>
    </label>

    <label for="subject">Subject</label>
    <input name="subject" id="subject" value="{{ subject }}" maxlength="200" required style="width:100%">

    <label for="body">Body (HTML)</label>
    <div class="chips" aria-label="Placeholders">
      <span style="color:#666;font-size:.85rem;align-self:center">Click to insert:</span>
      {% for v in template_vars %}<button type="button" class="chip" data-var="{{ v }}">&#123;&#123;{{ v }}&#125;&#125;</button>{% endfor %}
    </div>
    <div class="two">
      <div>
        <textarea name="body" id="body" class="mono" spellcheck="false" required>{{ body }}</textarea>
      </div>
      <div>
        <iframe class="preview" id="preview" sandbox title="Email preview"></iframe>
      </div>
    </div>
    <p style="color:#666;font-size:.85rem;margin:6px 0 0">The preview uses sample values. Scripts are removed when saved, and each placeholder is filled with the person's own details when the email is sent.</p>

    <div class="row">
      <button class="btn">Save template</button>
      <button class="btn ghost" formaction="{{ url_for('email_reset') }}" formnovalidate onclick="return confirm('Reset the subject and body to the default template?')">Reset to default</button>
    </div>
    <div class="row" style="border-top:1px solid #e3e3e3;padding-top:12px">
      <input name="to" type="email" placeholder="Send a test email to..." style="min-width:260px">
      <button class="btn ghost" formaction="{{ url_for('email_test') }}" formnovalidate>Send test email</button>
      <span style="color:#666;font-size:.85rem">Uses the template as typed above, even if not saved yet.</span>
    </div>
  </form>
</div>

<script>{% raw %}
  const SAMPLE = { app_name: 'College KT Portal', name: 'Priya Nair', email: 'priya@company.com', role: 'Lead',
                   login_url: location.origin + '/login', added_by: 'Site Admin' };
  const body = document.getElementById('body'), preview = document.getElementById('preview');
  const esc = s => s.replace(/[&<>"']/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
  function render() {
    const html = body.value
      .replace(/<script\b[\s\S]*?<\/script\s*>/gi, '')
      .replace(/\{\{\s*(\w+)\s*\}\}/g, (m, k) => k in SAMPLE ? esc(SAMPLE[k]) : m);
    preview.srcdoc = html;
  }
  body.addEventListener('input', render);
  document.querySelectorAll('.chip').forEach(c => c.addEventListener('click', () => {
    const t = '{{' + c.dataset.var + '}}', a = body.selectionStart, z = body.selectionEnd;
    body.setRangeText(t, a, z, 'end'); body.focus(); render();
  }));
  render();
{% endraw %}</script>
{% else %}
<div class="card" style="max-width:480px">
  <h3 style="margin-top:0">Your account</h3>
  <p>Signed in with Google as <strong>{{ user.email }}</strong>.</p>
  <p style="color:#555">Your login uses your Google account, so there is no portal password to change.</p>
</div>
{% endif %}
{% endblock %}