<?php
require __DIR__ . '/../_boot.php';
require __DIR__ . '/../partials/nav.php';

$canManageWhatsAppPresets = $user && (
    \App\Core\Auth::hasPermission('notifications.manage', $user)
    || \App\Core\Auth::hasPermission('walks.manage', $user)
    || \App\Core\Auth::hasPermission('walks.edit', $user)
);
if (!$canManageWhatsAppPresets) {
    header('Location: dashboard.php');
    exit;
}
?>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>WhatsApp Message Presets | Pyrk Admin</title>
  <link rel="stylesheet" href="../assets/css/app.css">
  <link rel="stylesheet" href="../assets/css/admin_whatsapp_presets.css?v=1">
</head>
<body>
<?php pyrk_render_nav('admin'); ?>
<main class="container enterprise-page whatsapp-preset-page">
  <section class="page-hero admin-hero enterprise-hero whatsapp-preset-hero">
    <div>
      <p class="eyebrow">Operations Center</p>
      <h1>WhatsApp message presets</h1>
      <p class="muted">Create, edit, activate, set defaults, and safely remove reusable WhatsApp messages without changing PHP code.</p>
    </div>
    <div class="hero-actions">
      <button class="btn" type="button" id="newWhatsAppPresetBtn">+ New preset</button>
      <button class="btn btn-light" type="button" id="reloadWhatsAppPresetsBtn">Reload</button>
      <a class="btn btn-light" href="walks.php">Back to walks</a>
    </div>
  </section>

  <section class="whatsapp-preset-summary grid three">
    <article><span>1</span><strong>Create once</strong><small>Build reusable messages with safe member and walk variables.</small></article>
    <article><span>2</span><strong>Apply anywhere</strong><small>Select a preset while creating or editing a walk.</small></article>
    <article><span>3</span><strong>Stay protected</strong><small>Existing queue limits and duplicate protection remain unchanged.</small></article>
  </section>

  <div class="preset-install-warning" id="whatsappPresetInstallWarning" hidden>
    <strong>One database migration is required.</strong>
    <span>Import <code>database/migrations/043_whatsapp_message_presets.sql</code>, then reload this page.</span>
  </div>

  <section class="whatsapp-preset-layout">
    <aside class="panel whatsapp-preset-library">
      <div class="section-head">
        <div>
          <p class="eyebrow">Preset library</p>
          <h2>Your messages</h2>
        </div>
        <span class="preset-count" id="whatsappPresetCount">0</span>
      </div>
      <div class="preset-library-filters">
        <input id="whatsappPresetSearch" type="search" placeholder="Search presets">
        <select id="whatsappPresetStatusFilter" aria-label="Filter preset status">
          <option value="all">All statuses</option>
          <option value="active">Active only</option>
          <option value="inactive">Inactive only</option>
        </select>
      </div>
      <div id="whatsappPresetList" class="whatsapp-preset-list">
        <div class="preset-empty">Loading presets…</div>
      </div>
    </aside>

    <section class="panel whatsapp-preset-editor">
      <div class="section-head">
        <div>
          <p class="eyebrow" id="whatsappPresetEditorEyebrow">Create</p>
          <h2 id="whatsappPresetEditorTitle">New WhatsApp preset</h2>
          <p class="muted">Nothing is sent from this page. Saving only adds the preset to your library.</p>
        </div>
        <span class="preset-editor-state" id="whatsappPresetEditorState">New</span>
      </div>

      <form id="whatsappPresetForm" class="stack-form">
        <input type="hidden" id="whatsappPresetId" value="">

        <div class="form-grid two">
          <label>Preset name
            <input id="whatsappPresetName" maxlength="120" placeholder="Example: Tomorrow reminder" required>
          </label>
          <label>Use case
            <select id="whatsappPresetUseCase" required></select>
          </label>
        </div>

        <div class="form-grid two">
          <label>Default audience
            <select id="whatsappPresetAudience">
              <option value="auto">Auto: open = all, invitation = invited</option>
              <option value="all">All active members</option>
              <option value="invited">Invited members only</option>
            </select>
          </label>
          <label>Sort order
            <input id="whatsappPresetSort" type="number" min="0" max="9999" value="100">
          </label>
        </div>

        <div class="preset-switch-row">
          <label class="check"><input id="whatsappPresetActive" type="checkbox" checked> Active and available in walk forms</label>
          <label class="check"><input id="whatsappPresetDefault" type="checkbox"> Default for this use case</label>
        </div>

        <label>WhatsApp headline
          <input id="whatsappPresetHeadline" maxlength="180" placeholder="Example: Reminder: {walk_title}" required>
          <small>The system displays this as the bold first line in WhatsApp.</small>
        </label>

        <div class="preset-variable-panel">
          <div>
            <p class="eyebrow">Variables</p>
            <strong>Click to insert</strong>
          </div>
          <div id="whatsappPresetVariables" class="preset-variable-grid"></div>
        </div>

        <label>Message body
          <textarea id="whatsappPresetMessage" rows="16" maxlength="4000" placeholder="Write the reusable WhatsApp message" required></textarea>
        </label>
        <div class="preset-editor-meta">
          <small id="whatsappPresetCharacterCount">0 / 4000 characters</small>
          <small>Only approved variables are accepted.</small>
        </div>

        <div class="whatsapp-preview-card">
          <div class="whatsapp-preview-head">
            <span>Live WhatsApp preview</span>
            <small>Sample member and walk data</small>
          </div>
          <div class="whatsapp-preview-bubble" id="whatsappPresetPreview">Start typing to preview the message.</div>
        </div>

        <div class="preset-editor-actions">
          <button class="btn" type="submit" id="saveWhatsAppPresetBtn">Save preset</button>
          <button class="btn btn-light" type="button" id="clearWhatsAppPresetBtn">Clear editor</button>
          <button class="btn btn-danger" type="button" id="deleteWhatsAppPresetBtn" hidden>Delete preset</button>
        </div>
        <p class="notice" id="whatsappPresetMessageNotice"></p>
      </form>
    </section>
  </section>
</main>

<script>
window.__PYRK_CSRF__ = <?= json_encode($csrf) ?>;
window.PYRK_WHATSAPP_PRESETS_API = '../../api/whatsapp_presets.php';
</script>
<script src="../assets/js/admin_whatsapp_presets.js?v=1"></script>
</body>
</html>
