<?php
$mailboxes = is_array($mailboxes ?? null) ? $mailboxes : [];
$em = is_array($editMailbox ?? null) ? $editMailbox : null;
$isEdit = $em !== null;
?>
<link href="https://cdn.quilljs.com/2.0.3/quill.snow.css" rel="stylesheet">
<style>
#js-header-editor .ql-editor, #js-footer-editor .ql-editor { min-height: 80px; }
.html-source-toggle { margin-top: 4px; display: flex; justify-content: flex-end; }
.html-source-toggle button { font-size: 11px; padding: 2px 8px; cursor: pointer; background: #f5f5f5; border: 1px solid #ccc; border-radius: 3px; }
.html-source-toggle button.active { background: #e0e0e0; font-weight: 600; }
.html-source-area { width: 100%; min-height: 120px; font-family: monospace; font-size: 12px; border: 1px solid #ccc; padding: 8px; box-sizing: border-box; display: none; }
</style>

<section class="card">
  <h2 class="section-title">Skrzynki pocztowe</h2>
  <p class="muted mt-12">Konfiguracja skrzynek SMTP do wysylki wiadomosci e-mail.</p>

  <?php if (!empty($errorMessage)): ?>
    <div class="alert alert--danger mt-12" role="alert"><?= $e((string) $errorMessage) ?></div>
  <?php endif; ?>
  <?php if (!empty($successMessage)): ?>
    <div class="alert alert--success mt-12" role="status"><?= $e((string) $successMessage) ?></div>
  <?php endif; ?>
</section>

<section class="card mt-16">
  <h3 class="section-title">Lista skrzynek</h3>

  <?php if (count($mailboxes) === 0): ?>
    <p class="muted mt-12">Brak skrzynek pocztowych. Dodaj pierwsza skrzynke ponizej.</p>
  <?php else: ?>
    <div class="table-wrap mt-12">
      <table class="table">
        <thead>
          <tr>
            <th>Nazwa</th>
            <th>Serwer</th>
            <th>Port</th>
            <th>E-mail nadawcy</th>
            <th>Status</th>
            <th>Akcje</th>
          </tr>
        </thead>
        <tbody>
          <?php foreach ($mailboxes as $mb): ?>
            <tr>
              <td>
                <?= $e((string) ($mb['name'] ?? '')) ?>
                <?php if (((int) ($mb['is_default'] ?? 0)) === 1): ?>
                  <span class="badge badge--info" style="margin-left:4px">Domyslna</span>
                <?php endif; ?>
              </td>
              <td><?= $e((string) ($mb['smtp_host'] ?? '')) ?></td>
              <td><?= (int) ($mb['smtp_port'] ?? 0) ?></td>
              <td><?= $e((string) ($mb['sender_email'] ?? '')) ?></td>
              <td>
                <?php if (((int) ($mb['is_active'] ?? 0)) === 1): ?>
                  <span class="badge badge--success">Aktywna</span>
                <?php else: ?>
                  <span class="badge badge--muted">Nieaktywna</span>
                <?php endif; ?>
              </td>
              <td style="white-space:nowrap">
                <a href="/settings/email-mailboxes?edit=<?= (int) ($mb['id'] ?? 0) ?>" class="btn btn--sm btn--secondary">Edytuj</a>
                <form action="/settings/email-mailboxes/toggle" method="post" style="display:inline">
                  <input type="hidden" name="_token" value="<?= $e($csrfToken ?? '') ?>">
                  <input type="hidden" name="id" value="<?= (int) ($mb['id'] ?? 0) ?>">
                  <button type="submit" class="btn btn--sm btn--secondary">
                    <?= ((int) ($mb['is_active'] ?? 0)) === 1 ? 'Dezaktywuj' : 'Aktywuj' ?>
                  </button>
                </form>
                <form action="/settings/email-mailboxes/delete" method="post" style="display:inline" class="js-confirm-delete">
                  <input type="hidden" name="_token" value="<?= $e($csrfToken ?? '') ?>">
                  <input type="hidden" name="id" value="<?= (int) ($mb['id'] ?? 0) ?>">
                  <button type="button" class="btn btn--sm btn--danger js-delete-btn">Usun</button>
                </form>
              </td>
            </tr>
          <?php endforeach; ?>
        </tbody>
      </table>
    </div>
  <?php endif; ?>
</section>

<section class="card mt-16">
  <h3 class="section-title"><?= $isEdit ? 'Edytuj skrzynke pocztowa' : 'Dodaj skrzynke pocztowa' ?></h3>

  <form action="/settings/email-mailboxes/save" method="post" novalidate class="mt-12" id="js-mailbox-form">
    <input type="hidden" name="_token" value="<?= $e($csrfToken ?? '') ?>">
    <?php if ($isEdit): ?>
      <input type="hidden" name="id" value="<?= (int) ($em['id'] ?? 0) ?>">
    <?php endif; ?>

    <div class="form-grid-2">
      <label class="form-field">
        <span class="field-label">Nazwa *</span>
        <input class="form-control" type="text" name="name" maxlength="100" required value="<?= $e((string) ($em['name'] ?? '')) ?>" placeholder="np. Glowna skrzynka">
      </label>
      <label class="form-field">
        <span class="field-label">E-mail nadawcy *</span>
        <input class="form-control" type="email" name="sender_email" maxlength="255" required value="<?= $e((string) ($em['sender_email'] ?? '')) ?>" placeholder="noreply@firma.pl">
      </label>
    </div>

    <div class="form-grid-2 mt-0">
      <label class="form-field">
        <span class="field-label">Nazwa nadawcy</span>
        <input class="form-control" type="text" name="sender_name" maxlength="200" value="<?= $e((string) ($em['sender_name'] ?? '')) ?>" placeholder="np. Sklep XYZ">
      </label>
      <div class="form-field"></div>
    </div>

    <h4 class="section-title mt-16">Ustawienia SMTP</h4>

    <div class="form-grid-3 mt-12">
      <label class="form-field">
        <span class="field-label">Serwer SMTP *</span>
        <input class="form-control" type="text" name="smtp_host" maxlength="255" required value="<?= $e((string) ($em['smtp_host'] ?? '')) ?>" placeholder="smtp.firma.pl">
      </label>
      <label class="form-field">
        <span class="field-label">Port *</span>
        <input class="form-control" type="number" name="smtp_port" min="1" max="65535" required value="<?= (int) ($em['smtp_port'] ?? 587) ?>">
      </label>
      <label class="form-field">
        <span class="field-label">Szyfrowanie</span>
        <select class="form-control" name="smtp_encryption">
          <option value="tls"<?= ((string) ($em['smtp_encryption'] ?? 'tls')) === 'tls' ? ' selected' : '' ?>>TLS (STARTTLS)</option>
          <option value="ssl"<?= ((string) ($em['smtp_encryption'] ?? '')) === 'ssl' ? ' selected' : '' ?>>SSL</option>
          <option value="none"<?= ((string) ($em['smtp_encryption'] ?? '')) === 'none' ? ' selected' : '' ?>>Brak</option>
        </select>
      </label>
    </div>

    <div class="form-grid-2 mt-0">
      <label class="form-field">
        <span class="field-label">Uzytkownik SMTP *</span>
        <input class="form-control" type="text" name="smtp_username" maxlength="255" required value="<?= $e((string) ($em['smtp_username'] ?? '')) ?>">
      </label>
      <label class="form-field">
        <span class="field-label">Haslo SMTP <?= $isEdit ? '' : '*' ?></span>
        <input class="form-control" type="password" name="smtp_password" maxlength="255" <?= $isEdit ? '' : 'required' ?> placeholder="<?= $isEdit ? '(bez zmian)' : '' ?>">
        <?php if ($isEdit): ?>
          <small class="field-hint">Pozostaw puste, aby zachowac aktualne haslo</small>
        <?php endif; ?>
      </label>
    </div>

    <div class="form-grid-2 mt-0">
      <label class="form-field" style="display:flex;align-items:center;gap:6px;flex-direction:row">
        <input type="checkbox" name="is_default" value="1"<?= ((int) ($em['is_default'] ?? 0)) === 1 ? ' checked' : '' ?>>
        <span class="field-label" style="margin:0">Domyslna skrzynka</span>
      </label>
      <label class="form-field" style="display:flex;align-items:center;gap:6px;flex-direction:row">
        <input type="checkbox" name="is_active" value="1"<?= $isEdit ? (((int) ($em['is_active'] ?? 0)) === 1 ? ' checked' : '') : ' checked' ?>>
        <span class="field-label" style="margin:0">Aktywna</span>
      </label>
    </div>

    <h4 class="section-title mt-16">Szablon wiadomosci</h4>
    <p class="muted mt-4" style="font-size:12px">Opcjonalnie. Naglowek i stopka beda dolaczane do kazdego e-maila wysylanego z tej skrzynki.</p>

    <div class="form-field mt-12">
      <span class="field-label">Naglowek (header)</span>
      <div id="js-header-editor" style="min-height:80px"></div>
      <textarea id="js-header-source" class="html-source-area"></textarea>
      <div class="html-source-toggle"><button type="button" class="js-toggle-html" data-editor="header">&lt;/&gt; HTML</button> <button type="button" class="js-preview-html" data-editor="header">Podglad</button></div>
      <input type="hidden" name="header_html" id="js-header-html" value="">
    </div>

    <div class="form-field mt-12">
      <span class="field-label">Stopka (footer)</span>
      <div id="js-footer-editor" style="min-height:80px"></div>
      <textarea id="js-footer-source" class="html-source-area"></textarea>
      <div class="html-source-toggle"><button type="button" class="js-toggle-html" data-editor="footer">&lt;/&gt; HTML</button> <button type="button" class="js-preview-html" data-editor="footer">Podglad</button></div>
      <input type="hidden" name="footer_html" id="js-footer-html" value="">
    </div>

    <div class="form-actions mt-16">
      <button type="submit" class="btn btn--primary"><?= $isEdit ? 'Zapisz zmiany' : 'Dodaj skrzynke' ?></button>
      <button type="button" class="btn btn--secondary" id="js-test-connection">Testuj polaczenie</button>
      <?php if ($isEdit): ?>
        <a href="/settings/email-mailboxes" class="btn btn--secondary">Anuluj</a>
      <?php endif; ?>
    </div>
  </form>

  <div id="js-test-result" class="mt-12" style="display:none"></div>
</section>

<div id="js-html-preview-modal" style="display:none; position:fixed; top:0; left:0; right:0; bottom:0; z-index:9999; background:rgba(0,0,0,0.5);">
  <div style="position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:700px; max-width:90vw; max-height:80vh; background:#fff; border-radius:6px; box-shadow:0 4px 24px rgba(0,0,0,0.2); display:flex; flex-direction:column;">
    <div style="display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid #eee;">
      <strong id="js-preview-title">Podglad</strong>
      <button type="button" id="js-preview-close" style="border:none; background:none; font-size:20px; cursor:pointer; padding:0 4px;">&times;</button>
    </div>
    <div style="flex:1; overflow:auto; padding:16px;">
      <iframe id="js-preview-iframe" style="width:100%; min-height:300px; border:none;"></iframe>
    </div>
  </div>
</div>

<script src="https://cdn.quilljs.com/2.0.3/quill.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
  // --- Quill editors for header/footer ---
  var quillToolbar = [
    [{ header: [1, 2, 3, false] }],
    ['bold', 'italic', 'underline'],
    [{ color: [] }, { background: [] }],
    [{ align: [] }],
    [{ list: 'ordered' }, { list: 'bullet' }],
    ['link', 'image'],
    ['clean']
  ];

  var headerEditor = new Quill('#js-header-editor', {
    theme: 'snow',
    modules: { toolbar: quillToolbar },
    placeholder: 'Naglowek wiadomosci (np. logo, nazwa firmy)...'
  });

  var footerEditor = new Quill('#js-footer-editor', {
    theme: 'snow',
    modules: { toolbar: quillToolbar },
    placeholder: 'Stopka wiadomosci (np. dane kontaktowe, adres)...'
  });

  // --- HTML source toggle ---
  var editors = { header: headerEditor, footer: footerEditor };
  var sourceMode = { header: false, footer: false };
  var rawHtml = { header: '', footer: '' };

  function isRichHtml(html) {
    if (!html) return false;
    return /<(div|table|td|tr|meta|img)\b[^>]*style=/i.test(html) || /<meta\b/i.test(html);
  }

  function activateSourceMode(key) {
    var quillContainer = document.getElementById('js-' + key + '-editor');
    var sourceArea = document.getElementById('js-' + key + '-source');
    var toolbar = quillContainer.parentNode.querySelector('.ql-toolbar');
    var btn = document.querySelector('.js-toggle-html[data-editor="' + key + '"]');
    sourceArea.value = rawHtml[key];
    quillContainer.style.display = 'none';
    if (toolbar) toolbar.style.display = 'none';
    sourceArea.style.display = 'block';
    if (btn) btn.classList.add('active');
    sourceMode[key] = true;
  }

  function activateQuillMode(key) {
    var quillContainer = document.getElementById('js-' + key + '-editor');
    var sourceArea = document.getElementById('js-' + key + '-source');
    var toolbar = quillContainer.parentNode.querySelector('.ql-toolbar');
    var btn = document.querySelector('.js-toggle-html[data-editor="' + key + '"]');
    rawHtml[key] = sourceArea.value;
    editors[key].root.innerHTML = rawHtml[key] || '<p><br></p>';
    sourceArea.style.display = 'none';
    quillContainer.style.display = '';
    if (toolbar) toolbar.style.display = '';
    if (btn) btn.classList.remove('active');
    sourceMode[key] = false;
  }

  // Load existing HTML — if it contains rich HTML (inline styles, divs), start in source mode
  <?php if ($isEdit && isset($em['header_html']) && $em['header_html'] !== null && $em['header_html'] !== ''): ?>
  rawHtml.header = <?= json_encode((string) $em['header_html'], JSON_UNESCAPED_UNICODE) ?>;
  if (isRichHtml(rawHtml.header)) {
    activateSourceMode('header');
  } else {
    headerEditor.root.innerHTML = rawHtml.header;
  }
  <?php endif; ?>
  <?php if ($isEdit && isset($em['footer_html']) && $em['footer_html'] !== null && $em['footer_html'] !== ''): ?>
  rawHtml.footer = <?= json_encode((string) $em['footer_html'], JSON_UNESCAPED_UNICODE) ?>;
  if (isRichHtml(rawHtml.footer)) {
    activateSourceMode('footer');
  } else {
    footerEditor.root.innerHTML = rawHtml.footer;
  }
  <?php endif; ?>

  document.querySelectorAll('.js-toggle-html').forEach(function(btn) {
    btn.addEventListener('click', function() {
      var key = this.getAttribute('data-editor');
      if (!sourceMode[key]) {
        var quill = editors[key];
        var html = quill.root.innerHTML === '<p><br></p>' ? '' : quill.root.innerHTML;
        rawHtml[key] = rawHtml[key] && html === '' ? rawHtml[key] : html;
        activateSourceMode(key);
      } else {
        activateQuillMode(key);
      }
    });
  });

  // --- Preview ---
  var previewModal = document.getElementById('js-html-preview-modal');
  var previewIframe = document.getElementById('js-preview-iframe');
  var previewTitle = document.getElementById('js-preview-title');

  function getEditorHtml(key) {
    if (sourceMode[key]) {
      return document.getElementById('js-' + key + '-source').value.trim();
    }
    var html = editors[key].root.innerHTML;
    return html === '<p><br></p>' ? '' : html;
  }

  document.querySelectorAll('.js-preview-html').forEach(function(btn) {
    btn.addEventListener('click', function() {
      var key = this.getAttribute('data-editor');
      var label = key === 'header' ? 'Naglowek (header)' : 'Stopka (footer)';
      var html = getEditorHtml(key);
      if (!html) {
        if (window.OrderProAlerts && window.OrderProAlerts.warning) {
          window.OrderProAlerts.warning('Podglad', 'Brak tresci do wyswietlenia.');
        }
        return;
      }
      previewTitle.textContent = 'Podglad: ' + label;
      previewModal.style.display = 'block';
      var doc = previewIframe.contentDocument || previewIframe.contentWindow.document;
      doc.open();
      doc.write('<!DOCTYPE html><html><head><meta charset="utf-8"><style>body{margin:0;padding:16px;font-family:Arial,Helvetica,sans-serif;font-size:14px;color:#000;}</style></head><body>' + html + '</body></html>');
      doc.close();
      previewIframe.style.height = '0';
      setTimeout(function() {
        var h = doc.body.scrollHeight + 40;
        previewIframe.style.height = Math.min(Math.max(h, 150), 500) + 'px';
      }, 50);
    });
  });

  document.getElementById('js-preview-close').addEventListener('click', function() {
    previewModal.style.display = 'none';
  });
  previewModal.addEventListener('click', function(e) {
    if (e.target === previewModal) previewModal.style.display = 'none';
  });

  var mailboxForm = document.getElementById('js-mailbox-form');
  mailboxForm.addEventListener('submit', function() {
    var headerVal, footerVal;
    if (sourceMode.header) {
      headerVal = document.getElementById('js-header-source').value.trim();
    } else {
      headerVal = headerEditor.root.innerHTML === '<p><br></p>' ? '' : headerEditor.root.innerHTML;
    }
    if (sourceMode.footer) {
      footerVal = document.getElementById('js-footer-source').value.trim();
    } else {
      footerVal = footerEditor.root.innerHTML === '<p><br></p>' ? '' : footerEditor.root.innerHTML;
    }
    document.getElementById('js-header-html').value = headerVal;
    document.getElementById('js-footer-html').value = footerVal;
  });

  // --- Delete confirm ---
  document.querySelectorAll('.js-delete-btn').forEach(function(btn) {
    btn.addEventListener('click', function() {
      var form = this.closest('form');
      if (window.OrderProAlerts && window.OrderProAlerts.confirm) {
        window.OrderProAlerts.confirm(
          'Usuwanie skrzynki',
          'Czy na pewno chcesz usunac te skrzynke pocztowa?',
          function() { form.submit(); }
        );
      } else {
        if (confirm('Czy na pewno chcesz usunac te skrzynke pocztowa?')) {
          form.submit();
        }
      }
    });
  });

  var testBtn = document.getElementById('js-test-connection');
  var resultDiv = document.getElementById('js-test-result');
  if (testBtn) {
    testBtn.addEventListener('click', function() {
      var form = document.getElementById('js-mailbox-form');
      var formData = new FormData(form);

      testBtn.disabled = true;
      testBtn.textContent = 'Testowanie...';
      resultDiv.style.display = 'none';

      fetch('/settings/email-mailboxes/test', {
        method: 'POST',
        body: formData
      })
      .then(function(response) { return response.json(); })
      .then(function(data) {
        resultDiv.style.display = 'block';
        if (data.success) {
          resultDiv.className = 'mt-12 alert alert--success';
        } else {
          resultDiv.className = 'mt-12 alert alert--danger';
        }
        resultDiv.textContent = data.message || 'Brak odpowiedzi';
      })
      .catch(function(err) {
        resultDiv.style.display = 'block';
        resultDiv.className = 'mt-12 alert alert--danger';
        resultDiv.textContent = 'Blad polaczenia: ' + err.message;
      })
      .finally(function() {
        testBtn.disabled = false;
        testBtn.textContent = 'Testuj polaczenie';
      });
    });
  }
});
</script>
