{% extends "cms/base.html" %}
{% block title %}Ticket #{{ ticket.ticket_number }}{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.snow.min.css">
<style>
  .section-header { padding:.75rem 1rem;border-bottom:1px solid var(--cms-border);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--cms-muted); }
  .form-table td:first-child { text-align:left; }
  .msg-meta { display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem; }
  .msg-author { font-weight:600;font-size:.9rem; }
  .msg-email { color:var(--cms-muted);font-size:.8rem;margin-left:.4rem; }
  .msg-date  { color:var(--cms-muted);font-size:.8rem; }
  .msg-body  { font-size:.9rem;line-height:1.6; }
  .msg-body p { margin:0 0 .5em; }
  .reply-bubble { padding:1rem;border-radius:8px;background:var(--cms-bg);margin-bottom:.75rem; }
  .reply-bubble:last-child { margin-bottom:0; }
  /* Quill editor customisation */
  .ql-toolbar.ql-snow { border:1px solid var(--cms-border);border-bottom:none;border-radius:6px 6px 0 0;background:#fafafa; }
  .ql-container.ql-snow { border:1px solid var(--cms-border);border-radius:0 0 6px 6px;font-size:.9rem;min-height:130px; }
  .ql-editor { min-height:130px; }
</style>
{% endblock %}

{% block cms_content %}
<div class="cms-section-header">
  <h2><a href="{% url 'cms_tickets' %}" style="color:var(--cms-muted);font-weight:400;text-decoration:none">Tickets</a> <span style="color:var(--cms-muted);font-weight:400">/</span> #{{ ticket.ticket_number }}</h2>
  <div style="display:flex;gap:.5rem">
    <a href="{% url 'cms_tickets' %}" class="btn-cms-ghost"><i class="fa-solid fa-arrow-left me-1"></i>Back</a>
  </div>
</div>

<div class="row g-3">

  <div class="col-lg-8">

    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-header" style="display:flex;align-items:center;justify-content:space-between">
        <span>{{ ticket.subject }}</span>
        <button type="button" id="translateBtn" onclick="translateTicket()"
          style="padding:.2rem .6rem;border:1px solid #0369a1;border-radius:6px;background:#f0f9ff;color:#0369a1;font-size:.68rem;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:4px">
          <i class="fa-solid fa-language"></i><span id="translateLabel">Translate to English</span>
        </button>
      </div>
      <div id="translationBox" style="display:none;padding:.75rem 1rem;background:#f0f9ff;border-bottom:1px solid #bae6fd">
        <div style="font-size:.72rem;font-weight:700;color:#0369a1;margin-bottom:.4rem;text-transform:uppercase;letter-spacing:.05em"><i class="fa-solid fa-language me-1"></i>English Translation</div>
        <div id="translationText" style="font-size:.875rem;line-height:1.6;white-space:pre-wrap;color:var(--cms-text)"></div>
      </div>
      <div style="padding:1rem">
        <div class="msg-meta">
          <div>
            <span class="msg-author">{{ ticket.sender_name }}</span>
            <span class="msg-email">{{ ticket.sender_email }}</span>
          </div>
          <span class="msg-date">{{ ticket.created_at|date:"d M Y H:i" }}</span>
        </div>
        <p class="msg-body">{{ ticket.message }}</p>
        {% if ticket.offer_amount %}
        <div style="margin-top:.75rem;display:inline-block;background:var(--cms-bg);border:1px solid var(--cms-border);border-radius:6px;padding:.4rem .8rem;font-size:.85rem">
          Offer: <strong style="color:var(--cms-accent)">£{{ ticket.offer_amount }}</strong>
        </div>
        {% endif %}
      </div>
    </div>

    {% if replies %}
    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-header">Thread</div>
      <div style="padding:1rem">
        {% for reply in replies %}
        {% if reply.author %}
        <div class="reply-bubble">
          <div class="msg-meta">
            <div>
              <span class="msg-author">{% firstof reply.author.get_full_name reply.author.username %}</span>
              {% if reply.is_internal %}<span style="font-size:.75rem;background:#fef9c3;color:#854d0e;border-radius:4px;padding:.1rem .4rem;margin-left:.4rem;font-weight:600">Internal</span>{% endif %}
              {% if reply.sent_by_email %}<span style="font-size:.75rem;color:var(--cms-muted);margin-left:.4rem"><i class="fa-solid fa-envelope me-1"></i>Emailed</span>{% endif %}
            </div>
            <span class="msg-date">{{ reply.created_at|date:"d M Y H:i" }}</span>
          </div>
          <div class="msg-body" style="margin:0">{{ reply.message|linebreaks }}</div>
        </div>
        {% else %}
        <div class="reply-bubble" style="background:#f0f9ff;border-left:3px solid #0369a1">
          <div class="msg-meta">
            <div>
              <span class="msg-author" style="color:#0369a1">{{ reply.author_name|default:ticket.sender_name }}</span>
              <span style="font-size:.75rem;background:#e0f2fe;color:#0369a1;border-radius:4px;padding:.1rem .4rem;margin-left:.4rem;font-weight:600"><i class="fa-solid fa-reply me-1"></i>Customer Reply</span>
            </div>
            <span class="msg-date">{{ reply.created_at|date:"d M Y H:i" }}</span>
          </div>
          <div class="msg-body" style="margin:0">{{ reply.message|linebreaks }}</div>
        </div>
        {% endif %}
        {% endfor %}
      </div>
    </div>
    {% endif %}

    <div class="cms-card" style="padding:0;overflow:hidden">
      <div class="section-header" style="display:flex;align-items:center;justify-content:space-between">
        <span>Reply</span>
        <button type="button" id="aiDraftBtn" onclick="requestAiDraft()"
          style="padding:.2rem .6rem;border:1px solid #ea580c;border-radius:6px;background:#fff7ed;color:#ea580c;font-size:.68rem;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:4px">
          <i class="fa-solid fa-wand-magic-sparkles"></i><span id="aiDraftLabel">Generate Draft with AI</span>
        </button>
      </div>
      <div style="padding:1rem">
        <form method="post" action="{% url 'cms_ticket_reply' ticket.pk %}" id="replyForm">
          {% csrf_token %}
          <input type="hidden" name="message" id="replyMessageInput">
          <div id="quillEditor" style="margin-bottom:.75rem"></div>
          <div style="display:flex;align-items:center;gap:.75rem;flex-wrap:wrap">
            <button type="submit" class="btn-cms" id="sendReplyBtn"><i class="fa-solid fa-paper-plane me-1"></i>Send Reply</button>
            <label style="display:flex;align-items:center;gap:.4rem;font-size:.82rem;color:var(--cms-muted);cursor:pointer">
              <input type="checkbox" name="send_email" checked style="accent-color:#033152"> Email to client
            </label>
            <label style="display:flex;align-items:center;gap:.4rem;font-size:.82rem;color:var(--cms-muted);cursor:pointer">
              <input type="checkbox" name="is_internal" style="accent-color:#033152"> Internal note
            </label>
          </div>
        </form>
      </div>
    </div>

  </div>

  <div class="col-lg-4">

    <form method="post" action="{% url 'cms_ticket_status' ticket.pk %}">
      {% csrf_token %}

      <div class="d-flex gap-2 mb-3">
        <button type="submit" class="btn-cms w-100"><i class="fa-solid fa-floppy-disk me-1"></i>Update</button>
      </div>

      <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
        <div class="section-header">Ticket Details</div>
        <table class="cms-table form-table" style="margin:0">
          <tbody>
            <tr>
              <td style="width:110px;color:var(--cms-muted);font-size:.8rem;font-weight:600;white-space:nowrap">Status</td>
              <td>
                <select name="status" style="width:100%;border:1px solid var(--cms-border);border-radius:6px;padding:.4rem .65rem;font-size:.875rem;color:var(--cms-text);background:#fff;outline:none">
                  {% for val, label in status_choices %}<option value="{{ val }}" {% if ticket.status == val %}selected{% endif %}>{{ label }}</option>{% endfor %}
                </select>
              </td>
            </tr>
            <tr>
              <td style="color:var(--cms-muted);font-size:.8rem;font-weight:600;white-space:nowrap">Priority</td>
              <td>
                <select name="priority" style="width:100%;border:1px solid var(--cms-border);border-radius:6px;padding:.4rem .65rem;font-size:.875rem;color:var(--cms-text);background:#fff;outline:none">
                  {% for val, label in priority_choices %}<option value="{{ val }}" {% if ticket.priority == val %}selected{% endif %}>{{ label }}</option>{% endfor %}
                </select>
              </td>
            </tr>
            <tr>
              <td style="color:var(--cms-muted);font-size:.8rem;font-weight:600;white-space:nowrap">Assigned To</td>
              <td>
                <select name="assigned_to" style="width:100%;border:1px solid var(--cms-border);border-radius:6px;padding:.4rem .65rem;font-size:.875rem;color:var(--cms-text);background:#fff;outline:none">
                  <option value="">Unassigned</option>
                  {% for u in cms_users %}<option value="{{ u.pk }}" {% if ticket.assigned_to_id == u.pk %}selected{% endif %}>{{ u.get_full_name|default:u.username }}</option>{% endfor %}
                </select>
              </td>
            </tr>
            <tr>
              <td style="color:var(--cms-muted);font-size:.8rem;font-weight:600;white-space:nowrap">Source</td>
              <td style="font-size:.85rem;color:var(--cms-muted)">{{ ticket.get_source_display }}</td>
            </tr>
            <tr>
              <td style="color:var(--cms-muted);font-size:.8rem;font-weight:600;white-space:nowrap">Category</td>
              <td style="font-size:.85rem;color:var(--cms-muted)">{{ ticket.category|default:"General" }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </form>

    <div class="cms-card" style="padding:0;overflow:hidden">
      <div class="section-header">Contact Info</div>
      <table class="cms-table form-table" style="margin:0">
        <tbody>
          <tr>
            <td style="width:80px;color:var(--cms-muted);font-size:.8rem;font-weight:600">Name</td>
            <td style="font-size:.875rem">{{ ticket.sender_name }}</td>
          </tr>
          <tr>
            <td style="color:var(--cms-muted);font-size:.8rem;font-weight:600">Email</td>
            <td style="font-size:.875rem"><a href="mailto:{{ ticket.sender_email }}" style="color:var(--cms-accent)">{{ ticket.sender_email }}</a></td>
          </tr>
          {% if ticket.sender_phone %}
          <tr>
            <td style="color:var(--cms-muted);font-size:.8rem;font-weight:600">Phone</td>
            <td style="font-size:.875rem">{{ ticket.sender_phone }}</td>
          </tr>
          {% endif %}
          {% if ticket.sender_company %}
          <tr>
            <td style="color:var(--cms-muted);font-size:.8rem;font-weight:600">Company</td>
            <td style="font-size:.875rem">{{ ticket.sender_company }}</td>
          </tr>
          {% endif %}
        </tbody>
      </table>
      {% if ticket.auction_listing %}
      <div style="padding:.6rem 1rem;border-top:1px solid var(--cms-border);font-size:.8rem;color:var(--cms-muted)">
        <i class="fa-solid {{ ticket.auction_listing.type_icon }} me-1"></i>{{ ticket.auction_listing.name }}
      </div>
      {% endif %}
    </div>

    {% if ticket.sender_email %}
      {% if sender_blocked %}
      <span class="btn-cms-ghost w-100" style="cursor:default;display:block;text-align:center;color:#b91c1c;border-color:#fecaca;background:#fef2f2;margin-top:.75rem">
        <i class="fa-solid fa-ban me-1"></i>Sender blocked
      </span>
      {% else %}
      <form method="post" action="{% url 'cms_ticket_block_sender' ticket.pk %}" class="d-flex gap-2 mt-3"
            onsubmit="return confirm('Block {{ ticket.sender_email|escapejs }}? Every ticket from this address is closed and archived, and they cannot open a new one or reach chat.')">
        {% csrf_token %}
        <button type="submit" class="btn-cms-ghost w-100" style="justify-content:center;color:#b45309;border-color:#fde68a">
          <i class="fa-solid fa-ban me-1"></i>Block sender
        </button>
      </form>
      {% endif %}
    {% endif %}

    <div class="d-flex gap-2 mt-3">
      <a href="{% url 'cms_tickets' %}?pending_delete={{ ticket.pk }}" class="btn-cms-danger w-100" style="justify-content:center">
        <i class="fa-solid fa-trash me-1"></i>Delete Ticket
      </a>
    </div>

  </div>

</div>
{% endblock %}

{% block extra_js %}
<script data-cfasync="false" src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.min.js"></script>
<script data-cfasync="false">
// Initialise Quill. Guarded so a second run cannot replace the live editor
// and silently discard whatever is in it, which is what made an AI draft
// appear and then vanish.
var quill = window.__ftQuill || new Quill('#quillEditor', {
  theme: 'snow',
  placeholder: 'Write your reply…',
  modules: {
    toolbar: [
      ['bold', 'italic', 'underline'],
      [{ list: 'ordered' }, { list: 'bullet' }],
      ['link'],
      ['clean']
    ]
  }
});
window.__ftQuill = quill;

// On form submit, push editor plain text to hidden input
document.getElementById('replyForm').addEventListener('submit', function (e) {
  var text = quill.getText().trim();
  if (!text) {
    e.preventDefault();
    quill.focus();
    return;
  }
  document.getElementById('replyMessageInput').value = quill.getText();
});

// Translate
function translateTicket() {
  var btn = document.getElementById('translateBtn');
  var label = document.getElementById('translateLabel');
  var box = document.getElementById('translationBox');
  var text = document.getElementById('translationText');
  if (!btn) return;
  btn.disabled = true;
  label.textContent = 'Translating…';

  var csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
  fetch('{% url "cms_ticket_translate" ticket.pk %}', {
    method: 'POST',
    headers: { 'X-CSRFToken': csrfToken, 'Content-Type': 'application/json' },
    body: JSON.stringify({})
  })
  .then(function(r) { return r.json(); })
  .then(function(data) {
    if (data.translated) {
      text.textContent = data.translated;
      box.style.display = 'block';
      label.textContent = 'Hide Translation';
      btn.onclick = function() {
        box.style.display = box.style.display === 'none' ? 'block' : 'none';
        label.textContent = box.style.display === 'none' ? 'Translate to English' : 'Hide Translation';
        btn.disabled = false;
      };
    } else {
      alert('Translation failed: ' + (data.error || 'Unknown error'));
    }
  })
  .catch(function(err) { alert('Request failed: ' + err); })
  .finally(function() { btn.disabled = false; });
}

// AI Draft
function requestAiDraft() {
  var btn = document.getElementById('aiDraftBtn');
  var label = document.getElementById('aiDraftLabel');
  btn.disabled = true;
  label.textContent = 'Drafting…';

  var csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
  fetch('{% url "cms_ticket_ai_draft" ticket.pk %}', {
    method: 'POST',
    headers: { 'X-CSRFToken': csrfToken, 'Content-Type': 'application/json' },
    body: JSON.stringify({})
  })
  .then(function (r) { return r.json(); })
  .then(function (data) {
    if (data.draft) {
      quill.setText(data.draft);
      quill.setSelection(quill.getLength(), 0);
    } else {
      alert('AI draft failed: ' + (data.error || 'Unknown error'));
    }
  })
  .catch(function (err) {
    alert('Request failed: ' + err);
  })
  .finally(function () {
    btn.disabled = false;
    label.textContent = 'Generate Draft with AI';
  });
}
</script>
{% endblock %}