<div class="page-actions" style="margin-bottom:20px">
  <button class="btn btn-primary" onclick="document.getElementById('newAnnModal').style.display='flex'"><i class="bi bi-plus-circle-fill"></i> New Announcement</button>
</div>

<div class="admin-card">
  <% if (announcements && announcements.length) { %>
  <% announcements.forEach(a => { %>
  <div class="announcement-item announcement-<%= a.announcement_type %>">
    <div class="ann-header">
      <div style="display:flex;align-items:center;gap:10px">
        <span class="badge badge-<%= a.announcement_type==='success'?'success':a.announcement_type==='warning'?'warning':a.announcement_type==='danger'?'danger':'info' %>">
          <i class="bi bi-<%= a.announcement_type==='success'?'check-circle':a.announcement_type==='warning'?'exclamation-triangle':a.announcement_type==='danger'?'x-circle':'info-circle' %>-fill"></i>
          <%= a.announcement_type %>
        </span>
        <span class="badge badge-secondary"><%= a.target %></span>
        <span class="badge badge-<%= a.is_active?'success':'secondary' %>"><%= a.is_active?'Active':'Inactive' %></span>
      </div>
      <div style="display:flex;gap:8px;align-items:center">
        <span style="font-size:.72rem;color:#9ca3af"><%= moment(a.created_at).format('MMM D, YYYY') %></span>
        <button class="btn btn-xs <%= a.is_active?'btn-warning':'btn-success' %> toggle-ann" data-id="<%= a.id %>" data-active="<%= a.is_active %>">
          <%= a.is_active?'Deactivate':'Activate' %>
        </button>
        <button class="btn btn-xs btn-danger delete-ann" data-id="<%= a.id %>"><i class="bi bi-trash"></i></button>
      </div>
    </div>
    <h4 style="margin:10px 0 6px"><%= a.title %></h4>
    <p style="font-size:.85rem;color:#6b7280"><%- a.content %></p>
    <div style="display:flex;gap:14px;margin-top:8px;font-size:.72rem;color:#9ca3af">
      <% if (a.starts_at) { %><span><i class="bi bi-calendar3"></i> Starts: <%= moment(a.starts_at).format('MMM D, YYYY') %></span><% } %>
      <% if (a.ends_at) { %><span><i class="bi bi-calendar-x"></i> Ends: <%= moment(a.ends_at).format('MMM D, YYYY') %></span><% } %>
      <span><i class="bi bi-x-circle"></i> Dismissible: <%= a.is_dismissible?'Yes':'No' %></span>
      <% if (a.first_name) { %><span><i class="bi bi-person-fill"></i> By: <%= a.first_name %> <%= a.last_name %></span><% } %>
    </div>
  </div>
  <% }) %>
  <% } else { %><div class="ac-empty"><i class="bi bi-megaphone"></i><p>No announcements yet.</p></div><% } %>
</div>

<!-- New Announcement Modal -->
<div class="modal" id="newAnnModal" style="display:none">
  <div class="modal-backdrop" onclick="document.getElementById('newAnnModal').style.display='none'"></div>
  <div class="modal-content modal-md">
    <div class="modal-header"><h3>Create Announcement</h3><button onclick="document.getElementById('newAnnModal').style.display='none'" class="modal-close"><i class="bi bi-x-lg"></i></button></div>
    <div class="modal-body">
      <div class="form-group"><label>Title *</label><input type="text" id="annTitle" placeholder="Announcement headline..."></div>
      <div class="form-group"><label>Content *</label><textarea id="annContent" rows="4" placeholder="Announcement body (HTML allowed)..."></textarea></div>
      <div class="form-row">
        <div class="form-group"><label>Type</label>
          <select id="annType">
            <option value="info">Info (Blue)</option>
            <option value="success">Success (Green)</option>
            <option value="warning">Warning (Amber)</option>
            <option value="danger">Alert (Red)</option>
            <option value="feature">New Feature</option>
          </select>
        </div>
        <div class="form-group"><label>Target Audience</label>
          <select id="annTarget">
            <option value="all">All Users</option>
            <option value="members">Members Only</option>
            <option value="trial">Trial Members</option>
            <option value="admin">Admin Only</option>
          </select>
        </div>
      </div>
      <div class="form-row">
        <div class="form-group"><label>Starts At</label><input type="datetime-local" id="annStartsAt"></div>
        <div class="form-group"><label>Ends At</label><input type="datetime-local" id="annEndsAt"></div>
      </div>
      <div class="form-check" style="margin:8px 0">
        <input type="checkbox" id="annDismissible" checked>
        <label for="annDismissible" style="font-size:.875rem">Allow users to dismiss this announcement</label>
      </div>
      <div class="modal-actions">
        <button class="btn btn-primary" onclick="createAnn()"><i class="bi bi-megaphone-fill"></i> Publish Announcement</button>
        <button class="btn btn-ghost" onclick="document.getElementById('newAnnModal').style.display='none'">Cancel</button>
      </div>
    </div>
  </div>
</div>

<style>
.announcement-item { padding:16px 20px; border-bottom:1px solid #e5e7eb; }
.announcement-item:last-child { border-bottom:none; }
.ann-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:0; }
.announcement-warning { border-left:3px solid #f59e0b; }
.announcement-danger  { border-left:3px solid #ef4444; }
.announcement-success { border-left:3px solid #10b981; }
.announcement-info,.announcement-feature { border-left:3px solid #1a56db; }
</style>

<script>
async function createAnn() {
  const body = {
    title: document.getElementById('annTitle').value,
    content: document.getElementById('annContent').value,
    announcement_type: document.getElementById('annType').value,
    target: document.getElementById('annTarget').value,
    is_dismissible: String(document.getElementById('annDismissible').checked),
    starts_at: document.getElementById('annStartsAt').value || null,
    ends_at: document.getElementById('annEndsAt').value || null
  };
  const res = await fetch('/admin/announcements', {method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)});
  if((await res.json()).success) { document.getElementById('newAnnModal').style.display='none'; location.reload(); }
}
document.querySelectorAll('.toggle-ann').forEach(btn => {
  btn.addEventListener('click', async () => {
    const is_active = btn.dataset.active === 'true' ? 'false' : 'true';
    await fetch(`/admin/announcements/${btn.dataset.id}`, {method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify({is_active})});
    location.reload();
  });
});
document.querySelectorAll('.delete-ann').forEach(btn => {
  btn.addEventListener('click', async () => {
    if(!confirm('Delete this announcement?')) return;
    await fetch(`/admin/announcements/${btn.dataset.id}`, {method:'DELETE'});
    location.reload();
  });
});
</script>
