{% extends '_admin/layout/base.html' %}

{% block content %}
<main class="app-main py-4">
  <div class="container-fluid px-3 px-md-4">

    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-4">
      <div>
        <h1 class="h3 mb-1">
          <i class="bi bi-envelope-paper me-1"></i>
          {{ translate('email_client') }}
        </h1>
      </div>

      <div class="mt-3 mt-md-0">
        <a
          href="{{ admin_interface.url_for('_AdminController.dashboard') }}"
          class="btn btn-outline-secondary"
        >
          <i class="bi bi-arrow-left me-1"></i>
          {{ translate('back_to_dashboard') }}
        </a>
      </div>
    </div>

    <div class="row justify-content-center">
      <div class="col-12 col-xl-8">

        <div class="card content-card shadow-sm">
          <div class="card-header bg-white">
            <h2 class="h5 mb-0">
              <i class="bi bi-pencil-square me-1"></i>
              {{ translate('email_message') }}
            </h2>
          </div>

          <div class="card-body p-4">
            <form
              id="email-form"
              method="post"
              action="{{ admin_interface.url_for('_AdminEmailClientController.send_email') }}"
              enctype="multipart/form-data"
            >

              <div
                id="email-error-container"
                class="alert alert-danger d-none"
                role="alert"
              ></div>

              <div
                id="email-success-container"
                class="alert alert-success d-none"
                role="alert"
              ></div>

              <div class="mb-3">
                <label for="sender-email" class="form-label">
                  {{ translate('sender_email') }}
                  <span class="text-danger">*</span>
                </label>

                <div class="input-group">
                  <span class="input-group-text">
                    <i class="bi bi-person-badge"></i>
                  </span>

                  <select
                    id="sender-email"
                    name="sender_email"
                    class="form-select"
                    required
                  >
                    <option value="">{{ translate('select_sender_email') }}</option>

                    {% for client in clients %}
                      <option value="{{ client.configs.SENDER_NAME_OR_ADDRESS }}">
                        {{ client.configs.SENDER_NAME_OR_ADDRESS }}
                      </option>
                    {% else %}
                      <option value="" disabled>
                        {{ translate('no_sender_emails_available') }}
                      </option>
                    {% endfor %}
                  </select>
                </div>
              </div>

              <div class="mb-3">
                <label for="recipients" class="form-label">
                  {{ translate('recipients') }}
                  <span class="text-danger">*</span>
                </label>

                <div class="input-group">
                  <span class="input-group-text">
                    <i class="bi bi-type"></i>
                  </span>

                  <input
                    type="text"
                    id="recipients"
                    name="recipients"
                    class="form-control"
                    placeholder="{{ translate('enter_recipients') }}"
                    required
                  >
                </div>
              </div>

              <div class="mb-3">
                <label for="email-subject" class="form-label">
                  {{ translate('subject') }}
                  <span class="text-danger">*</span>
                </label>

                <div class="input-group">
                  <span class="input-group-text">
                    <i class="bi bi-type"></i>
                  </span>

                  <input
                    type="text"
                    id="email-subject"
                    name="subject"
                    class="form-control"
                    placeholder="{{ translate('enter_email_subject') }}"
                    required
                  >
                </div>
              </div>

              <div class="mb-3">
                <label for="email-attachment" class="form-label">
                  {{ translate('attachment') }}
                </label>

                <div class="input-group">
                  <span class="input-group-text">
                    <i class="bi bi-paperclip"></i>
                  </span>

                  <input
                    type="file"
                    id="email-attachment"
                    name="attachment"
                    class="form-control"
                    multiple
                  >
                </div>

                <div class="form-text">
                  {{ translate('optional_file_attachment') }}
                </div>
              </div>

              <div class="mb-4">
                <label for="email-message" class="form-label">
                  {{ translate('message') }}
                  <span class="text-danger">*</span>
                </label>

                <textarea
                  id="email-message"
                  name="message"
                  class="form-control"
                  rows="10"
                  placeholder="{{ translate('write_email_message_here') }}"
                  required
                ></textarea>
              </div>

              <div class="d-flex justify-content-end gap-2">
                <button
                  type="reset"
                  class="btn btn-outline-secondary"
                >
                  <i class="bi bi-x-circle me-1"></i>
                  {{ translate('clear') }}
                </button>

                <button
                  type="submit"
                  class="btn btn-primary"
                >
                  <i class="bi bi-send me-1"></i>
                  {{ translate('send_email') }}
                </button>
              </div>

            </form>
          </div>
        </div>

      </div>
    </div>

  </div>
</main>
{% endblock %}

{% block js %}
<script>
  const emailForm = document.getElementById("email-form");
  const senderEmailInput = document.getElementById("sender-email");
  const recipientsInput = document.getElementById("recipients");
  const subjectInput = document.getElementById("email-subject");
  const attachmentInput = document.getElementById("email-attachment");
  const messageInput = document.getElementById("email-message");

  const emailErrorContainer = document.getElementById("email-error-container");
  const emailSuccessContainer = document.getElementById("email-success-container");

  const recipientsQueryUrl = "{{ admin_url_for('_AdminEmailClientController.email_query_recipients') }}";

  const recipientsSuggestions = document.createElement("div");
  recipientsSuggestions.className = "list-group position-absolute shadow-sm d-none";
  recipientsSuggestions.style.zIndex = "1000";
  recipientsSuggestions.style.width = "100%";

  const recipientsInputGroup = recipientsInput.closest(".input-group");
  recipientsInputGroup.parentElement.style.position = "relative";
  recipientsInputGroup.parentElement.appendChild(recipientsSuggestions);

  let recipientsQueryTimeout = null;

  function clearEmailMessages() {
    emailErrorContainer.textContent = "";
    emailErrorContainer.classList.add("d-none");

    emailSuccessContainer.textContent = "";
    emailSuccessContainer.classList.add("d-none");
  }

  function showEmailError(message) {
    emailErrorContainer.textContent = message || "{{ translate('something_went_wrong') }}";
    emailErrorContainer.classList.remove("d-none");
    emailSuccessContainer.classList.add("d-none");
  }

  function showEmailSuccess(message) {
    emailSuccessContainer.textContent = message || "{{ translate('email_sent_successfully') }}";
    emailSuccessContainer.classList.remove("d-none");
    emailErrorContainer.classList.add("d-none");
  }

  async function getErrorMessage(response, fallbackMessage = "{{ translate('something_went_wrong') }}") {
    try {
      const data = await response.json();

      if (data.data && Array.isArray(data.data)) {
        return `${data.message || fallbackMessage}: ${JSON.stringify(data.data)}`;
      }

      return data.message || data.error || fallbackMessage;
    } catch {
      return fallbackMessage;
    }
  }

  function parseRecipients(value) {
    return value
      .split(/[;,]/)
      .map(item => item.trim())
      .filter(Boolean);
  }

  function getCurrentRecipientQuery() {
    const parts = recipientsInput.value.split(/[;,]/);
    return parts[parts.length - 1].trim();
  }

  function replaceCurrentRecipient(value) {
    const parts = recipientsInput.value.split(/[;,]/);
    parts[parts.length - 1] = ` ${value}`;

    recipientsInput.value = parts
      .map(item => item.trim())
      .filter(Boolean)
      .join(", ") + ", ";

    recipientsInput.focus();
  }

  function hideRecipientSuggestions() {
    recipientsSuggestions.innerHTML = "";
    recipientsSuggestions.classList.add("d-none");
  }

  function showRecipientSuggestions(items) {
    recipientsSuggestions.innerHTML = "";

    if (!items || Object.keys(items).length === 0) {
      hideRecipientSuggestions();
      return;
    }

    for(const [name, email] of Object.entries(items)){
      const button = document.createElement("button");
      button.type = "button";
      button.className = "list-group-item list-group-item-action";
      button.innerHTML = `
        <div class="fw-semibold">${name}</div>
        <div class="small text-muted">${email}</div>
      `;

      button.addEventListener("click", () => {
        replaceCurrentRecipient(email);
        hideRecipientSuggestions();
      });
      recipientsSuggestions.appendChild(button);
    }

    recipientsSuggestions.classList.remove("d-none");
  }

  async function queryRecipients() {
    const senderEmail = senderEmailInput.value;
    const query = getCurrentRecipientQuery();

    if (!senderEmail || query.length < 2) {
      hideRecipientSuggestions();
      return;
    }

    try {
      const response = await fetch(recipientsQueryUrl, {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify({
          client: senderEmail,
          query: query
        })
      });

      if (!response.ok) {
        hideRecipientSuggestions();
        return;
      }

      const payload = await response.json();
      showRecipientSuggestions(payload.data || {});
    } catch {
      hideRecipientSuggestions();
    }
  }

  recipientsInput.addEventListener("input", () => {
    clearTimeout(recipientsQueryTimeout);

    recipientsQueryTimeout = setTimeout(() => {
      queryRecipients();
    }, 300);
  });

  recipientsInput.addEventListener("blur", () => {
    setTimeout(() => {
      hideRecipientSuggestions();
    }, 150);
  });

  senderEmailInput.addEventListener("change", () => {
    hideRecipientSuggestions();
  });

  emailForm.addEventListener("submit", async (event) => {
    event.preventDefault();
    clearEmailMessages();

    if (!emailForm.checkValidity()) {
      emailForm.reportValidity();
      return;
    }

    const recipients = parseRecipients(recipientsInput.value);

    if (recipients.length === 0) {
      showEmailError("{{ translate('please_enter_at_least_one_recipient') }}");
      return;
    }

    const submitBtn = emailForm.querySelector('button[type="submit"]');
    const originalSubmitText = submitBtn.innerHTML;

    submitBtn.disabled = true;
    submitBtn.innerHTML = `
      <span class="spinner-border spinner-border-sm me-1" aria-hidden="true"></span>
      {{ translate('sending') }}
    `;

    try {
      const formData = new FormData();

      formData.append("sender_email", senderEmailInput.value);
      formData.append("subject", subjectInput.value);
      formData.append("message", messageInput.value);
      formData.append("recipients", recipients);


      for (const file of attachmentInput.files) {
        formData.append("attachment", file);
      }

      const response = await fetch(emailForm.action && emailForm.action !== "#"
        ? emailForm.action
        : window.location.href, {
        method: "POST",
        body: formData
      });

      if (!response.ok) {
        const message = await getErrorMessage(response, "{{ translate('failed_to_send_email') }}");
        showEmailError(message);
        return;
      }

      const payload = await response.json();

      showEmailSuccess(payload.message || "{{ translate('email_sent_successfully') }}");
      emailForm.reset();
      hideRecipientSuggestions();
    } catch {
      showEmailError("{{ translate('network_error_failed_to_send_email') }}");
    } finally {
      submitBtn.disabled = false;
      submitBtn.innerHTML = originalSubmitText;
    }
  });
</script>
{% endblock %}