{% extends 'base.html' %}
{% block title %}Calendar{% endblock %}
{% block page_title %}Post Calendar{% endblock %}

{% block head %}
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.11/index.global.min.css" rel="stylesheet" />
{% endblock %}

{% block topbar_actions %}
  <select id="pageFilter" class="filter-select" onchange="refreshCalendar()">
    <option value="all">All Pages</option>
    {% for page in pages %}
      <option value="{{ page.id }}">{{ page.page_name }}</option>
    {% endfor %}
  </select>
{% endblock %}

{% block content %}
<div class="calendar-wrap">
  <div id="calendar"></div>
</div>

<!-- Event detail popup -->
<div id="eventPopup" class="event-popup" style="display:none">
  <button class="event-popup-close" onclick="document.getElementById('eventPopup').style.display='none'">&times;</button>
  <h4 id="popupTitle"></h4>
  <p id="popupContent"></p>
  <div id="popupMeta" style="margin-top:10px;display:flex;flex-direction:column;gap:4px;font-size:0.78rem;color:var(--text-muted)"></div>
</div>
{% endblock %}

{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.11/index.global.min.js"></script>
<script>
var calendar;

document.addEventListener('DOMContentLoaded', function () {
  var calEl = document.getElementById('calendar');
  calendar = new FullCalendar.Calendar(calEl, {
    initialView: 'dayGridMonth',
    headerToolbar: {
      left: 'prev,next',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek'
    },
    height: 'auto',
    editable: true,
    events: buildUrl(),
    eventClick: function (info) {
      info.jsEvent.stopPropagation();
      showPopup(info.event, info.jsEvent);
    },
    eventDrop: function (info) {
      reschedule(info.event.id, info.event.start);
    },
    eventDidMount: function (info) {
      info.el.title = info.event.extendedProps.content || '';
    }
  });
  calendar.render();
});

function buildUrl() {
  var pageId = document.getElementById('pageFilter').value;
  return '/api/calendar?page_id=' + pageId;
}

function refreshCalendar() {
  if (calendar) {
    calendar.removeAllEventSources();
    calendar.addEventSource(buildUrl());
  }
}

function showPopup(event, jsEvent) {
  var popup = document.getElementById('eventPopup');
  document.getElementById('popupTitle').textContent = event.title;
  document.getElementById('popupContent').textContent = event.extendedProps.content || '';
  var meta = document.getElementById('popupMeta');
  meta.innerHTML =
    '<span>📄 Status: <b>' + (event.extendedProps.status || '') + '</b></span>' +
    '<span>🔁 Type: <b>' + (event.extendedProps.schedule_type || '') + '</b></span>' +
    '<span>📅 ' + (event.start ? event.start.toLocaleString() : '') + '</span>';
  popup.style.display = 'block';
  var x = jsEvent.clientX + 12;
  var y = jsEvent.clientY + 12;
  if (x + 310 > window.innerWidth) x = window.innerWidth - 320;
  if (y + 200 > window.innerHeight) y = window.innerHeight - 210;
  popup.style.left = x + 'px';
  popup.style.top = y + 'px';
}

document.addEventListener('click', function (e) {
  var popup = document.getElementById('eventPopup');
  if (!popup.contains(e.target)) popup.style.display = 'none';
});

function reschedule(schedId, newDate) {
  fetch('/api/schedules/' + schedId + '/reschedule', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ date: newDate.toISOString() })
  }).then(function(r) {
    if (!r.ok) {
      alert('Failed to reschedule. Please try again.');
      calendar.removeAllEventSources();
      calendar.addEventSource(buildUrl());
    }
  });
}
</script>
{% endblock %}