{% extends "airflow/main.html" %}
{% block content %}
  <style>
    /* Melhora a legibilidade e evita eventos muito espremidos */
    .fc-v-event { min-height: 25px !important; }
    .fc-event-title { font-weight: bold; font-size: 0.85em; }

    .status-pill { padding: 4px 12px; border-radius: 20px; font-size: 0.85em; font-weight: bold; color: white; }

    /* Modal Estilo Floating Card (Google Calendar) */
    #eventModal.modal.fade .modal-dialog {
        position: fixed; /* Permite posicionar onde quisermos */
        margin: 0;
        width: 320px; /* Largura menor e mais elegante */
        z-index: 9999;
        transition: none; /* Aparecimento instantâneo para parecer nativo */
    }

    .modal-content {
        border-radius: 12px;
        border: 1px solid #dadce0;
        box-shadow: 0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12);
    }

    .modal-backdrop {
        display: none !important; /* Remove o fundo escuro para permitir ver o calendário atrás */
    }

    /* Estilos internos minimalistas */
    .modal-header { padding: 12px 16px 0; border: none; }
    .modal-body { padding: 0 16px 20px; }
    .info-label { color: #70757a; font-size: 0.75rem; text-transform: uppercase; margin-top: 12px; }
    .info-value { color: #3c4043; font-size: 0.95rem; font-weight: 400; }
    .modal-header .close {
        margin-top: -5px;
        z-index: 10;
    }
    .modal-title {
        font-size: 1.2rem !important; /* Fonte menor e equilibrada */
        font-weight: 600;
        color: #3c4043;
        white-space: nowrap;    /* Não quebra linha */
        overflow: hidden;       /* Esconde o excedente */
        text-overflow: ellipsis; /* Adiciona os "..." */
        display: block;
        width: 90%;             /* Garante limite antes do botão 'X' */
    }

    .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;
    }
  </style>

  <div id='calendar-container' style="background: white; padding: 20px; border-radius: 10px;">
    <div id='calendar'></div>
  </div>

  <div class="modal fade" id="eventModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h3 class="modal-title" id="modalDagId">DAG ID</h3>
        </div>
        <div class="modal-body">
          <div class="info-label">Execution:</div>
          <div class="info-value" id="modalTime">---</div>

          <div class="info-label">Cron Expression:</div>
          <div class="info-value"><code id="modalCron">---</code></div>

          <div class="info-label">Estimated Duration:</div>
          <div class="info-value" id="modalDuration">---</div>

          <div class="info-label">Last Status:</div>
          <div class="info-value"><span id="modalStatus" class="status-pill">---</span></div>

          <hr>
            <a id="modalDagLink" href="#" class="btn btn-primary btn-block" target="_blank">
                Open DAG <i class="fa fa-external-link" style="margin-left: 8px;"></i>
            </a>
        </div>
      </div>
    </div>
  </div>

  <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js'></script>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      var calendarEl = document.getElementById('calendar');
      var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'timeGridWeek',
        headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        events: {{ events | tojson }},
        slotDuration: '00:15:00',
        eventDisplay: 'block',
        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();

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

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

          const statusEl = document.getElementById('modalStatus');
          statusEl.innerText = props.status.toUpperCase();
          const status_colors = { 'success': '#1e8e3e', 'failed': '#d93025', 'no_run': '#70757a' };
          statusEl.style.backgroundColor = status_colors[props.status] || '#808080';

          document.getElementById('modalDagLink').href = "/dags/" + props.dag_id + "/grid";

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

          modalDialog.style.visibility = 'hidden';
          modalDialog.style.display = 'block';
          const actualHeight = modalDialog.offsetHeight;
          modalDialog.style.display = ''; 
          modalDialog.style.visibility = '';

          let x = info.jsEvent.clientX;
          let y = info.jsEvent.clientY;

          const modalWidth = 320;
          const viewWidth = window.innerWidth;
          const viewHeight = window.innerHeight;
          const buffer = 15;

          let finalX = x + 10;
          if (finalX + modalWidth > viewWidth - buffer) {
              finalX = x - modalWidth - 10;
          }

          let finalY = y + 10;
          if (finalY + actualHeight > viewHeight - buffer) {
            finalY = y - actualHeight - 10;
          }

          if (finalY < buffer) {
            finalY = buffer;
          }

          if (finalY + actualHeight > viewHeight - buffer) {
            finalY = viewHeight - actualHeight - buffer;
          }

          modalDialog.style.left = finalX + "px";
          modalDialog.style.top = finalY + "px";
          $('#eventModal').modal('show');
        }
      });
      calendar.render();
    });
  </script>
{% endblock %}