// ============================================================
// Calendar Module
// ============================================================

const Cal = (() => {
  let state = {
    year: new Date().getFullYear(),
    month: new Date().getMonth() + 1,  // 1-based
    events: [],
    view: 'month',   // month | week | list
    selectedDay: null,
    viewUserId: null,  // null = current user, 'all' = all, number = specific user
  };
  let _calUsers = [];  // cached user list for admin filter

  const TYPE_COLORS = {
    jobcard: { bg: '#dbeafe', text: '#1e40af', dot: '#3b82f6' },
    todo: { bg: '#ede9fe', text: '#5b21b6', dot: '#7c3aed' },
    leave: { bg: '#ffedd5', text: '#9a3412', dot: '#f97316' },
    project: { bg: '#dcfce7', text: '#14532d', dot: '#22c55e' },
    event: { bg: '#e0f2fe', text: '#075985', dot: '#0ea5e9' },
    meeting: { bg: '#dbeafe', text: '#1e3a8a', dot: '#1d4ed8' },
    task: { bg: '#f3e8ff', text: '#6b21a8', dot: '#9333ea' },
    reminder: { bg: '#fef9c3', text: '#713f12', dot: '#eab308' },
    deadline: { bg: '#fee2e2', text: '#7f1d1d', dot: '#ef4444' },
    meeting_internal: { bg: '#dbeafe', text: '#1e40af', dot: '#3b82f6' },
    meeting_client: { bg: '#dcfce7', text: '#166534', dot: '#22c55e' },
    checklist: { bg: '#ccfbf1', text: '#065f46', dot: '#14b8a6' },
  };

  const MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
  const DAYS_SHORT = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

  // ── Data loading ────────────────────────────────────────
  async function loadEvents() {
    const params = { year: state.year, month: state.month };
    if (state.viewUserId === 'all') params.view_all = 1;
    else if (state.viewUserId) params.view_user_id = state.viewUserId;
    const res = await API.post('calendar/events', params);
    if (res.success) state.events = res.data.events;
    else state.events = [];
  }

  async function loadCalUsers() {
    if (_calUsers.length) return;
    const res = await API.post('auth/users_list', { limit: 100 });
    if (res.success) _calUsers = res.data.users || [];
  }

  // ── Helpers ─────────────────────────────────────────────
  function eventsForDate(dateStr) {
    return state.events.filter(e => e.date === dateStr);
  }

  function colorFor(type) {
    return TYPE_COLORS[type] || TYPE_COLORS.event;
  }

  function todayStr() {
    return new Date().toISOString().split('T')[0];
  }

  function daysInMonth(y, m) {
    return new Date(y, m, 0).getDate();
  }

  function firstDayOfMonth(y, m) {
    return new Date(y, m - 1, 1).getDay(); // 0=Sun
  }

  function padDate(y, m, d) {
    return `${y}-${String(m).padStart(2, '0')}-${String(d).padStart(2, '0')}`;
  }

  // ── Render shell ─────────────────────────────────────────
  async function render(params = {}) {
    const content = document.getElementById('page-content');
    content.innerHTML = `
      <div class="cal-shell">
        <div class="cal-header">
          <div class="d-flex align-center gap-3">
            <button class="btn btn-ghost btn-icon" onclick="Cal.prevMonth()" title="Previous month">
              <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polyline points="15 18 9 12 15 6"/></svg>
            </button>
            <h3 class="cal-title" id="cal-title">${MONTHS[state.month - 1]} ${state.year}</h3>
            <button class="btn btn-ghost btn-icon" onclick="Cal.nextMonth()" title="Next month">
              <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></svg>
            </button>
            <button class="btn btn-ghost btn-sm" onclick="Cal.goToday()">Today</button>
          </div>
          <div class="d-flex align-center gap-2">
            <div class="cal-view-switcher">
              <button class="${state.view === 'month' ? 'active' : ''}" onclick="Cal.setView('month')">Month</button>
              <button class="${state.view === 'list' ? 'active' : ''}" onclick="Cal.setView('list')">List</button>
            </div>
            ${Auth.can('calendar', 'create') ? `<button class="btn btn-primary btn-sm" onclick="Cal.openAddEvent()">
              <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
              Add Event
            </button>` : ''}
            ${Auth.isDev() ? `<div id="cal-user-filter" style="display:flex;align-items:center;gap:.4rem">
              <select id="cal-user-sel" class="form-control" style="padding:.3rem .6rem;font-size:.8rem;height:32px;min-width:140px" onchange="Cal.setViewUser(this.value)">
                <option value="">My Events</option>
                <option value="all">All Users</option>
              </select>
            </div>` : ''}
          </div>
        </div>

        <div id="cal-legend" class="cal-legend">
          ${Object.entries(TYPE_COLORS).map(([t, c]) => `
            <span class="cal-legend-item"><span style="background:${c.dot};width:8px;height:8px;border-radius:50%;display:inline-block"></span> ${t.charAt(0).toUpperCase() + t.slice(1)}</span>
          `).join('')}
        </div>

        <div id="cal-body" class="cal-body">
          <div class="loading-overlay"><div class="spinner"></div></div>
        </div>

        <div id="cal-day-panel" class="cal-day-panel" style="display:none">
          <div class="cal-day-panel-header">
            <h4 id="cal-day-title">—</h4>
            <button class="btn btn-ghost btn-icon" onclick="Cal.closeDayPanel()">
              <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
            </button>
          </div>
          <div id="cal-day-events"></div>
          ${Auth.can('calendar', 'create') ? `<button class="btn btn-outline btn-sm w-full mt-3" onclick="Cal.openAddEvent(Cal.state().selectedDay)">+ Add event on this day</button>` : ''}
        </div>
      </div>
    `;

    await loadEvents();
    renderBody();
    // Populate admin user filter — always rebuild to avoid duplicates on re-render
    if (Auth.isDev()) {
      await loadCalUsers();
      const sel = document.getElementById('cal-user-sel');
      if (sel) {
        sel.innerHTML =
          '<option value="">My Events</option>' +
          '<option value="all">All Users</option>' +
          _calUsers.map(u => `<option value="${u.id}">${u.full_name || u.username}</option>`).join('');
        if (state.viewUserId) sel.value = state.viewUserId;
      }
    }
    // Auto-open today's events panel
    selectDay(todayStr());
  }

  // ── Render the calendar grid or list ─────────────────────
  function renderBody() {
    const title = document.getElementById('cal-title');
    if (title) title.textContent = `${MONTHS[state.month - 1]} ${state.year}`;

    const body = document.getElementById('cal-body');
    if (!body) return;

    if (state.view === 'list') { renderList(body); return; }
    renderMonthGrid(body);
  }

  // ── Month grid ───────────────────────────────────────────
  function renderMonthGrid(container) {
    const today = todayStr();
    const totalDays = daysInMonth(state.year, state.month);
    const startDay = firstDayOfMonth(state.year, state.month);

    // Previous month tail
    const prevMonthDays = daysInMonth(state.year, state.month - 1 || 12);
    const prevYear = state.month === 1 ? state.year - 1 : state.year;
    const prevMonth = state.month === 1 ? 12 : state.month - 1;

    let cells = [];

    // Fill leading cells
    for (let i = startDay - 1; i >= 0; i--) {
      cells.push({ day: prevMonthDays - i, month: prevMonth, year: prevYear, other: true });
    }
    // Current month
    for (let d = 1; d <= totalDays; d++) {
      cells.push({ day: d, month: state.month, year: state.year, other: false });
    }
    // Trailing cells
    const nextYear = state.month === 12 ? state.year + 1 : state.year;
    const nextMonth = state.month === 12 ? 1 : state.month + 1;
    let nextDay = 1;
    while (cells.length % 7 !== 0) {
      cells.push({ day: nextDay++, month: nextMonth, year: nextYear, other: true });
    }

    const MAX_VISIBLE = window.innerWidth < 640 ? 2 : 3;

    container.innerHTML = `
      <div class="cal-grid">
        <div class="cal-day-headers">
          ${DAYS_SHORT.map(d => `<div class="cal-day-header">${d}</div>`).join('')}
        </div>
        <div class="cal-cells">
          ${cells.map(c => {
      const dateStr = padDate(c.year, c.month, c.day);
      const evts = c.other ? [] : eventsForDate(dateStr);
      const isToday = dateStr === today;
      const isSelected = dateStr === state.selectedDay;
      const isWeekend = false; // could detect

      return `
              <div class="cal-cell ${c.other ? 'cal-cell-other' : ''} ${isToday ? 'cal-cell-today' : ''} ${isSelected ? 'cal-cell-selected' : ''}"
                   data-date="${dateStr}"
                   ${!c.other ? `ondragover="Cal._dragOver(event)" ondragleave="Cal._dragLeave(event)" ondrop="Cal._drop(event)"` : ''}
                   onclick="Cal.selectDay('${dateStr}')">
                <div class="cal-cell-num">${c.day}</div>
                <div class="cal-cell-events">
                  ${evts.slice(0, MAX_VISIBLE).map(e => {
        const col = colorFor(e.type);
        const overdue = isOverdue(e);
        const done = isDoneEvent(e);
        const showUser = (state.viewUserId === 'all' || state.viewUserId) && e.assigned_user;
        let bg = col.bg, fg = col.text, border = '', extra = '';
        if (done) { bg = '#f3f4f6'; fg = '#9ca3af'; extra = 'text-decoration:line-through;opacity:.7'; }
        else if (overdue) { bg = '#fee2e2'; fg = '#991b1b'; border = 'border-left:2px solid #ef4444'; }
        const initials = showUser ? userInitials(e.assigned_user) : '';
        const isDraggable = !done && ['evt-', 'jc-', 'cl-'].some(p => e.id.startsWith(p));
        return `<div class="cal-event-pill ${overdue && !done ? 'cal-pill-overdue' : ''} ${isDraggable ? 'cal-pill-draggable' : ''}"
                      style="background:${bg};color:${fg};${border};display:flex;align-items:center;gap:3px"
                      title="${overdue && !done ? '⚠ OVERDUE: ' : ''}${e.label}${showUser ? ' — ' + e.assigned_user : ''}"
                      ${isDraggable ? `draggable="true"
                        data-event-id="${e.id}"
                        data-event-label="${e.label.replace(/"/g, '&quot;')}"
                        data-event-date="${dateStr}"
                        data-event-bg="${bg}"
                        data-event-fg="${fg}"
                        ondragstart="Cal._dragStart(event)"
                        ondragend="Cal._dragEnd(event)"
                        ontouchstart="Cal._touchStart(event)"
                        ontouchmove="Cal._touchMove(event)"
                        ontouchend="Cal._touchEnd(event)"` : ''}
                      onclick="${isDraggable ? 'if(!Cal._didDrag()){' : ''}Cal.selectDay('${dateStr}')${isDraggable ? '}' : ''}">
                      ${showUser ? `<span style="background:${done ? '#d1d5db' : col.dot};color:#fff;border-radius:50%;width:14px;height:14px;font-size:.55rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0">${initials}</span>` : ''}
                      ${e.time ? `<span class="cal-event-time" style="${extra}">${e.time}</span>` : ''}
                      <span class="cal-event-label" style="${extra};overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${overdue && !done ? '⚠ ' : ''}${e.label}</span>
                    </div>`;
      }).join('')}
                  ${evts.length > MAX_VISIBLE ? `<div class="cal-more-pill" onclick="event.stopPropagation();Cal.selectDay('${dateStr}')">+${evts.length - MAX_VISIBLE} more</div>` : ''}
                </div>
              </div>
            `;
    }).join('')}
        </div>
      </div>
    `;
  }

  // ── List view ────────────────────────────────────────────
  function renderList(container) {
    const today = todayStr();
    // Group events by date
    const byDate = {};
    state.events.forEach(e => {
      if (!byDate[e.date]) byDate[e.date] = [];
      byDate[e.date].push(e);
    });

    const dates = Object.keys(byDate).sort();
    if (!dates.length) {
      container.innerHTML = `<div class="empty-state"><div class="empty-icon">📅</div><div class="empty-title">No events this month</div></div>`;
      return;
    }

    container.innerHTML = `<div class="cal-list">
      ${dates.map(dateStr => {
      const d = new Date(dateStr + 'T00:00');
      const isToday = dateStr === today;
      const label = isToday ? 'Today' : d.toLocaleDateString('en-ZA', { weekday: 'long', day: 'numeric', month: 'long' });
      return `
          <div class="cal-list-day">
            <div class="cal-list-date ${isToday ? 'cal-list-today' : ''}">${label}</div>
            <div class="cal-list-events">
              ${byDate[dateStr].map(e => renderListEvent(e)).join('')}
            </div>
          </div>
        `;
    }).join('')}
    </div>`;
  }

  const STATUS_BADGES = {
    draft: { bg: '#f3f4f6', text: '#6b7280', label: 'Draft' },
    assigned: { bg: '#dbeafe', text: '#1e40af', label: 'Assigned' },
    travelling: { bg: '#fef3c7', text: '#92400e', label: 'Travelling' },
    on_site: { bg: '#fef3c7', text: '#92400e', label: 'On Site' },
    working: { bg: '#fef9c3', text: '#713f12', label: 'Working' },
    completed: { bg: '#dcfce7', text: '#166534', label: 'Completed' },
    internal_complete: { bg: '#dcfce7', text: '#166534', label: 'Done' },
    invoiced: { bg: '#dbeafe', text: '#1e40af', label: 'Invoiced' },
    pending: { bg: '#f3f4f6', text: '#6b7280', label: 'Pending' },
    in_progress: { bg: '#fef3c7', text: '#92400e', label: 'In Progress' },
    missed: { bg: '#fee2e2', text: '#991b1b', label: 'Missed' },
    todo: { bg: '#f3f4f6', text: '#6b7280', label: 'To Do' },
    done: { bg: '#dcfce7', text: '#166534', label: 'Done' },
  };

  function userInitials(name) {
    if (!name) return '';
    return name.split(',')[0].trim().split(' ').map(p => p[0]).join('').substring(0, 2).toUpperCase();
  }

  function isOverdue(e) {
    if (isDoneEvent(e)) return false;
    const today = todayStr();
    return e.date < today && e.status !== 'completed' && e.status !== 'invoiced' && e.status !== 'no_charge' && e.type !== 'leave';
  }

  function isDoneEvent(e) {
    return e.status === 'done' || e.status === 'completed' ||
      e.status === 'internal_complete' || e.status === 'invoiced' || e.status === 'no_charge';
  }

  function renderListEvent(e) {
    const col = colorFor(e.type);

    // Determine if this event/item is "done"
    const isDone = isDoneEvent(e);

    const statusBadge = e.status && STATUS_BADGES[e.status]
      ? `<span style="padding:2px 8px;border-radius:10px;font-size:.68rem;font-weight:700;background:${STATUS_BADGES[e.status].bg};color:${STATUS_BADGES[e.status].text}">${STATUS_BADGES[e.status].label}</span>`
      : '';

    const hasLink = e.link && (e.link.id || e.link.instance_id);
    const isChecklist = e.type === 'checklist';
    const overdue = isOverdue(e);
    const borderCol = overdue ? '#ef4444' : col.dot;
    const overdueStyle = overdue ? ';background:#fff5f5' : '';
    const clickAttr = hasLink
      ? `onclick="Cal._navigateEvent(${JSON.stringify(e.link).replace(/"/g, '&quot;')})" style="cursor:pointer;border-left:3px solid ${borderCol}${isDone ? ';opacity:.65' : ''}${overdueStyle};border-radius:var(--radius-sm)"`
      : `style="border-left:3px solid ${borderCol}${isDone ? ';opacity:.65' : ''}${overdueStyle};border-radius:var(--radius-sm)"`;

    return `
      <div class="cal-list-event" ${clickAttr}>
        <div style="display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem">
          <div style="display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;min-width:0">
            ${e.time ? `<span class="cal-list-time">${e.time}</span>` : ''}
            <span class="cal-list-label" style="${isDone ? 'text-decoration:line-through;opacity:.7' : ''}">${e.label}</span>
          </div>
          <div style="display:flex;align-items:center;gap:.3rem;flex-shrink:0">
            ${isDone
        ? `<span style="padding:2px 8px;border-radius:10px;font-size:.68rem;font-weight:700;background:#dcfce7;color:#166534">✓ Done</span>`
        : overdue
          ? `<span style="padding:2px 8px;border-radius:10px;font-size:.68rem;font-weight:700;background:#fee2e2;color:#991b1b">⚠ Overdue</span>`
          : statusBadge
      }
            <span class="badge" style="background:${col.bg};color:${col.text};font-size:.65rem">${e.type}</span>
          </div>
        </div>
        ${(e.sub || ((state.viewUserId === 'all' || state.viewUserId) && e.assigned_user)) ? `<div class="cal-list-sub">${[e.sub, (state.viewUserId === 'all' || state.viewUserId) && e.assigned_user ? '👤 ' + e.assigned_user : null].filter(Boolean).join(' · ')}</div>` : ''}
        ${isChecklist && !isDone ? `
          <div style="margin-top:.5rem" onclick="event.stopPropagation()">
            <button class="btn btn-outline btn-sm" style="padding:.2rem .6rem;font-size:.78rem;color:var(--primary);border-color:var(--primary)"
              onclick="Cal._navigateEvent(${JSON.stringify(e.link).replace(/"/g, '&quot;')})">📋 Open &amp; Fill In</button>
          </div>
        ` : ''}
        ${e.editable && !isChecklist && !isDone ? `
          <div style="display:flex;gap:.35rem;margin-top:.5rem" onclick="event.stopPropagation()">
            <button class="btn btn-ghost btn-sm" style="padding:.2rem .5rem;font-size:.78rem" onclick="Cal.openEditEvent('${e.id}')">✏️ Edit</button>
            ${Auth.can('calendar', 'edit') ? `<button class="btn btn-outline btn-sm" style="padding:.2rem .5rem;font-size:.78rem;color:var(--success);border-color:var(--success)" onclick="Cal.completeEvent('${e.id}', '${e.raw_id}')">✅ Mark Done</button>` : ''}
            <button class="btn btn-ghost btn-sm" style="padding:.2rem .5rem;font-size:.78rem;color:var(--danger)" onclick="Cal.deleteEvent('${e.id}')">🗑</button>
          </div>
        ` : e.editable && !isChecklist ? `
          <div style="display:flex;gap:.35rem;margin-top:.5rem" onclick="event.stopPropagation()">
            <button class="btn btn-ghost btn-sm" style="padding:.2rem .5rem;font-size:.78rem;color:var(--danger)" onclick="Cal.deleteEvent('${e.id}')">🗑 Delete</button>
          </div>
        ` : ''}
      </div>
    `;
  }

  function _navigateEvent(link) {
    if (link.instance_id) {
      // Navigate to checklists page and open the instance
      Router.navigate('checklists', { instance_id: link.instance_id });
    } else if (link.page && link.id) {
      Router.navigate(link.page, { id: link.id });
    }
  }

  async function setViewUser(val) {
    state.viewUserId = val || null;
    await loadEvents();
    renderBody();
    if (state.selectedDay) selectDay(state.selectedDay);
  }

  async function completeEvent(prefixedId, rawId) {
    const numId = rawId || prefixedId.replace('evt-', '');
    if (!await Modal.confirm('Mark this event as complete? It will move to the completed section.', 'Complete Event', false)) return;
    const res = await API.post('calendar/event_complete', { id: numId });
    if (res.success) {
      Toast.show('Event marked complete ✅', 'success');
      await loadEvents();
      renderBody();
      if (state.selectedDay) selectDay(state.selectedDay);
    } else Toast.show(res.message, 'error');
  }

  // ── Day panel ─────────────────────────────────────────────
  function selectDay(dateStr) {
    state.selectedDay = dateStr;
    const panel = document.getElementById('cal-day-panel');
    const titleEl = document.getElementById('cal-day-title');
    const evtsEl = document.getElementById('cal-day-events');

    if (!panel) return;

    const d = new Date(dateStr + 'T00:00');
    const evts = eventsForDate(dateStr);

    panel.style.display = 'flex';
    titleEl.textContent = d.toLocaleDateString('en-ZA', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });

    if (!evts.length) {
      evtsEl.innerHTML = `<div class="empty-state" style="padding:1rem"><div class="empty-icon">📭</div><p class="text-muted text-sm">Nothing scheduled</p></div>`;
    } else {
      const active = evts.filter(e => !isDoneEvent(e));
      const completed = evts.filter(e => isDoneEvent(e));

      let html = '';
      if (active.length) {
        html += `<div style="display:flex;flex-direction:column;gap:.6rem">${active.map(e => renderListEvent(e)).join('')}</div>`;
      }
      if (completed.length) {
        html += `
          <div style="margin-top:${active.length ? '1.25rem' : '0'}">
            <div style="display:flex;align-items:center;gap:.5rem;margin-bottom:.65rem;cursor:pointer;user-select:none"
                 onclick="this.nextElementSibling.style.display=this.nextElementSibling.style.display==='none'?'flex':'none';this.querySelector('.cal-done-arrow').style.transform=this.nextElementSibling.style.display==='none'?'rotate(-90deg)':''">
              <span style="font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)">✅ Completed (${completed.length})</span>
              <span class="cal-done-arrow" style="color:var(--text-muted);font-size:.7rem;transition:transform .2s">▾</span>
            </div>
            <div style="display:flex;flex-direction:column;gap:.6rem">
              ${completed.map(e => renderListEvent(e)).join('')}
            </div>
          </div>`;
      }
      evtsEl.innerHTML = html || `<div class="empty-state" style="padding:1rem"><div class="empty-icon">📭</div><p class="text-muted text-sm">Nothing scheduled</p></div>`;
    }

    // Re-render grid to show selected state
    renderBody();
  }

  function closeDayPanel() {
    state.selectedDay = null;
    const panel = document.getElementById('cal-day-panel');
    if (panel) panel.style.display = 'none';
    renderBody();
  }

  // ── Navigation ────────────────────────────────────────────
  async function prevMonth() {
    if (state.month === 1) { state.month = 12; state.year--; }
    else state.month--;
    state.selectedDay = null;
    closeDayPanel();
    await loadEvents();
    renderBody();
  }

  async function nextMonth() {
    if (state.month === 12) { state.month = 1; state.year++; }
    else state.month++;
    state.selectedDay = null;
    closeDayPanel();
    await loadEvents();
    renderBody();
  }

  async function goToday() {
    const now = new Date();
    state.year = now.getFullYear();
    state.month = now.getMonth() + 1;
    state.selectedDay = null;
    closeDayPanel();
    await loadEvents();
    renderBody();
  }

  async function setView(v) {
    state.view = v;
    // Update switcher buttons
    document.querySelectorAll('.cal-view-switcher button').forEach(b => {
      b.classList.toggle('active', b.textContent.toLowerCase().trim() === v);
    });
    renderBody();
  }

  // ── Add/Edit event modal ──────────────────────────────────
  function openAddEvent(defaultDate = null) {
    const today = defaultDate || new Date().toISOString().split('T')[0];
    Modal.open({
      id: 'add-cal-event',
      title: 'Add Event',
      body: `
        <form id="cal-event-form">
          <div class="form-group"><label class="form-label">Title <span class="required">*</span></label>
            <input name="title" class="form-control" required placeholder="Event title">
          </div>
          <div class="form-row form-row-2">
            <div class="form-group"><label class="form-label">Date <span class="required">*</span></label>
              <input type="date" name="event_date" class="form-control" required value="${today}">
            </div>
            <div class="form-group"><label class="form-label">Time</label>
              <input type="time" name="event_time" class="form-control">
            </div>
          </div>
          <div class="form-row form-row-2">
            <div class="form-group"><label class="form-label">Type</label>
              <select name="event_type" class="form-control">
                <option value="event">Event</option>
                <option value="meeting">Meeting</option>
                <option value="reminder">Reminder</option>
                <option value="deadline">Deadline</option>
              </select>
            </div>
            <div class="form-group"><label class="form-label">Colour</label>
              <select name="color" class="form-control">
                <option value="teal">Teal (default)</option>
                <option value="blue">Blue</option>
                <option value="purple">Purple</option>
                <option value="green">Green</option>
                <option value="orange">Orange</option>
              </select>
            </div>
          </div>
          <div class="form-group"><label class="form-label">Description</label>
            <textarea name="description" class="form-control" rows="2" placeholder="Optional notes..."></textarea>
          </div>
          <div class="form-group">
            <label class="d-flex align-center gap-2 text-sm" style="cursor:pointer">
              <input type="checkbox" name="is_shared" value="1"> Share with team (visible to all users)
            </label>
          </div>
        </form>
      `,
      footer: `<button class="btn btn-ghost" onclick="Modal.close()">Cancel</button>
      <button class="btn btn-primary" onclick="Cal.submitEvent()"><span class="btn-text">Save Event</span></button>`
    });
  }

  async function submitEvent(id = null) {
    const btn = document.querySelector('#modal-add-cal-event .btn-primary, #modal-edit-cal-event .btn-primary');
    if (btn) btn.classList.add('loading');
    const data = getFormData('cal-event-form');
    data.action = id ? 'update' : 'create';
    if (id) data.id = id;
    const res = await API.post('calendar/event_save', data);
    if (btn) btn.classList.remove('loading');
    if (res.success) {
      Toast.show(id ? 'Event updated.' : 'Event added.', 'success');
      Modal.close();
      await loadEvents();
      renderBody();
      if (state.selectedDay) selectDay(state.selectedDay);
    } else Toast.show(res.message, 'error');
  }

  async function deleteEvent(idStr) {
    // idStr format is "evt-123"
    const numId = idStr.replace('evt-', '');
    const ok = await Modal.confirm('Delete this event?', 'This cannot be undone.');
    if (!ok) return;
    const res = await API.post('calendar/event_save', { action: 'delete', id: numId });
    if (res.success) {
      Toast.show('Event deleted.', 'success');
      await loadEvents();
      renderBody();
      if (state.selectedDay) selectDay(state.selectedDay);
    } else Toast.show(res.message, 'error');
  }

  function openEditEvent(idStr) {
    // Find event in state
    const evt = state.events.find(e => e.id === idStr);
    if (!evt) return;
    const numId = idStr.replace('evt-', '');
    Modal.open({
      id: 'edit-cal-event',
      title: 'Edit Event',
      body: `
        <form id="cal-event-form">
          <div class="form-group"><label class="form-label">Title <span class="required">*</span></label>
            <input name="title" class="form-control" required value="${evt.label}">
          </div>
          <div class="form-row form-row-2">
            <div class="form-group"><label class="form-label">Date <span class="required">*</span></label>
              <input type="date" name="event_date" class="form-control" required value="${evt.date}">
            </div>
            <div class="form-group"><label class="form-label">Time</label>
              <input type="time" name="event_time" class="form-control" value="${evt.time || ''}">
            </div>
          </div>
          <div class="form-group"><label class="form-label">Description</label>
            <textarea name="description" class="form-control" rows="2">${evt.sub || ''}</textarea>
          </div>
        </form>
      `,
      footer: `<button class="btn btn-ghost" onclick="Modal.close()">Cancel</button>
      <button class="btn btn-primary" onclick="Cal.submitEvent(${numId})"><span class="btn-text">Save</span></button>`
    });
  }


  // ══════════════════════════════════════════════════════════
  // DRAG & DROP ENGINE (desktop + mobile)
  // ══════════════════════════════════════════════════════════

  let _drag = {
    eventId: null, fromDate: null, label: null, bg: null, fg: null,
    ghost: null, moved: false, active: false,
  };

  // ── Desktop HTML5 drag ────────────────────────────────────
  function _dragStart(e) {
    const pill = e.currentTarget;
    _drag.eventId = pill.dataset.eventId;
    _drag.fromDate = pill.dataset.eventDate;
    _drag.label = pill.dataset.eventLabel;
    _drag.bg = pill.dataset.eventBg;
    _drag.fg = pill.dataset.eventFg;
    _drag.moved = false;
    _drag.active = true;
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/plain', _drag.eventId);
    pill.style.opacity = '.4';
  }

  function _dragEnd(e) {
    e.currentTarget.style.opacity = '';
    _drag.active = false;
    document.querySelectorAll('.cal-cell-drop-over').forEach(el => el.classList.remove('cal-cell-drop-over'));
  }

  function _dragOver(e) {
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';
    const cell = e.currentTarget;
    document.querySelectorAll('.cal-cell-drop-over').forEach(el => el !== cell && el.classList.remove('cal-cell-drop-over'));
    cell.classList.add('cal-cell-drop-over');
  }

  function _dragLeave(e) {
    e.currentTarget.classList.remove('cal-cell-drop-over');
  }

  async function _drop(e) {
    e.preventDefault();
    const cell = e.currentTarget;
    cell.classList.remove('cal-cell-drop-over');
    const newDate = cell.dataset.date;
    if (!newDate || !_drag.eventId || newDate === _drag.fromDate) return;
    _drag.moved = true;
    await _reschedule(_drag.eventId, _drag.fromDate, newDate);
  }

  function _didDrag() {
    return _drag.moved;
  }

  // ── Mobile touch drag ─────────────────────────────────────
  let _touch = { startX: 0, startY: 0, pill: null, movedEnough: false };

  function _touchStart(e) {
    const pill = e.currentTarget;
    _touch.pill = pill;
    _touch.startX = e.touches[0].clientX;
    _touch.startY = e.touches[0].clientY;
    _touch.movedEnough = false;
    _drag.eventId = pill.dataset.eventId;
    _drag.fromDate = pill.dataset.eventDate;
    _drag.label = pill.dataset.eventLabel;
    _drag.bg = pill.dataset.eventBg;
    _drag.fg = pill.dataset.eventFg;
    _drag.moved = false;
    _drag.active = true;
  }

  function _touchMove(e) {
    const dx = e.touches[0].clientX - _touch.startX;
    const dy = e.touches[0].clientY - _touch.startY;
    if (!_touch.movedEnough && Math.sqrt(dx * dx + dy * dy) < 8) return;
    _touch.movedEnough = true;
    e.preventDefault(); // stop scroll

    const x = e.touches[0].clientX;
    const y = e.touches[0].clientY;

    // Create/move ghost
    if (!_drag.ghost) {
      const g = document.createElement('div');
      g.id = 'cal-drag-ghost';
      g.textContent = _drag.label;
      g.style.cssText = `position:fixed;z-index:9999;pointer-events:none;padding:3px 8px;
        border-radius:4px;font-size:.72rem;font-weight:600;max-width:180px;white-space:nowrap;
        overflow:hidden;text-overflow:ellipsis;box-shadow:0 4px 16px rgba(0,0,0,.25);
        background:${_drag.bg};color:${_drag.fg};transform:translate(-50%,-50%) scale(1.08);
        opacity:.9;transition:none`;
      document.body.appendChild(g);
      _drag.ghost = g;
      _touch.pill.style.opacity = '.3';
    }
    _drag.ghost.style.left = x + 'px';
    _drag.ghost.style.top = y + 'px';

    // Highlight cell under finger
    _drag.ghost.style.display = 'none';
    const el = document.elementFromPoint(x, y);
    _drag.ghost.style.display = '';
    const cell = el?.closest('.cal-cell:not(.cal-cell-other)');
    document.querySelectorAll('.cal-cell-drop-over').forEach(c => c !== cell && c.classList.remove('cal-cell-drop-over'));
    if (cell) cell.classList.add('cal-cell-drop-over');
  }

  async function _touchEnd(e) {
    if (_drag.ghost) { _drag.ghost.remove(); _drag.ghost = null; }
    if (_touch.pill) _touch.pill.style.opacity = '';
    document.querySelectorAll('.cal-cell-drop-over').forEach(c => c.classList.remove('cal-cell-drop-over'));
    _drag.active = false;

    if (!_touch.movedEnough) return; // it was a tap, not a drag

    const x = e.changedTouches[0].clientX;
    const y = e.changedTouches[0].clientY;
    const el = document.elementFromPoint(x, y);
    const cell = el?.closest('.cal-cell:not(.cal-cell-other)');
    const newDate = cell?.dataset.date;
    if (!newDate || !_drag.eventId || newDate === _drag.fromDate) return;
    _drag.moved = true;
    await _reschedule(_drag.eventId, _drag.fromDate, newDate);
  }

  // ── Shared reschedule handler ─────────────────────────────
  async function _reschedule(eventId, fromDate, newDate) {
    // Optimistic update in state
    const ev = state.events.find(e => e.id === eventId);
    if (ev) ev.date = newDate;
    renderBody();
    if (state.selectedDay === fromDate || state.selectedDay === newDate) selectDay(state.selectedDay);

    const res = await API.post('calendar/reschedule', { event_id: eventId, new_date: newDate });
    if (res.success) {
      Toast.show(`Moved to ${Fmt.date(newDate)} ✓`, 'success');
    } else {
      // Revert
      Toast.show(res.message || 'Could not reschedule.', 'error');
      if (ev) ev.date = fromDate;
      renderBody();
    }
  }

  return { render, prevMonth, nextMonth, goToday, setView, selectDay, setViewUser, closeDayPanel, openAddEvent, openEditEvent, submitEvent, deleteEvent, completeEvent, _navigateEvent, _dragStart, _dragEnd, _dragOver, _dragLeave, _drop, _didDrag, _touchStart, _touchMove, _touchEnd, state: () => state };
})();

// Global alias for router
async function renderCalendar(params = {}) {
  await Cal.render(params);
}