{% extends "base.html" %}
{% from "_ui.html" import page_head, role_pill %}
{% block title %}Settings{% endblock %}
{% block content %}
<style>
  .mono { font-family: Consolas, "Courier New", monospace; font-size: .88rem; min-height: 320px; line-height: 1.45; }
  .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; align-items: center; }
  .chip { border: 1px solid var(--line-strong); background: var(--chip-bg); color: var(--primary-ink); border-radius: 12px; padding: 2px 10px; font: .82rem Consolas, monospace; cursor: pointer; }
  .chip:hover { background: var(--chip-hover); }
  .two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  @media (max-width: 1000px) { .two { grid-template-columns: 1fr; } }
  iframe.preview { width: 100%; height: 100%; min-height: 320px; border: 1px solid var(--line); border-radius: 4px; background: #fff; /* an email is previewed on white, like a mail app */ }
  .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
  .status { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; padding: 6px 12px; border-radius: 5px; }
  .status.ok { background: var(--ok-bg); color: var(--ok-fg); } .status.no { background: var(--err-bg); color: var(--err-fg); }
  .check { display: flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; }
  .check input { width: 18px; height: 18px; }
</style>
{{ page_head('settings', 'Settings', 'Your account' if user.role != 'admin' else 'Password, sign-in options and the welcome email.') }}

{% if user.role == 'admin' %}
<div class="card" style="max-width:720px">
  <div class="card-head"><h3>{{ icon('key') }} Change password</h3></div>
  <div class="card-body">
    <form method="post">
      <input type="hidden" name="csrf" value="{{ csrf_token }}">
      <div class="form-grid">
        <div class="field">
          <label for="curPw" class="req">Current password</label>
          <div class="input-icon">{{ icon('lock') }}<input name="current" id="curPw" type="password" required autocomplete="current-password"></div>
        </div>
        <div class="field">
          <label for="newPw" class="req">New password</label>
          <div class="input-icon">{{ icon('key') }}<input name="new" id="newPw" type="password" required autocomplete="new-password" placeholder="10+ characters, letters and a number or symbol"></div>
        </div>
      </div>
      <div class="form-actions"><button class="btn">{{ icon('save') }} Change password</button></div>
    </form>
  </div>
</div>

<div class="card" style="max-width:720px">
  <div class="card-head"><h3>{{ icon('shield') }} Sign-in options</h3></div>
  <div class="card-body">
    <form method="post" action="{{ url_for('signin_save') }}">
      <input type="hidden" name="csrf" value="{{ csrf_token }}">
      <label class="check"><input type="checkbox" name="otp" {{ 'checked' if otp_on }}><span>Let Leads and Users sign in with an emailed 6-digit code (OTP)</span></label>
      <p class="hint">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:var(--danger)">Email is not set up yet.</strong>{% endif %}</p>
      <div class="form-actions"><button class="btn">{{ icon('save') }} Save</button></div>
    </form>
  </div>
</div>

<div class="card">
  <div class="card-head"><h3>{{ icon('mail') }} Welcome email template</h3></div>
  <div class="card-body">
    <p class="lead-text">Sent automatically when you add a new Lead or User. The body is HTML.</p>
    <p style="margin-bottom:16px">
      {% if mail_ready %}<span class="status ok">{{ icon('check-circle') }} Email sending is set up. Sent from {{ mail_from }}.</span>
      {% else %}<span class="status no">{{ icon('alert') }} 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="check" style="margin-bottom:16px"><input type="checkbox" name="enabled" {{ 'checked' if enabled }}><span>Send this welcome email when a new Lead or User is added</span></label>

      <div class="field">
        <label for="subject" class="req">Subject</label>
        <div class="input-icon">{{ icon('type') }}<input name="subject" id="subject" value="{{ subject }}" maxlength="200" required></div>
      </div>

      <div class="field" style="margin-top:16px">
        <label for="body" class="req">Body (HTML)</label>
        <div class="chips" aria-label="Placeholders">
          <span class="muted" style="font-size:.85rem">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">
          <textarea name="body" id="body" class="mono" spellcheck="false" required>{{ body }}</textarea>
          <iframe class="preview" id="preview" sandbox title="Email preview"></iframe>
        </div>
        <p class="hint">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>

      <div class="form-actions">
        <button class="btn">{{ icon('save') }} Save template</button>
        <button class="btn ghost" formaction="{{ url_for('email_reset') }}" formnovalidate data-confirm="Reset the subject and body to the default template?">{{ icon('reset') }} Reset to default</button>
      </div>
      <div class="row" style="margin-top:16px;padding-top:16px;border-top:1px solid var(--line-2)">
        <div class="input-icon" style="flex:1;min-width:260px;max-width:380px">{{ icon('mail') }}<input name="to" type="email" placeholder="Send a test email to..."></div>
        <button class="btn ghost" formaction="{{ url_for('email_test') }}" formnovalidate>{{ icon('send') }} Send test email</button>
        <span class="hint" style="margin:0">Uses the template as typed above, even if not saved yet.</span>
      </div>
    </form>
  </div>
</div>

<script nonce="{{ csp_nonce }}">{% 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:560px">
  <div class="card-head"><h3>{{ icon('user') }} Your account</h3></div>
  <div class="card-body">
    <table style="width:100%;border-collapse:collapse">
      <tr><td class="muted" style="padding:8px 0;width:110px">Name</td><td><strong>{{ user.name or user.username }}</strong></td></tr>
      <tr><td class="muted" style="padding:8px 0">Email</td><td><span class="cell">{{ icon('mail') }}{{ user.email }}</span></td></tr>
      <tr><td class="muted" style="padding:8px 0">Role</td><td>{{ role_pill(user.role) }}</td></tr>
    </table>
    <p class="hint" style="margin-top:14px">You sign in with your email (Google or an emailed code), so there is no portal password to change.</p>
  </div>
</div>
{% endif %}
{% endblock %}