{% extends "airflow/main.html" %}
{% block head_css %}
{{ super() }}
{% include '_modal_styles.html' %}
<link rel="stylesheet" href="{{ static_base }}/calendar_grid.css?v={{ assets_version }}">
{% endblock %}
{% block content %}
  <style>
    .fc-v-event { min-height: 25px !important; }
    .fc-event-title { font-weight: bold; font-size: 0.85em; }

    .fc-event {
        cursor: pointer !important;
        border-style: solid !important;
        border-width: 2.5px !important;
        border-radius: 4px;
        opacity: 0.9;
        transition: transform 0.2s, box-shadow 0.2s;
    }
    .fc-event:hover {
        transform: scale(1.03);
        z-index: 10;
        opacity: 1;
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }

    #calendar-container {
        background: white;
        padding: 20px;
        border-radius: 10px;
        margin-bottom: 300px;
    }

    .fc-event-main {
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .task-count-badge {
        font-size: 0.7rem;
        display: block;
        margin-top: 1px;
        white-space: nowrap;
    }

    /* AF2 dark: stronger today highlight (html attr not present in AF3 iframe) */
    html[data-theme="dark"] #calendar .fc-day-today,
    html[data-color-mode="dark"] #calendar .fc-day-today {
        background-color: rgba(255, 193, 7, 0.32) !important;
    }

    html[data-theme="dark"] #calendar .fc-day-today .fc-timegrid-col-frame,
    html[data-theme="dark"] #calendar .fc-day-today .fc-daygrid-day-frame,
    html[data-color-mode="dark"] #calendar .fc-day-today .fc-timegrid-col-frame,
    html[data-color-mode="dark"] #calendar .fc-day-today .fc-daygrid-day-frame {
        background-color: rgba(255, 193, 7, 0.32) !important;
    }

    html[data-theme="dark"] #calendar .fc-col-header-cell.fc-day-today,
    html[data-color-mode="dark"] #calendar .fc-col-header-cell.fc-day-today {
        background-color: rgba(255, 193, 7, 0.22) !important;
    }

    html[data-theme="dark"] #calendar .fc-day-today .fc-col-header-cell-cushion,
    html[data-color-mode="dark"] #calendar .fc-day-today .fc-col-header-cell-cushion {
        color: #fbbf24 !important;
        font-weight: 700;
    }

    .calendar-plugin-footer {
        position: fixed;
        bottom: 24px;
        right: 24px;
        display: flex;
        align-items: center;
        padding: 8px 16px;
        background-color: rgba(30, 30, 30, 0.6);
        backdrop-filter: blur(4px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 20px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        z-index: 1000;
        font-size: 0.8rem;
        color: #e2e8f0;
    }

    .calendar-plugin-footer a {
        display: flex;
        align-items: center;
        gap: 6px;
        color: inherit;
        text-decoration: none;
        transition: opacity 0.2s ease;
    }

    .calendar-plugin-footer a:hover {
        opacity: 0.8;
    }

    .calendar-plugin-footer .separator {
        margin: 0 10px;
        opacity: 0.4;
    }
  </style>

	<div id='calendar-container'>
		<div id='calendar'></div>
	</div>

  {% include '_event_modal.html' %}

	<div class="calendar-plugin-footer">
		<span>v0.8.10</span>
		<span class="separator">•</span>
		<a id="github-link" href="https://github.com/AlvaroCavalcante/airflow-calendar-plugin" target="_blank" rel="noopener noreferrer" title="See on GitHub">
			<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
				<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
			</svg>
			GitHub
		</a>
	</div>

  <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js'></script>
  <script src="{{ static_base }}/calendar_colors.js?v={{ assets_version }}"></script>
  <script src="{{ static_base }}/calendar_modal.js?v={{ assets_version }}"></script>
  <script>
    function syncAf2ModalTheme() {
      var html = document.documentElement;
      var body = document.body;
      var isDark = html.getAttribute('data-theme') === 'dark' ||
          html.getAttribute('data-color-mode') === 'dark' ||
          html.classList.contains('dark') ||
          body.getAttribute('data-theme') === 'dark' ||
          body.getAttribute('data-color-mode') === 'dark';
      document.body.classList.toggle('dark-mode', isDark);
    }

    document.addEventListener('DOMContentLoaded', function() {
      syncAf2ModalTheme();
      try {
        var themeObserver = new MutationObserver(syncAf2ModalTheme);
        themeObserver.observe(document.documentElement, {
          attributes: true,
          attributeFilter: ['data-theme', 'data-color-mode', 'class']
        });
        themeObserver.observe(document.body, {
          attributes: true,
          attributeFilter: ['data-theme', 'data-color-mode', 'class']
        });
      } catch (e) { /* ignore */ }

      AirflowCalendarModal.init();
      var colorPicker;
      var calendarEl = document.getElementById('calendar');
      var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'timeGridWeek',
        headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        nowIndicator: true,
        events: {{ events | tojson }},
        slotDuration: '00:15:00',
        eventDisplay: 'block',

        eventContent: function(arg) {
          let dag_id = arg.event.extendedProps.dag_id;
          let task_count = arg.event.extendedProps.task_count || 0;
          let durationMs = arg.event.end - arg.event.start;
          let durationMinutes = durationMs / (1000 * 60);

          let container = document.createElement('div');
          container.style.overflow = 'hidden';

          let titleEl = document.createElement('b');
          titleEl.innerText = dag_id;
          container.appendChild(titleEl);

          if (durationMinutes >= 15) {
              let subtitleEl = document.createElement('div');
              subtitleEl.className = 'task-count-badge';
              subtitleEl.innerHTML = `⚙️ ${task_count} tasks`;
              container.appendChild(subtitleEl);
          }

          return { domNodes: [container] };
        },

        eventMouseEnter: function(info) {
            info.el.title = "Status: " + info.event.extendedProps.status;
        },
        allDaySlot: false,
        eventOverlap: true,

        eventClick: function(info) {
          const props = info.event.extendedProps;
          const eventTime = info.event.start.toLocaleString();
          const dagId = props.dag_id;

          document.getElementById('modalDagId').innerText = dagId;
          document.getElementById('modalTime').innerText = eventTime;
          document.getElementById('modalCron').innerText = props.cron;
          document.getElementById('modalDuration').innerText = props.duration;

          const count = (props.task_count !== undefined) ? props.task_count : '0';
          document.getElementById('modalTaskCount').innerText = count;

          const historyContainer = document.getElementById('modalHistory');
          historyContainer.innerHTML = '';

          if (props.history && props.history.length > 0) {
            props.history.forEach(run => {
                const dot = document.createElement('div');
                dot.className = 'history-dot';

                if (run.state === 'success') dot.classList.add('dot-success');
                else if (run.state === 'failed') dot.classList.add('dot-failed');
                else if (run.state === 'running') dot.classList.add('dot-running');
                else if (run.state === 'queued') dot.classList.add('dot-queued');
                else dot.classList.add('dot-other');

                dot.title = `Status: ${run.state.toUpperCase()}\nData: ${run.date}`;
                dot.style.cursor = 'help';

                historyContainer.appendChild(dot);
            });
          } else {
            historyContainer.innerHTML = '<span class="dag-modal-empty">No runs yet</span>';
          }

          const titleEl = document.getElementById('modalDagId');
          titleEl.innerText = dagId;
          titleEl.title = dagId;

          const targetUrl = `${window.location.origin}/dags/${dagId}`;
          const dagLinkBtn = document.getElementById('modalDagLink');

          const newDagLinkBtn = dagLinkBtn.cloneNode(true);
          dagLinkBtn.parentNode.replaceChild(newDagLinkBtn, dagLinkBtn);

          newDagLinkBtn.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();

            const newWindow = window.top.open(targetUrl, '_blank');

            if (!newWindow || newWindow.closed || typeof newWindow.closed == 'undefined') {
                alert('Pop-up blocked! Please allow pop-ups for this site to open DAGs.');
            }
          });

          const modalDialog = document.querySelector('#eventModal .modal-dialog');

          colorPicker.openForDag(dagId, info.event.backgroundColor);
          AirflowCalendarModal.show(modalDialog, info.jsEvent.clientX, info.jsEvent.clientY);
        }
      });
      calendar.render();
      colorPicker = AirflowCalendarColors.init(calendar, '{{ colors_api_base }}');
    });
  </script>
{% endblock %}