<?php
require __DIR__ . '/../_boot.php';
require __DIR__ . '/../partials/nav.php';
if (!$user || !(\App\Core\Auth::hasPermission('notifications.manage', $user) || \App\Core\Auth::hasPermission('walks.manage', $user) || \App\Core\Auth::hasPermission('walks.edit', $user))) {
    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>Walk Email Studio | Pyrk Admin</title>
  <link rel="stylesheet" href="../assets/css/app.css">
  <link rel="stylesheet" href="../assets/css/admin_walk_email_templates_pro.css?v=2">
</head>
<body>
<?php pyrk_render_nav('admin'); ?>
<main class="container enterprise-page walk-email-template-page">
  <section class="page-hero admin-hero enterprise-hero walk-email-hero">
    <div>
      <p class="eyebrow">Operations Center</p>
      <h1>Walk email studio</h1>
      <p class="muted">Create polished invitation and reminder emails per walk, preview them, and send a test before members receive anything.</p>
    </div>
    <div class="hero-actions">
      <button class="btn btn-light" type="button" id="reloadWalkEmailStudioBtn">Reload walks</button>
      <a class="btn btn-light" href="walks.php">Back to walks</a>
      <a class="btn btn-light" href="notifications.php">Email settings</a>
    </div>
  </section>

  <section class="email-studio-summary grid three">
    <div class="summary-card"><span>1</span><strong>Choose walk</strong><small>Select the event that should use custom email content.</small></div>
    <div class="summary-card"><span>2</span><strong>Design message</strong><small>Use demo starters, variables, and content blocks.</small></div>
    <div class="summary-card"><span>3</span><strong>Preview & test</strong><small>Send yourself a test before inviting members.</small></div>
  </section>

  <section class="grid two walk-email-layout">
    <aside class="panel walk-email-sidebar">
      <div class="section-head">
        <div>
          <p class="eyebrow">Step 1</p>
          <h2>Choose walk</h2>
        </div>
      </div>
      <label>Walk
        <select id="emailWalkSelect">
          <option value="">Loading walks...</option>
        </select>
      </label>
      <div id="emailWalkInfo" class="walk-email-info muted small">Select a walk to edit its email content.</div>

      <div class="template-type-list" id="templateTypeList"></div>

      <div class="variables-card">
        <p class="eyebrow">Available variables</p>
        <div id="emailVariables" class="email-variable-grid"></div>
        <p class="muted small">Click a variable to insert it into the body. You can also paste variables into the subject.</p>
      </div>
    </aside>

    <section class="panel walk-email-editor-panel">
      <div class="section-head">
        <div>
          <p class="eyebrow" id="templateEyebrow">Step 2</p>
          <h2 id="templateTitle">Email editor</h2>
          <p class="muted" id="templateDescription">Choose a walk and email type.</p>
        </div>
        <span id="templateStatusBadge" class="template-status-badge">Default</span>
      </div>

      <div class="demo-editor-card">
        <div>
          <p class="eyebrow">Demo editor</p>
          <h3>Start from a professional template</h3>
          <p class="muted small">These demo starters are only inserted into the editor. Nothing is sent until you click save/test.</p>
        </div>
        <div class="starter-template-list" id="starterTemplateList"></div>
      </div>

      <form id="walkEmailTemplateForm" class="stack-form email-studio-form">
        <input type="hidden" id="templateKey" value="member_invitation">
        <label>Subject
          <input id="emailSubject" maxlength="255" placeholder="Example: You are invited to {walk_title}" required>
        </label>

        <div class="editor-toolbar" id="emailEditorToolbar" aria-label="Email block toolbar">
          <button class="btn btn-light" type="button" data-block="details">+ Event details</button>
          <button class="btn btn-light" type="button" data-block="description">+ Description</button>
          <button class="btn btn-light" type="button" data-block="button">+ Open walk button</button>
          <button class="btn btn-light" type="button" data-block="note">+ Note box</button>
          <button class="btn btn-light" type="button" data-block="divider">+ Divider</button>
          <button class="btn btn-light" type="button" data-block="signature">+ Signature</button>
        </div>

        <div class="email-editor-grid">
          <label class="email-code-editor">Body HTML
            <textarea id="emailBody" rows="18" placeholder="Write the email body. HTML and variables are supported." required></textarea>
          </label>
          <div class="live-preview-panel">
            <div class="live-preview-head">
              <span>Live demo preview</span>
              <small>Uses sample member data until you click Preview.</small>
            </div>
            <iframe id="inlineEmailPreview" title="Live email demo preview"></iframe>
          </div>
        </div>

        <div class="editor-help-box">
          <strong>Recommended:</strong> keep <code>{walk_button}</code> in the email so members always have a clear button to open the walk. Use <code>{walk_description_block}</code> for the walk/route description.
        </div>
        <div class="inline-controls walk-email-actions">
          <button class="btn" type="submit">Save email content</button>
          <button class="btn btn-light" type="button" id="previewEmailTemplateBtn">Preview with real walk data</button>
          <button class="btn btn-light" type="button" id="resetEmailTemplateBtn">Restore default</button>
        </div>
        <p id="walkEmailTemplateMsg" class="notice"></p>
      </form>

      <div class="test-email-card">
        <div>
          <p class="eyebrow">Quality check</p>
          <h3>Send test email</h3>
          <p class="muted small">Sends a test using the current editor content. It does not invite members or change walk records.</p>
        </div>
        <div class="test-email-row">
          <input id="testEmailAddress" type="email" placeholder="admin@example.com" value="<?= htmlspecialchars((string)($user['email'] ?? ''), ENT_QUOTES, 'UTF-8') ?>">
          <button class="btn btn-light" type="button" id="sendTestEmailTemplateBtn">Send test</button>
        </div>
      </div>
    </section>
  </section>
</main>

<div class="modal" id="walkEmailPreviewModal" hidden>
  <div class="modal-card walk-email-preview-card">
    <button class="modal-close" type="button" data-close-email-preview>×</button>
    <p class="eyebrow">Email preview</p>
    <h2 id="previewSubject">Preview</h2>
    <iframe id="previewFrame" title="Email preview"></iframe>
  </div>
</div>

<script>
  window.__PYRK_CSRF__ = <?= json_encode($csrf) ?>;
  window.PYRK_WALK_EMAIL_API = '../../api/walk_email_templates.php';
</script>
<script src="../assets/js/admin_walk_email_templates.js?v=2"></script>
</body>
</html>
