// ============================================================
// Meetings & Events Module
// ============================================================

let mtgState = {
  page: 1, search: '', type: '', status: '', my_only: 1,
};

// ── Entry Point ───────────────────────────────────────────────
async function renderMeetings(params = {}) {
  if (params.id) return renderMeetingRoom(params.id);

  // If arriving with a tab param, set state first
  if (params.tab) mtgState.type = params.tab;

  const content = document.getElementById('page-content');
  const canCreate = Auth.can('meetings', 'create') || Auth.isAdmin() || Auth.isDev();

  // "New" button label and action depends on active tab
  const tabActions = {
    '': { label: '+ New Meeting', fn: 'openMeetingModal()' },
    'internal': { label: '+ New Meeting', fn: 'openMeetingModal()' },
    'client': { label: '+ New Meeting', fn: 'openMeetingModal()' },
    'task': { label: '+ New Task', fn: 'openTaskModal()' },
    'reminder': { label: '+ New Reminder', fn: 'openReminderModal()' },
  };
  const act = tabActions[mtgState.type] || tabActions[''];

  content.innerHTML = `
    <div class="section-header">
      <div>
        <h3>Events</h3>
        <p class="text-muted text-sm">Meetings, tasks and reminders</p>
      </div>
      <div class="d-flex gap-2 flex-wrap">
        ${canCreate ? `<button class="btn btn-primary" id="mtg-new-btn" onclick="${act.fn}">${act.label}</button>` : ''}
      </div>
    </div>

    <div class="tabs mb-3" id="mtg-tabs">
      <button class="tab-btn ${mtgState.type === '' ? 'active' : ''}"        data-tab=""         onclick="mtgSetTab(this,'')">All</button>
      <button class="tab-btn ${mtgState.type === 'internal' ? 'active' : ''}" data-tab="internal" onclick="mtgSetTab(this,'internal')">👥 Internal</button>
      <button class="tab-btn ${mtgState.type === 'client' ? 'active' : ''}"   data-tab="client"   onclick="mtgSetTab(this,'client')">🏢 Client</button>
      <button class="tab-btn ${mtgState.type === 'task' ? 'active' : ''}"     data-tab="task"     onclick="mtgSetTab(this,'task')">✅ Tasks</button>
      <button class="tab-btn ${mtgState.type === 'reminder' ? 'active' : ''}" data-tab="reminder" onclick="mtgSetTab(this,'reminder')">🔔 Reminders</button>
    </div>

    <div id="mtg-tab-body"></div>
  `;

  _renderTabBody();
}

function mtgSetTab(btn, type) {
  document.querySelectorAll('#mtg-tabs .tab-btn').forEach(b => b.classList.remove('active'));
  btn.classList.add('active');
  mtgState.type = type;
  mtgState.page = 1;
  // Update new button
  const tabActions = {
    '': 'openMeetingModal()', 'internal': 'openMeetingModal()', 'client': 'openMeetingModal()',
    'task': 'openTaskModal()', 'reminder': 'openReminderModal()',
  };
  const tabLabels = { '': '+ New Meeting', 'internal': '+ New Meeting', 'client': '+ New Meeting', 'task': '+ New Task', 'reminder': '+ New Reminder' };
  const newBtn = document.getElementById('mtg-new-btn');
  if (newBtn) { newBtn.textContent = tabLabels[type] || '+ New Event'; newBtn.setAttribute('onclick', tabActions[type] || 'openMeetingModal()'); }
  _renderTabBody();
}

function _renderTabBody() {
  const body = document.getElementById('mtg-tab-body');
  if (!body) return;
  if (mtgState.type === 'task') { renderTasksInline(body); return; }
  if (mtgState.type === 'reminder') { renderRemindersInline(body); return; }
  // Meetings list
  body.innerHTML = `
    <div class="card">
      <div class="card-body-sm" style="border-bottom:1px solid var(--border)">
        <div class="filter-bar" style="margin-bottom:0;flex-wrap:wrap;gap:.5rem">
          <div class="search-wrap flex-1" style="min-width:180px">
            <svg class="search-icon" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
            <input class="form-control" placeholder="Search..." oninput="mtgSearchDebounced(this.value)" value="${mtgState.search || ''}">
          </div>
          <select class="form-control" style="width:150px" onchange="mtgState.status=this.value;loadMeetings(1)">
            <option value="">All Status</option>
            <option value="scheduled">Scheduled</option>
            <option value="in_progress">In Progress</option>
            <option value="completed">Completed</option>
            <option value="cancelled">Cancelled</option>
          </select>
          <label class="d-flex align-center gap-2 text-sm" style="cursor:pointer">
            <input type="checkbox" ${mtgState.my_only ? 'checked' : ''} onchange="mtgState.my_only=this.checked?1:0;loadMeetings(1)">
            My meetings
          </label>
        </div>
      </div>
      <div id="mtg-list-wrap"><div class="loading-overlay"><div class="spinner"></div></div></div>
      <div id="mtg-pagination"></div>
    </div>`;
  loadMeetings(1);
}

const mtgSearchDebounced = debounce(val => { mtgState.search = val; loadMeetings(1); }, 350);

async function loadMeetings(page = 1) {
  mtgState.page = page;
  const wrap = document.getElementById('mtg-list-wrap');
  if (!wrap) return;
  wrap.innerHTML = '<div class="loading-overlay"><div class="spinner"></div></div>';
  const res = await API.post('meetings/index', { action: 'list', page, limit: 20, ...mtgState });
  if (!res.success) { wrap.innerHTML = `<div class="empty-state"><div class="empty-title">${res.message}</div></div>`; return; }
  const meetings = res.data.meetings || [];
  if (!meetings.length) {
    wrap.innerHTML = `<div class="empty-state"><div class="empty-icon">📅</div><div class="empty-title">No events found</div><p class="text-muted text-sm">Create your first event to get started.</p></div>`;
    document.getElementById('mtg-pagination').innerHTML = '';
    return;
  }

  const TYPE_META = {
    internal: { icon: '👥', label: 'Internal', color: '#dbeafe', text: '#1e40af' },
    client: { icon: '🏢', label: 'Client', color: '#dcfce7', text: '#166534' },
    personal: { icon: '👤', label: 'Personal', color: '#fce7f3', text: '#831843' },
    task: { icon: '✅', label: 'Task', color: '#f3f4f6', text: '#374151' },
    reminder: { icon: '🔔', label: 'Reminder', color: '#fef9c3', text: '#713f12' },
    deadline: { icon: '⚠️', label: 'Deadline', color: '#fee2e2', text: '#991b1b' },
  };
  const STATUS_META = {
    scheduled: { bg: '#dbeafe', text: '#1e40af', label: 'Scheduled' },
    in_progress: { bg: '#fef9c3', text: '#713f12', label: 'In Progress' },
    completed: { bg: '#dcfce7', text: '#166534', label: 'Completed' },
    cancelled: { bg: '#f3f4f6', text: '#9ca3af', label: 'Cancelled' },
  };
  const PRIORITY_DOT = { low: '#9ca3af', normal: '#3b82f6', high: '#f97316', urgent: '#ef4444' };

  if (window.innerWidth < 768) {
    wrap.innerHTML = `<div style="display:flex;flex-direction:column;gap:0">
      ${meetings.map(m => {
      const tm = TYPE_META[m.type] || TYPE_META.internal;
      const sm = STATUS_META[m.status] || STATUS_META.scheduled;
      return `<div style="padding:.875rem 1rem;border-bottom:1px solid var(--border);cursor:pointer" onclick="Router.navigate('meetings',{id:${m.id}})">
          <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem;margin-bottom:.3rem">
            <div style="font-weight:600;font-size:.9rem">${mtgH(m.title)}</div>
            <span style="background:${sm.bg};color:${sm.text};padding:2px 8px;border-radius:10px;font-size:.7rem;font-weight:700;white-space:nowrap">${sm.label}</span>
          </div>
          <div style="font-size:.78rem;color:var(--text-muted)">${Fmt.date(m.meeting_date)}${m.start_time ? ' · ' + m.start_time.slice(0, 5) : ''} · <span style="background:${tm.color};color:${tm.text};padding:1px 6px;border-radius:10px">${tm.icon} ${tm.label}</span></div>
          ${m.client_name ? `<div style="font-size:.75rem;color:var(--text-muted);margin-top:2px">🏢 ${mtgH(m.client_name)}</div>` : ''}
          <div style="font-size:.75rem;color:var(--text-muted);margin-top:2px">👤 ${m.attendee_count} attendee${m.attendee_count != 1 ? 's' : ''} · ${m.accepted_count} accepted</div>
        </div>`;
    }).join('')}
    </div>`;
  } else {
    wrap.innerHTML = `<div class="table-wrap" style="border:none;border-radius:0"><table>
      <thead><tr><th>Title</th><th>Type</th><th>Date &amp; Time</th><th>Attendees</th><th>Status</th><th>Priority</th><th></th></tr></thead>
      <tbody>
        ${meetings.map(m => {
      const tm = TYPE_META[m.type] || TYPE_META.internal;
      const sm = STATUS_META[m.status] || STATUS_META.scheduled;
      const pd = PRIORITY_DOT[m.priority] || PRIORITY_DOT.normal;
      return `<tr style="cursor:pointer" onclick="Router.navigate('meetings',{id:${m.id}})">
            <td>
              <div class="td-bold">${mtgH(m.title)}</div>
              ${m.client_name ? `<div class="text-xs text-muted">🏢 ${mtgH(m.client_name)}</div>` : ''}
              ${m.location ? `<div class="text-xs text-muted">📍 ${mtgH(m.location)}</div>` : ''}
            </td>
            <td><span style="background:${tm.color};color:${tm.text};padding:2px 10px;border-radius:10px;font-size:.75rem;font-weight:600">${tm.icon} ${tm.label}</span></td>
            <td class="text-sm">${Fmt.date(m.meeting_date)}${m.start_time ? '<br><span class="text-muted text-xs">' + m.start_time.slice(0, 5) + (m.end_time ? ' – ' + m.end_time.slice(0, 5) : '') + '</span>' : ''}</td>
            <td class="text-sm">${m.attendee_count} total · <span style="color:#16a34a">${m.accepted_count} ✓</span>${m.declined_count ? ` · <span style="color:#dc2626">${m.declined_count} ✗</span>` : ''}</td>
            <td><span style="background:${sm.bg};color:${sm.text};padding:2px 10px;border-radius:10px;font-size:.75rem;font-weight:700">${sm.label}</span></td>
            <td><span style="display:inline-flex;align-items:center;gap:4px;font-size:.8rem"><span style="width:8px;height:8px;border-radius:50%;background:${pd};flex-shrink:0"></span>${Fmt.capitalize(m.priority)}</span></td>
            <td onclick="event.stopPropagation()" style="white-space:nowrap">
              <button class="btn btn-ghost btn-sm" onclick="Router.navigate('meetings',{id:${m.id}})">Open</button>
              <button class="btn btn-ghost btn-sm" style="color:var(--danger)" onclick="deleteMeeting(${m.id})">🗑</button>
            </td>
          </tr>`;
    }).join('')}
      </tbody>
    </table></div>`;
  }
  renderPagination('mtg-pagination', res.data.pagination, `p => loadMeetings(p)`);
}

// ── Meeting Room (detail / live page) ────────────────────────
async function renderMeetingRoom(id) {
  const content = document.getElementById('page-content');
  content.innerHTML = `<div class="loading-overlay" style="min-height:300px"><div class="spinner"></div></div>`;
  const res = await API.post('meetings/index', { action: 'get', id });
  if (!res.success) { Toast.show(res.message, 'error'); Router.navigate('meetings'); return; }
  const m = res.data.meeting;

  window._mtgCurrentId = id;
  window._mtgRecorder = null;
  window._mtgChunks = [];

  const TYPE_META = {
    internal: { icon: '👥', color: '#dbeafe', text: '#1e40af' },
    client: { icon: '🏢', color: '#dcfce7', text: '#166534' },
    personal: { icon: '👤', color: '#fce7f3', text: '#831843' },
    task: { icon: '✅', color: '#f3f4f6', text: '#374151' },
    reminder: { icon: '🔔', color: '#fef9c3', text: '#713f12' },
    deadline: { icon: '⚠️', color: '#fee2e2', text: '#991b1b' },
  };
  const RSVP_META = {
    pending: { icon: '⏳', color: '#d97706', label: 'Pending' },
    accepted: { icon: '✅', color: '#16a34a', label: 'Accepted' },
    declined: { icon: '❌', color: '#dc2626', label: 'Declined' },
    reschedule_requested: { icon: '🔄', color: '#0284c7', label: 'Reschedule' },
  };

  const tm = TYPE_META[m.type] || TYPE_META.internal;
  const canEdit = Auth.isAdmin() || Auth.isDev() || (m.created_by == Auth.getCurrentUser()?.id);
  const isActive = m.status === 'in_progress';
  const isCompleted = m.status === 'completed';

  const timeStr = m.start_time
    ? m.start_time.slice(0, 5) + (m.end_time ? ' – ' + m.end_time.slice(0, 5) : '')
    : 'All Day';

  content.innerHTML = `
    <div class="section-header">
      <div>
        <button class="btn btn-ghost btn-sm mb-2" onclick="Router.navigate('meetings')">← Back</button>
        <h3>${mtgH(m.title)}</h3>
        <p class="text-muted text-sm">
          <span style="background:${tm.color};color:${tm.text};padding:2px 8px;border-radius:10px;font-size:.75rem;font-weight:600;margin-right:.5rem">${tm.icon} ${Fmt.capitalize(m.type)}</span>
          ${Fmt.date(m.meeting_date)} · ${timeStr}
          ${m.location ? ` · 📍 ${mtgH(m.location)}` : ''}
        </p>
      </div>
      <div class="d-flex gap-2 flex-wrap align-center">
        ${!isCompleted && !isActive && canEdit ? `<button class="btn btn-primary" onclick="startMeeting(${id})">▶ Start Meeting</button>` : ''}
        ${isActive ? `<button class="btn btn-outline" style="color:var(--success);border-color:var(--success)" onclick="completeMeeting(${id})">✓ End &amp; Complete</button>` : ''}
        ${canEdit ? `<button class="btn btn-ghost btn-sm" onclick="openMeetingModal(${id})">✏️ Edit</button>` : ''}
        ${isCompleted ? `<span class="badge badge-success badge-lg">✓ Completed</span>` : ''}
      </div>
    </div>

    <div style="display:grid;grid-template-columns:1fr 340px;gap:1.25rem;align-items:start" id="mtg-room-grid">

      <!-- LEFT COLUMN -->
      <div style="display:flex;flex-direction:column;gap:1.25rem">

        <!-- Info card -->
        <div class="card">
          <div class="card-header"><h5 style="margin:0">📋 Details</h5></div>
          <div class="card-body">
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem">
              <div><div class="form-label">Status</div><span class="badge badge-${m.status === 'completed' ? 'success' : m.status === 'in_progress' ? 'warning' : 'muted'}">${Fmt.capitalize(m.status.replace('_', ' '))}</span></div>
              <div><div class="form-label">Priority</div><span>${Fmt.capitalize(m.priority)}</span></div>
              ${m.client_name ? `<div><div class="form-label">Client</div><span>${mtgH(m.client_name)}</span></div>` : ''}
              <div><div class="form-label">Organised by</div><span>${mtgH(m.created_by_name)}</span></div>
            </div>
            ${m.description ? `<div class="mt-3"><div class="form-label">Description</div><p class="text-sm" style="margin:0">${mtgH(m.description)}</p></div>` : ''}
          </div>
        </div>

        <!-- Recording card (only when meeting is active) -->
        <div class="card" id="mtg-recording-card">
          <div class="card-header" style="display:flex;justify-content:space-between;align-items:center">
            <h5 style="margin:0">🎙 Recording</h5>
            <div class="d-flex gap-2">
              <button class="btn btn-primary btn-sm" id="rec-start-btn" onclick="startRecording()">⏺ Start Recording</button>
              <button class="btn btn-danger btn-sm" id="rec-stop-btn" style="display:none" onclick="stopRecording()">⏹ Stop &amp; Save</button>
              <span id="rec-timer" style="display:none;font-size:.85rem;font-weight:600;color:var(--danger);align-self:center"></span>
            </div>
          </div>
          <div class="card-body">
            <div id="rec-status" class="text-sm text-muted">Click "Start Recording" to record the meeting audio.</div>
            <div id="rec-files" style="margin-top:.75rem">
              ${(m.files || []).filter(f => f.file_type === 'recording').map(f => _mtgFileCard(f)).join('')}
            </div>
          </div>
        </div>

        <!-- Notes card -->
        <div class="card">
          <div class="card-header"><h5 style="margin:0">📝 Meeting Notes</h5></div>
          <div class="card-body">
            <div id="mtg-notes-list" style="display:flex;flex-direction:column;gap:.75rem;margin-bottom:1rem">
              ${m.notes && m.notes.length ? m.notes.map(n => _mtgNoteCard(n)).join('') : '<p class="text-muted text-sm">No notes yet.</p>'}
            </div>
            <div style="border-top:1px solid var(--border);padding-top:1rem">
              <textarea id="mtg-note-input" class="form-control" rows="3" placeholder="Add a note..."></textarea>
              <button class="btn btn-primary btn-sm mt-2" onclick="saveMeetingNote(${id})">💾 Save Note</button>
            </div>
          </div>
        </div>

        <!-- Files & Images card -->
        <div class="card">
          <div class="card-header" style="display:flex;justify-content:space-between;align-items:center">
            <h5 style="margin:0">📎 Files &amp; Images</h5>
            <label class="btn btn-outline btn-sm" style="cursor:pointer;margin:0">
              + Upload
              <input type="file" multiple style="display:none" onchange="uploadMeetingFiles(${id}, this)">
            </label>
          </div>
          <div class="card-body" id="mtg-files-grid">
            ${(m.files || []).filter(f => f.file_type !== 'recording').length
      ? `<div style="display:flex;flex-wrap:wrap;gap:.75rem">${(m.files || []).filter(f => f.file_type !== 'recording').map(f => _mtgFileCard(f)).join('')}</div>`
      : '<p class="text-muted text-sm">No files uploaded yet.</p>'}
          </div>
        </div>

      </div>

      <!-- RIGHT COLUMN -->
      <div style="display:flex;flex-direction:column;gap:1.25rem">

        <!-- Attendees card -->
        <div class="card">
          <div class="card-header" style="display:flex;justify-content:space-between;align-items:center">
            <h5 style="margin:0">👥 Attendees (${(m.attendees || []).length})</h5>
          </div>
          <div style="padding:.5rem 0">
            ${m.attendees && m.attendees.length ? m.attendees.map(a => {
        const rm = RSVP_META[a.rsvp_status] || RSVP_META.pending;
        const name = a.user_name || a.contact_name || a.name || a.email;
        const initials = (name || '?').split(' ').map(p => p[0]).join('').slice(0, 2).toUpperCase();

        // Parse proposed reschedule details
        let rescheduleHtml = '';
        if (a.rsvp_status === 'reschedule_requested' && a.rsvp_note) {
          const parts = {};
          a.rsvp_note.split('|').forEach(p => {
            if (p.startsWith('date:')) parts.date = p.slice(5);
            if (p.startsWith('time:')) parts.time = p.slice(5);
            if (p.startsWith('place:')) parts.place = p.slice(6);
          });
          const rows = [
            parts.date ? `<div class="text-xs" style="margin-bottom:2px">📅 <strong>${parts.date}</strong></div>` : '',
            parts.time ? `<div class="text-xs" style="margin-bottom:2px">⏰ <strong>${parts.time}</strong></div>` : '',
            parts.place ? `<div class="text-xs" style="margin-bottom:2px">📍 <strong>${mtgH(parts.place)}</strong></div>` : '',
          ].join('');
          if (rows && canEdit) {
            rescheduleHtml = `
                    <div style="background:#e0f2fe;border:1px solid #7dd3fc;border-radius:6px;padding:.5rem .7rem;margin-top:.4rem">
                      <div style="font-size:.7rem;font-weight:700;color:#0284c7;text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px">Proposed</div>
                      ${rows}
                    </div>
                    <div style="display:flex;gap:.4rem;margin-top:.4rem">
                      <button class="btn btn-sm" style="flex:1;background:#16a34a;color:#fff;font-size:.72rem;padding:.3rem .5rem" onclick="event.stopPropagation();organiserAction(${id},${a.id},'accept_reschedule','${mtgH(a.rsvp_note).replace(/'/g, "\\'")}')">✅ Accept</button>
                      <button class="btn btn-ghost btn-sm" style="flex:1;font-size:.72rem;padding:.3rem .5rem" onclick="event.stopPropagation();organiserAction(${id},${a.id},'keep_original','')">Keep Original</button>
                    </div>`;
          }
        }

        return `<div style="display:flex;align-items:flex-start;gap:.75rem;padding:.6rem 1rem;border-bottom:1px solid var(--border)">
                <div style="width:32px;height:32px;border-radius:50%;background:#1b4b8a;color:#fff;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;flex-shrink:0;margin-top:2px">${initials}</div>
                <div style="flex:1;min-width:0">
                  <div style="font-weight:600;font-size:.875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${mtgH(name)}</div>
                  <div style="font-size:.72rem;color:var(--text-muted)">${a.email || ''}</div>
                  ${rescheduleHtml}
                </div>
                <div style="text-align:right;flex-shrink:0">
                  <div style="font-size:.72rem;font-weight:600;color:${rm.color}">${rm.icon} ${rm.label}</div>
                  ${canEdit && !a.invite_sent ? `<button class="btn btn-ghost btn-sm" style="font-size:.7rem;padding:.15rem .4rem" onclick="resendInvite(${id},${a.id})">📧 Invite</button>` : ''}
                  ${canEdit && a.invite_sent ? `<button class="btn btn-ghost btn-sm" style="font-size:.7rem;padding:.15rem .4rem;color:var(--text-muted)" onclick="resendInvite(${id},${a.id})">↩ Resend</button>` : ''}
                </div>
              </div>`;
      }).join('') : '<p class="text-sm text-muted" style="padding:.75rem 1rem">No attendees added.</p>'}
          </div>
        </div>

        <!-- RSVP summary -->
        ${m.attendees && m.attendees.length ? `
        <div class="card">
          <div class="card-body">
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:.75rem;text-align:center">
              ${[['accepted', '✅', '#16a34a'], ['pending', '⏳', '#d97706'], ['declined', '❌', '#dc2626'], ['reschedule_requested', '🔄', '#0284c7']].map(([status, icon, color]) => {
        const count = (m.attendees || []).filter(a => a.rsvp_status === status).length;
        return `<div style="background:${color}12;border-radius:8px;padding:.75rem"><div style="font-size:1.3rem;font-weight:700;color:${color}">${count}</div><div style="font-size:.7rem;color:${color};font-weight:600">${icon} ${Fmt.capitalize(status.replace('_', ' '))}</div></div>`;
      }).join('')}
            </div>
          </div>
        </div>` : ''}

      </div>
    </div>
  `;

  // Make responsive on small screens
  if (window.innerWidth < 900) {
    const grid = document.getElementById('mtg-room-grid');
    if (grid) grid.style.gridTemplateColumns = '1fr';
  }
}

// ── Meeting note helpers ──────────────────────────────────────
function _mtgNoteCard(n) {
  return `<div style="background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:.75rem" id="mtg-note-${n.id}">
    <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem">
      <div style="font-size:.78rem;color:var(--text-muted);margin-bottom:.25rem">
        <strong>${mtgH(n.user_name)}</strong> · ${Fmt.datetime(n.created_at)}
      </div>
    </div>
    <div style="font-size:.875rem;white-space:pre-wrap">${mtgH(n.content)}</div>
  </div>`;
}

async function saveMeetingNote(meetingId) {
  const input = document.getElementById('mtg-note-input');
  const content = input?.value?.trim();
  if (!content) return;
  const res = await API.post('meetings/index', { action: 'save_note', meeting_id: meetingId, content });
  if (res.success) {
    const list = document.getElementById('mtg-notes-list');
    if (list) {
      if (list.querySelector('.text-muted')) list.innerHTML = '';
      list.insertAdjacentHTML('beforeend', _mtgNoteCard(res.data));
    }
    input.value = '';
    Toast.show('Note saved.', 'success');
  } else Toast.show(res.message, 'error');
}

// ── File helpers ──────────────────────────────────────────────
function _mtgFileCard(f) {
  const isImage = f.file_type === 'image' || (f.mime_type || '').startsWith('image/');
  const isRec = f.file_type === 'recording';
  const url = `./api/meetings/uploads/${f.filename}`;
  if (isImage) {
    return `<div style="position:relative">
      <img src="${url}" style="width:100px;height:80px;object-fit:cover;border-radius:6px;border:1px solid var(--border);cursor:pointer" onclick="openImageLightbox('${url}')" title="${mtgH(f.original_name)}">
    </div>`;
  }
  if (isRec) {
    return `<div style="background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:.6rem .75rem;margin-bottom:.5rem">
      <div style="font-size:.8rem;font-weight:600;margin-bottom:.3rem">🎙 ${mtgH(f.original_name)}</div>
      <audio controls src="${url}" style="width:100%;height:32px"></audio>
    </div>`;
  }
  return `<div style="display:flex;align-items:center;gap:.5rem;padding:.4rem .6rem;background:var(--bg);border:1px solid var(--border);border-radius:6px">
    <span style="font-size:1.1rem">📄</span>
    <a href="${url}" target="_blank" style="font-size:.8rem;color:var(--primary);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px" title="${mtgH(f.original_name)}">${mtgH(f.original_name)}</a>
  </div>`;
}

async function uploadMeetingFiles(meetingId, input) {
  const files = [...input.files];
  if (!files.length) return;
  let uploaded = 0;
  for (const file of files) {
    const fd = new FormData();
    fd.append('file', file);
    fd.append('meeting_id', meetingId);
    const res = await API.postForm('meetings/upload', fd);
    if (res.success) {
      uploaded++;
      const f = res.data;
      const grid = document.getElementById('mtg-files-grid');
      if (grid) {
        if (grid.querySelector('.text-muted')) grid.innerHTML = '<div style="display:flex;flex-wrap:wrap;gap:.75rem" id="mtg-files-inner"></div>';
        const inner = grid.querySelector('div') || grid;
        inner.insertAdjacentHTML('beforeend', _mtgFileCard(f));
      }
    }
  }
  input.value = '';
  if (uploaded) Toast.show(`${uploaded} file(s) uploaded.`, 'success');
}

// ── Recording ─────────────────────────────────────────────────
let _recTimer = null;
let _recSeconds = 0;

async function startRecording() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    window._mtgRecorder = new MediaRecorder(stream);
    window._mtgChunks = [];
    window._mtgRecorder.ondataavailable = e => window._mtgChunks.push(e.data);
    window._mtgRecorder.start(1000);

    document.getElementById('rec-start-btn').style.display = 'none';
    document.getElementById('rec-stop-btn').style.display = '';
    const timerEl = document.getElementById('rec-timer');
    timerEl.style.display = 'inline';
    _recSeconds = 0;
    _recTimer = setInterval(() => {
      _recSeconds++;
      const m = String(Math.floor(_recSeconds / 60)).padStart(2, '0');
      const s = String(_recSeconds % 60).padStart(2, '0');
      timerEl.textContent = `⏺ ${m}:${s}`;
    }, 1000);
    document.getElementById('rec-status').innerHTML = '<span style="color:var(--danger);font-weight:600">⏺ Recording in progress…</span>';
  } catch (e) {
    Toast.show('Microphone access denied: ' + e.message, 'error');
  }
}

async function stopRecording() {
  if (!window._mtgRecorder) return;
  clearInterval(_recTimer);
  document.getElementById('rec-stop-btn').style.display = 'none';
  document.getElementById('rec-start-btn').style.display = '';
  document.getElementById('rec-timer').style.display = 'none';
  document.getElementById('rec-status').textContent = 'Saving recording…';

  window._mtgRecorder.stop();
  window._mtgRecorder.stream.getTracks().forEach(t => t.stop());

  window._mtgRecorder.onstop = async () => {
    const blob = new Blob(window._mtgChunks, { type: 'audio/webm' });
    const fd = new FormData();
    fd.append('file', blob, `recording_${Date.now()}.webm`);
    fd.append('meeting_id', window._mtgCurrentId);
    fd.append('file_type', 'recording');
    const res = await API.postForm('meetings/upload', fd);
    if (res.success) {
      document.getElementById('rec-status').textContent = 'Recording saved.';
      const recFiles = document.getElementById('rec-files');
      if (recFiles) recFiles.insertAdjacentHTML('beforeend', _mtgFileCard(res.data));
      Toast.show('Recording saved ✓', 'success');
    } else {
      document.getElementById('rec-status').textContent = 'Failed to save recording.';
      Toast.show(res.message, 'error');
    }
  };
}

// ── Start / Complete meeting ──────────────────────────────────
async function startMeeting(id) {
  const res = await API.post('meetings/index', { action: 'start', id });
  if (res.success) { Toast.show('Event started!', 'success'); renderMeetingRoom(id); }
  else Toast.show(res.message, 'error');
}

async function completeMeeting(id) {
  const notes = document.getElementById('mtg-note-input')?.value || '';
  if (!await Modal.confirm('End and mark this event as completed?', 'Complete Event')) return;
  const res = await API.post('meetings/index', { action: 'complete', id, notes });
  if (res.success) { Toast.show('Event completed ✓', 'success'); renderMeetingRoom(id); }
  else Toast.show(res.message, 'error');
}

async function deleteMeeting(id) {
  if (!await Modal.confirm('Delete this event? This cannot be undone.', 'Delete Event', true)) return;
  const res = await API.post('meetings/index', { action: 'delete', id });
  if (res.success) { Toast.show('Event deleted.', 'success'); loadMeetings(mtgState.page); }
  else Toast.show(res.message, 'error');
}

async function organiserAction(meetingId, attendeeId, action, note) {
  const labels = { accept_reschedule: 'Accept this reschedule request? The meeting date will be updated and all other attendees re-notified.', keep_original: 'Keep the original date? The attendee will be marked as declined and notified.' };
  if (!await Modal.confirm(labels[action], action === 'accept_reschedule' ? 'Accept Reschedule' : 'Keep Original Date', action === 'keep_original')) return;
  const res = await API.post('meetings/organiser_action', { meeting_id: meetingId, attendee_id: attendeeId, action, note });
  if (res.success) { Toast.show(res.message, 'success'); renderMeetingRoom(meetingId); }
  else Toast.show(res.message, 'error');
}

async function resendInvite(meetingId, attendeeId) {
  const res = await API.post('meetings/index', { action: 'resend_invite', meeting_id: meetingId, attendee_id: attendeeId });
  if (res.success) Toast.show('Invite queued ✓', 'success');
  else Toast.show(res.message, 'error');
}

// ── Create / Edit Modal ───────────────────────────────────────
let _mtgAttendees = [];

async function openMeetingModal(editId = 0) {
  _mtgAttendees = [];
  let m = null;

  if (editId) {
    const res = await API.post('meetings/index', { action: 'get', id: editId });
    if (!res.success) { Toast.show(res.message, 'error'); return; }
    m = res.data.meeting;
    _mtgAttendees = (m.attendees || []).map(a => ({
      type: a.type,
      user_id: a.user_id,
      contact_id: a.contact_id,
      name: a.user_name || a.contact_name || a.name || '',
      email: a.email || '',
    }));
  }

  // Load users + clients in parallel
  const [usersRes, clientsRes] = await Promise.all([
    API.post('auth/users_list', { limit: 100 }),
    API.post('clients/list', { limit: 100 }),
  ]);
  const users = usersRes.data?.users || [];
  const clients = clientsRes.data?.clients || [];

  const v = (k, def = '') => m ? (m[k] ?? def) : def;

  Modal.open({
    id: 'mtg-modal',
    title: editId ? `✏️ Edit: ${m.title}` : '📅 New Event',
    size: 'modal-xl',
    body: `
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:1.5rem">
        <!-- Left: Details -->
        <div>
          <form id="mtg-form">
            ${editId ? `<input type="hidden" name="id" value="${editId}">` : ''}
            <div class="form-group"><label class="form-label">Title <span class="required">*</span></label>
              <input name="title" class="form-control" required placeholder="e.g. Q1 Review Meeting" value="${mtgH(v('title'))}"></div>
            <div class="form-row form-row-2">
              <div class="form-group"><label class="form-label">Type</label>
                <select name="type" class="form-control" id="mtg-type-sel" onchange="mtgTypeChange(this.value)">
                  <option value="internal"  ${v('type') === 'internal' ? 'selected' : ''}>👥 Internal</option>
                  <option value="client"    ${v('type') === 'client' ? 'selected' : ''}>🏢 Client Meeting</option>
                  <option value="task"      ${v('type') === 'task' ? 'selected' : ''}>✅ Task</option>
                  <option value="reminder"  ${v('type') === 'reminder' ? 'selected' : ''}>🔔 Reminder</option>
                  <option value="deadline"  ${v('type') === 'deadline' ? 'selected' : ''}>⚠️ Deadline</option>
                  <option value="personal"  ${v('type') === 'personal' ? 'selected' : ''}>👤 Personal</option>
                </select></div>
              <div class="form-group"><label class="form-label">Priority</label>
                <select name="priority" class="form-control">
                  ${['low', 'normal', 'high', 'urgent'].map(p => `<option value="${p}" ${v('priority', 'normal') === p ? 'selected' : ''}>${Fmt.capitalize(p)}</option>`).join('')}
                </select></div>
            </div>

            <!-- Client selector (shown for client type) -->
            <div id="mtg-client-row" ${v('type') !== 'client' ? 'style="display:none"' : ''}>
              <div class="form-group"><label class="form-label">Client <span class="required">*</span></label>
                <select name="client_id" class="form-control" id="mtg-client-sel" onchange="mtgLoadContacts(this.value)">
                  <option value="">— Select client —</option>
                  ${clients.map(c => `<option value="${c.id}" ${v('client_id') == c.id ? 'selected' : ''}>${mtgH(c.company_name)}</option>`).join('')}
                </select></div>
            </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="meeting_date" class="form-control" required value="${v('meeting_date', new Date().toISOString().split('T')[0])}"></div>
              <div class="form-group" id="mtg-time-row">
                <label class="form-label">Start Time</label>
                <input type="time" name="start_time" class="form-control" value="${v('start_time', '').slice(0, 5)}"></div>
            </div>
            <div class="form-row form-row-2" id="mtg-endtime-row">
              <div class="form-group"><label class="form-label">End Time</label>
                <input type="time" name="end_time" class="form-control" value="${v('end_time', '').slice(0, 5)}"></div>
              <div class="form-group"><label class="form-label">Location</label>
                <input name="location" class="form-control" placeholder="Room, address or link" value="${mtgH(v('location'))}"></div>
            </div>

            <div class="form-group"><label class="form-label">Description</label>
              <textarea name="description" class="form-control" rows="3" placeholder="What is this meeting about?">${mtgH(v('description'))}</textarea></div>
          </form>
        </div>

        <!-- Right: Attendees -->
        <div>
          <div style="font-size:.8rem;text-transform:uppercase;font-weight:700;letter-spacing:.05em;color:var(--text-muted);margin-bottom:.75rem">Attendees</div>

          <!-- Add internal user -->
          <div class="form-group">
            <label class="form-label">Add Team Member</label>
            <div style="display:flex;gap:.5rem">
              <select id="mtg-add-user" class="form-control flex-1">
                <option value="">— Select user —</option>
                ${users.map(u => `<option value="${u.id}" data-name="${mtgH(u.full_name || u.username)}" data-email="${mtgH(u.email || '')}">${mtgH(u.full_name || u.username)}</option>`).join('')}
              </select>
              <button type="button" class="btn btn-outline btn-sm" onclick="mtgAddUserAttendee()">Add</button>
            </div>
          </div>

          <!-- Add client contact (shown for client type) -->
          <div id="mtg-contacts-row" style="display:none">
            <div class="form-group">
              <label class="form-label">Add Client Contact</label>
              <div style="display:flex;gap:.5rem">
                <select id="mtg-add-contact" class="form-control flex-1">
                  <option value="">— Select contact —</option>
                </select>
                <button type="button" class="btn btn-outline btn-sm" onclick="mtgAddContactAttendee()">Add</button>
              </div>
            </div>
          </div>

          <!-- Add external email -->
          <div class="form-group">
            <label class="form-label">Add External Person</label>
            <div style="display:flex;gap:.5rem;flex-wrap:wrap">
              <input id="mtg-ext-name"  class="form-control" style="flex:1;min-width:100px" placeholder="Name">
              <input id="mtg-ext-email" class="form-control" style="flex:1;min-width:130px" placeholder="email@domain.com" type="email">
              <button type="button" class="btn btn-outline btn-sm" onclick="mtgAddExternalAttendee()">Add</button>
            </div>
          </div>

          <div id="mtg-attendees-list" style="display:flex;flex-direction:column;gap:.4rem;max-height:280px;overflow-y:auto;margin-top:.5rem">
            ${_mtgAttendees.length ? '' : '<p class="text-sm text-muted" id="mtg-att-empty">No attendees added yet.</p>'}
          </div>
          ${_mtgAttendees.length ? '' : ''}
        </div>
      </div>

      <div style="border-top:1px solid var(--border);margin-top:1.25rem;padding-top:1rem;display:flex;align-items:center;gap:.75rem;flex-wrap:wrap">
        <label class="d-flex align-center gap-2 text-sm" style="cursor:pointer">
          <input type="checkbox" id="mtg-send-invites" ${!editId ? 'checked' : ''}> Send email invites to attendees
        </label>
        <span class="text-xs text-muted">Attendees will receive an invite with Accept / Decline / Reschedule options.</span>
      </div>
    `,
    footer: `
      <button class="btn btn-ghost" onclick="Modal.close()">Cancel</button>
      <button class="btn btn-primary" onclick="submitMeeting(${editId})"><span class="btn-text">${editId ? 'Save Changes' : 'Create Event'}</span></button>
    `,
  });

  // Render existing attendees
  _mtgAttendees.forEach((a, i) => _renderMtgAttendee(a, i));

  // If editing a client meeting, load contacts
  if (m?.client_id) setTimeout(() => mtgLoadContacts(m.client_id), 100);
}

function mtgTypeChange(type) {
  const clientRow = document.getElementById('mtg-client-row');
  const contactsRow = document.getElementById('mtg-contacts-row');
  if (clientRow) clientRow.style.display = type === 'client' ? '' : 'none';
  if (contactsRow) contactsRow.style.display = type === 'client' ? '' : 'none';
}

async function mtgLoadContacts(clientId) {
  if (!clientId) return;
  const sel = document.getElementById('mtg-add-contact');
  if (!sel) return;
  const res = await API.post('clients/get', { id: clientId });
  if (!res.success) return;
  const contacts = res.data.client.contacts || [];
  sel.innerHTML = '<option value="">— Select contact —</option>' +
    contacts.map(c => `<option value="${c.id}" data-name="${mtgH(c.full_name)}" data-email="${mtgH(c.email || '')}">${mtgH(c.full_name)}${c.email ? ' (' + c.email + ')' : ''}</option>`).join('');
  document.getElementById('mtg-contacts-row').style.display = '';
}

function mtgAddUserAttendee() {
  const sel = document.getElementById('mtg-add-user');
  if (!sel.value) return;
  const opt = sel.options[sel.selectedIndex];
  _mtgPushAttendee({ type: 'user', user_id: parseInt(sel.value), name: opt.dataset.name, email: opt.dataset.email });
  sel.value = '';
}

function mtgAddContactAttendee() {
  const sel = document.getElementById('mtg-add-contact');
  if (!sel.value) return;
  const opt = sel.options[sel.selectedIndex];
  _mtgPushAttendee({ type: 'client_contact', contact_id: parseInt(sel.value), name: opt.dataset.name, email: opt.dataset.email });
  sel.value = '';
}

function mtgAddExternalAttendee() {
  const name = document.getElementById('mtg-ext-name')?.value.trim();
  const email = document.getElementById('mtg-ext-email')?.value.trim();
  if (!email) { Toast.show('Email is required for external attendees.', 'error'); return; }
  _mtgPushAttendee({ type: 'external', name: name || email, email });
  document.getElementById('mtg-ext-name').value = '';
  document.getElementById('mtg-ext-email').value = '';
}

function _mtgPushAttendee(att) {
  // Deduplicate by email
  if (_mtgAttendees.find(a => a.email && a.email === att.email)) {
    Toast.show('This person is already in the list.', 'warning'); return;
  }
  const idx = _mtgAttendees.push(att) - 1;
  const empty = document.getElementById('mtg-att-empty');
  if (empty) empty.remove();
  _renderMtgAttendee(att, idx);
}

function _renderMtgAttendee(att, idx) {
  const list = document.getElementById('mtg-attendees-list');
  if (!list) return;
  const typeIcon = { user: '👤', client_contact: '🏢', external: '🌐' };
  const div = document.createElement('div');
  div.id = `mtg-att-${idx}`;
  div.style.cssText = 'display:flex;align-items:center;gap:.5rem;padding:.4rem .6rem;background:var(--bg);border:1px solid var(--border);border-radius:6px';
  div.innerHTML = `
    <span style="font-size:.9rem">${typeIcon[att.type] || '👤'}</span>
    <div style="flex:1;min-width:0">
      <div style="font-size:.82rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${mtgH(att.name || att.email)}</div>
      ${att.email && att.email !== att.name ? `<div style="font-size:.72rem;color:var(--text-muted)">${mtgH(att.email)}</div>` : ''}
    </div>
    <button type="button" class="btn btn-ghost btn-sm" style="padding:.15rem .3rem;color:var(--danger);flex-shrink:0" onclick="mtgRemoveAttendee(${idx})">✕</button>`;
  list.appendChild(div);
}

function mtgRemoveAttendee(idx) {
  _mtgAttendees.splice(idx, 1);
  // Re-render all
  const list = document.getElementById('mtg-attendees-list');
  if (!list) return;
  list.innerHTML = _mtgAttendees.length ? '' : '<p class="text-sm text-muted" id="mtg-att-empty">No attendees added yet.</p>';
  _mtgAttendees.forEach((a, i) => _renderMtgAttendee(a, i));
}

async function submitMeeting(editId = 0) {
  const btn = document.querySelector('#modal-mtg-modal .btn-primary');
  if (btn) btn.classList.add('loading');
  const data = getFormData('mtg-form');
  data.attendees = _mtgAttendees;
  data.send_invites = document.getElementById('mtg-send-invites')?.checked ? '1' : '';
  const res = await API.post('meetings/index', { action: 'save', ...data });
  if (btn) btn.classList.remove('loading');
  if (res.success) {
    Toast.show(editId ? 'Event updated ✓' : 'Event created ✓', 'success');
    Modal.close();
    if (editId) renderMeetingRoom(editId);
    else loadMeetings(1);
  } else Toast.show(res.message, 'error');
}

// ── Utility ───────────────────────────────────────────────────
function mtgH(s) { return String(s ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;'); }


// ══════════════════════════════════════════════════════════════
// TASKS — inline tab view with sub-checklist
// ══════════════════════════════════════════════════════════════

// ══════════════════════════════════════════════════════════════════════
// TASKS  — Modern task management (Todoist-inspired)
// ══════════════════════════════════════════════════════════════════════

const TASK_PRIORITY = {
  urgent: { label: 'Urgent', color: '#ef4444', bg: '#fee2e2', flag: '🔴' },
  high: { label: 'High', color: '#f97316', bg: '#ffedd5', flag: '🟠' },
  normal: { label: 'Normal', color: '#3b82f6', bg: '#dbeafe', flag: '🔵' },
  low: { label: 'Low', color: '#9ca3af', bg: '#f3f4f6', flag: '⚪' },
};

let _taskState = { view: 'inbox', search: '', expandedIds: new Set(), editingId: null };

async function renderTasksInline(container) {
  _taskState.expandedIds = new Set();
  _taskState.search = '';
  _taskState.view = 'inbox';

  container.innerHTML = `
    <div style="display:grid;grid-template-columns:200px 1fr;gap:1.25rem;min-height:520px" id="task-shell">

      <!-- Sidebar -->
      <div style="display:flex;flex-direction:column;gap:.25rem" id="task-sidebar">
        ${[
      { key: 'inbox', icon: '📥', label: 'Inbox', desc: 'All pending' },
      { key: 'today', icon: '☀️', label: 'Today', desc: 'Due today' },
      { key: 'upcoming', icon: '📅', label: 'Upcoming', desc: 'Next 7 days' },
      { key: 'overdue', icon: '🔥', label: 'Overdue', desc: 'Past due' },
      { key: 'completed', icon: '✅', label: 'Completed', desc: 'Done' },
    ].map(v => `
          <button id="tsv-${v.key}" onclick="taskSetView('${v.key}')"
            style="display:flex;align-items:center;gap:.6rem;padding:.55rem .75rem;border:none;border-radius:8px;cursor:pointer;text-align:left;background:${_taskState.view === v.key ? 'var(--primary)' : 'transparent'};color:${_taskState.view === v.key ? '#fff' : 'var(--text)'};font-size:.85rem;font-weight:${_taskState.view === v.key ? '600' : '400'};width:100%;transition:background .15s">
            <span style="font-size:1rem">${v.icon}</span>
            <span>${v.label}</span>
            <span id="tsv-cnt-${v.key}" style="margin-left:auto;font-size:.72rem;opacity:.7;font-weight:600"></span>
          </button>`).join('')}
        <div style="height:1px;background:var(--border);margin:.5rem 0"></div>
        <!-- Priority filters -->
        ${Object.entries(TASK_PRIORITY).map(([k, p]) => `
          <button onclick="taskSetView('p:${k}')" id="tsv-p:${k}"
            style="display:flex;align-items:center;gap:.6rem;padding:.5rem .75rem;border:none;border-radius:8px;cursor:pointer;text-align:left;background:transparent;color:var(--text);font-size:.83rem;width:100%">
            <span>${p.flag}</span><span>${p.label}</span>
            <span id="tsv-cnt-p:${k}" style="margin-left:auto;font-size:.72rem;opacity:.7;font-weight:600"></span>
          </button>`).join('')}
      </div>

      <!-- Main area -->
      <div>
        <!-- Quick-capture bar -->
        <div style="display:flex;gap:.5rem;margin-bottom:1rem;align-items:center">
          <div style="flex:1;display:flex;align-items:center;gap:.5rem;background:var(--surface);border:2px solid var(--border);border-radius:10px;padding:.5rem .85rem;transition:border-color .2s"
               onfocusin="this.style.borderColor='var(--primary)'" onfocusout="this.style.borderColor='var(--border)'">
            <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" style="color:var(--text-muted);flex-shrink:0"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
            <input id="task-quick-input" class="form-control" style="border:none;padding:0;background:transparent;font-size:.9rem;box-shadow:none"
              placeholder="Add a task… (press Enter to save)"
              onkeydown="if(event.key==='Enter'&&this.value.trim()){taskQuickAdd(this.value);this.value=''}">
          </div>
          <select id="task-quick-priority" class="form-control" style="width:110px;font-size:.82rem">
            <option value="normal">🔵 Normal</option>
            <option value="high">🟠 High</option>
            <option value="urgent">🔴 Urgent</option>
            <option value="low">⚪ Low</option>
          </select>
          <input id="task-quick-date" type="date" class="form-control" style="width:145px;font-size:.82rem" value="${new Date().toISOString().split('T')[0]}">
        </div>

        <!-- Search -->
        <div class="search-wrap mb-3" style="max-width:100%">
          <svg class="search-icon" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
          <input class="form-control" placeholder="Search tasks…" oninput="taskSearchDebounce(this.value)">
        </div>

        <div id="task-main"><div class="loading-overlay" style="min-height:120px"><div class="spinner"></div></div></div>
      </div>
    </div>`;

  // Mobile: collapse sidebar
  if (window.innerWidth < 640) {
    const shell = document.getElementById('task-shell');
    if (shell) shell.style.gridTemplateColumns = '1fr';
    const sidebar = document.getElementById('task-sidebar');
    if (sidebar) {
      sidebar.style.cssText = 'display:flex;flex-direction:row;flex-wrap:wrap;gap:.35rem;margin-bottom:.75rem';
    }
  }

  await _loadTasks();
}

const taskSearchDebounce = debounce(v => { _taskState.search = v; _loadTasks(); }, 280);

async function taskSetView(v) {
  _taskState.view = v;
  _taskState.expandedIds = new Set();
  // Update sidebar highlights
  document.querySelectorAll('[id^="tsv-"]').forEach(btn => {
    const isActive = btn.id === `tsv-${v}`;
    btn.style.background = isActive ? 'var(--primary)' : 'transparent';
    btn.style.color = isActive ? '#fff' : 'var(--text)';
    btn.style.fontWeight = isActive ? '600' : '400';
  });
  await _loadTasks();
}

async function _loadTasks() {
  const main = document.getElementById('task-main');
  if (!main) return;
  main.innerHTML = '<div class="loading-overlay" style="min-height:80px"><div class="spinner"></div></div>';

  const today = new Date().toISOString().split('T')[0];
  const in7 = new Date(Date.now() + 7 * 864e5).toISOString().split('T')[0];
  const params = { action: 'list', type: 'task', my_only: 1, limit: 200, page: 1 };
  const v = _taskState.view;

  if (v === 'inbox') { params.status = 'scheduled'; }
  if (v === 'today') { params.status = 'scheduled'; params.date_from = today; params.date_to = today; }
  if (v === 'upcoming') { params.status = 'scheduled'; params.date_from = today; params.date_to = in7; }
  if (v === 'overdue') { params.status = 'scheduled'; params.date_to = new Date(Date.now() - 864e5).toISOString().split('T')[0]; }
  if (v === 'completed') { params.status = 'completed'; }
  if (v.startsWith('p:')) { params.status = 'scheduled'; }
  if (_taskState.search) params.search = _taskState.search;

  const res = await API.post('meetings/index', params);
  let tasks = res.data?.meetings || [];

  if (v.startsWith('p:')) { const pri = v.slice(2); tasks = tasks.filter(t => t.priority === pri); }

  // Update sidebar counts — run a full fetch for counts
  _updateTaskCounts();

  if (!tasks.length) {
    const empties = {
      inbox: 'No pending tasks', today: 'Nothing due today', upcoming: 'Nothing in the next 7 days',
      overdue: 'You\'re all caught up! 🎉', completed: 'No completed tasks yet',
    };
    const msg = empties[v] || 'No tasks';
    main.innerHTML = `<div class="empty-state" style="padding:3rem 1rem">
      <div style="font-size:3rem;margin-bottom:.75rem">${v === 'overdue' ? '🎉' : '📋'}</div>
      <div style="font-size:1rem;font-weight:600;color:var(--text);margin-bottom:.4rem">${msg}</div>
      <p class="text-muted text-sm">Press Enter in the quick-add bar above to create one.</p>
    </div>`;
    return;
  }

  // Group by date bucket
  const groups = {};
  const addTo = (key, label, urgent, t) => {
    if (!groups[key]) groups[key] = { label, urgent, items: [] };
    groups[key].items.push(t);
  };

  tasks.forEach(t => {
    const td = t.meeting_date;
    if (!td) { addTo('someday', 'Someday', false, t); return; }
    if (td < today) { addTo('overdue', '🔥 Overdue', true, t); return; }
    if (td === today) { addTo('today', '☀️ Today', false, t); return; }
    const tomorrow = new Date(Date.now() + 864e5).toISOString().split('T')[0];
    if (td === tomorrow) { addTo('tomorrow', '🗓 Tomorrow', false, t); return; }
    addTo(td, Fmt.date(td), false, t);
  });

  const ORDER = ['overdue', 'today', 'tomorrow'];
  const sortedKeys = [
    ...ORDER.filter(k => groups[k]),
    ...Object.keys(groups).filter(k => !ORDER.includes(k) && k !== 'someday').sort(),
    ...(groups.someday ? ['someday'] : []),
  ];

  main.innerHTML = sortedKeys.map(key => {
    const grp = groups[key];
    return `<div class="task-group mb-4" id="tgrp-${key}">
      <div style="display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem;padding-bottom:.4rem;border-bottom:2px solid ${grp.urgent ? '#fee2e2' : 'var(--border)'}">
        <span style="font-size:.8rem;font-weight:700;color:${grp.urgent ? '#dc2626' : 'var(--text)'}">${grp.label}</span>
        <span style="font-size:.72rem;color:var(--text-muted);margin-left:auto">${grp.items.length} task${grp.items.length !== 1 ? 's' : ''}</span>
      </div>
      <div style="display:flex;flex-direction:column;gap:.3rem">
        ${grp.items.map(t => _taskCard(t, today)).join('')}
      </div>
    </div>`;
  }).join('');
}

function _taskCard(t, today) {
  const done = t.status === 'completed';
  const overdue = !done && t.meeting_date && t.meeting_date < today;
  const p = TASK_PRIORITY[t.priority] || TASK_PRIORITY.normal;
  const isOpen = _taskState.expandedIds.has(t.id);

  // Sub-task progress (stored inline as data attr for now, loaded on expand)
  return `<div id="tsk-${t.id}" style="border-radius:9px;border:1.5px solid ${done ? 'var(--border)' : overdue ? '#fecdd3' : 'var(--border)'};background:${done ? 'var(--bg)' : overdue ? '#fff5f5' : 'var(--surface)'};overflow:hidden;transition:all .15s">
    <!-- Main row -->
    <div style="display:flex;align-items:flex-start;gap:.6rem;padding:.7rem .9rem">

      <!-- Priority flag + checkbox -->
      <div style="display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0;padding-top:1px">
        <span style="font-size:.7rem;cursor:pointer;opacity:.8" title="${p.label} priority"
          onclick="cycleTaskPriority(${t.id},'${t.priority}')">${p.flag}</span>
        <div class="task-check ${done ? 'task-check-done' : ''}" onclick="toggleTask(${t.id},${done ? 0 : 1})"
          style="width:18px;height:18px;border-radius:50%;border:2px solid ${done ? p.color : '#d1d5db'};background:${done ? p.color : 'transparent'};display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:all .2s">
          ${done ? '<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>' : ''}
        </div>
      </div>

      <!-- Content -->
      <div style="flex:1;min-width:0;cursor:pointer" onclick="taskToggleExpand(${t.id})">
        <div style="font-size:.9rem;font-weight:500;line-height:1.4;${done ? 'text-decoration:line-through;color:var(--text-muted)' : overdue ? 'color:#dc2626' : ''}">${mtgH(t.title)}</div>
        <div style="display:flex;align-items:center;gap:.5rem;margin-top:.25rem;flex-wrap:wrap">
          ${t.meeting_date ? `<span style="font-size:.72rem;color:${overdue ? '#dc2626' : 'var(--text-muted)'}">
            📅 ${overdue ? 'Overdue · ' : ''} ${t.meeting_date === today ? 'Today' : Fmt.date(t.meeting_date)}
          </span>` : '<span class="text-xs text-muted">No date</span>'}
          ${t.location ? `<span style="font-size:.72rem;color:var(--text-muted)">· 📍 ${mtgH(t.location)}</span>` : ''}
          <span style="font-size:.72rem;color:var(--text-muted);margin-left:auto">
            ${isOpen ? '▾' : '▸'} sub-tasks
          </span>
        </div>
        ${t.description ? `<div style="font-size:.78rem;color:var(--text-muted);margin-top:.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:480px">${mtgH(t.description)}</div>` : ''}
      </div>

      <!-- Actions -->
      <div style="display:flex;gap:.2rem;flex-shrink:0;opacity:.45" onmouseenter="this.style.opacity=1" onmouseleave="this.style.opacity=.45">
        <button class="btn btn-ghost btn-sm" style="padding:.2rem .35rem" title="Edit" onclick="openTaskModal(${t.id})">
          <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
        </button>
        <button class="btn btn-ghost btn-sm" style="padding:.2rem .35rem;color:var(--danger)" title="Delete" onclick="deleteTaskOrReminder(${t.id})">
          <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4h6v2"/></svg>
        </button>
      </div>
    </div>

    <!-- Sub-checklist panel -->
    <div id="tsk-sub-${t.id}" style="display:${isOpen ? 'block' : 'none'};border-top:1px solid var(--border);background:#fafbff;padding:.65rem .9rem .65rem 2.8rem">
      <div id="tsk-items-${t.id}" style="display:flex;flex-direction:column;gap:.3rem;margin-bottom:.5rem">
        <span class="text-xs text-muted">Loading…</span>
      </div>
      <div style="display:flex;gap:.4rem;align-items:center">
        <input id="tsk-new-${t.id}" class="form-control" style="flex:1;font-size:.82rem;padding:.3rem .6rem"
          placeholder="Add item… press Enter"
          onkeydown="if(event.key==='Enter'&&this.value.trim()){addTaskItem(${t.id});event.preventDefault()}">
        <button class="btn btn-ghost btn-sm" style="font-size:.8rem;padding:.3rem .6rem;white-space:nowrap" onclick="addTaskItem(${t.id})">+ Add</button>
      </div>
    </div>
  </div>`;
}

async function taskToggleExpand(id) {
  const sub = document.getElementById(`tsk-sub-${id}`);
  if (!sub) return;
  if (_taskState.expandedIds.has(id)) {
    _taskState.expandedIds.delete(id);
    sub.style.display = 'none';
  } else {
    _taskState.expandedIds.add(id);
    sub.style.display = 'block';
    await loadTaskItems(id);
  }
  // refresh arrow
  const card = document.getElementById(`tsk-${id}`);
  const arrow = card?.querySelector('[style*="▸"], [style*="▾"]');
  // just reload the view won't work here; the arrow is inside the card text
  // simplest: toggle text manually
  const hint = card?.querySelector('[style*="margin-left:auto"]');
  if (hint) hint.textContent = _taskState.expandedIds.has(id) ? '▾ sub-tasks' : '▸ sub-tasks';
}

async function _updateTaskCounts() {
  const today = new Date().toISOString().split('T')[0];
  const in7 = new Date(Date.now() + 7 * 864e5).toISOString().split('T')[0];
  const yesterday = new Date(Date.now() - 864e5).toISOString().split('T')[0];

  const all = await API.post('meetings/index', { action: 'list', type: 'task', my_only: 1, limit: 500, page: 1 });
  const tasks = all.data?.meetings || [];

  const counts = {
    inbox: tasks.filter(t => t.status === 'scheduled').length,
    today: tasks.filter(t => t.status === 'scheduled' && t.meeting_date === today).length,
    upcoming: tasks.filter(t => t.status === 'scheduled' && t.meeting_date >= today && t.meeting_date <= in7).length,
    overdue: tasks.filter(t => t.status === 'scheduled' && t.meeting_date && t.meeting_date <= yesterday).length,
    completed: tasks.filter(t => t.status === 'completed').length,
    'p:urgent': tasks.filter(t => t.status === 'scheduled' && t.priority === 'urgent').length,
    'p:high': tasks.filter(t => t.status === 'scheduled' && t.priority === 'high').length,
    'p:normal': tasks.filter(t => t.status === 'scheduled' && t.priority === 'normal').length,
    'p:low': tasks.filter(t => t.status === 'scheduled' && t.priority === 'low').length,
  };

  Object.entries(counts).forEach(([k, n]) => {
    const el = document.getElementById(`tsv-cnt-${k}`);
    if (el) el.textContent = n > 0 ? n : '';
  });
}

async function taskQuickAdd(title) {
  const priority = document.getElementById('task-quick-priority')?.value || 'normal';
  const date = document.getElementById('task-quick-date')?.value || new Date().toISOString().split('T')[0];
  const res = await API.post('meetings/index', { action: 'save', type: 'task', title, priority, meeting_date: date });
  if (res.success) {
    // Animate the quick bar
    const inp = document.getElementById('task-quick-input');
    if (inp) { inp.placeholder = '✓ Task added!'; setTimeout(() => { inp.placeholder = 'Add a task… (press Enter to save)'; }, 1200); }
    await _loadTasks();
  } else Toast.show(res.message, 'error');
}

async function toggleTask(id, done) {
  const check = document.querySelector(`#tsk-${id} .task-check`);
  if (check) { check.style.opacity = '.3'; check.style.transform = 'scale(.85)'; }
  await API.post('meetings/index', { action: 'toggle_complete', id, done });
  await _loadTasks();
}

async function cycleTaskPriority(id, current) {
  const order = ['urgent', 'high', 'normal', 'low'];
  const next = order[(order.indexOf(current) + 1) % order.length];
  await API.post('meetings/index', {
    action: 'save', id, type: 'task', priority: next,
    title: document.querySelector(`#tsk-${id} [style*="font-size:.9rem"]`)?.textContent || ''
  });
  await _loadTasks();
}

// Sub-checklist
async function loadTaskItems(taskId) {
  const wrap = document.getElementById(`tsk-items-${taskId}`);
  if (!wrap) return;
  const res = await API.post('meetings/index', { action: 'task_items', sub: 'list', task_id: taskId });
  const items = res.data?.items || [];
  wrap.innerHTML = items.length
    ? items.map(it => _taskItemRow(taskId, it)).join('')
    : '<span class="text-xs text-muted" style="padding:.2rem 0">No items yet — add one below</span>';
}

function _taskItemRow(taskId, it) {
  return `<div id="ti-${it.id}" style="display:flex;align-items:center;gap:.5rem;padding:.25rem 0">
    <div onclick="toggleTaskItem(${taskId},${it.id},${it.is_done ? 0 : 1})"
      style="width:15px;height:15px;border-radius:50%;border:2px solid ${it.is_done ? '#16a34a' : '#d1d5db'};background:${it.is_done ? '#16a34a' : 'transparent'};display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:all .2s">
      ${it.is_done ? '<svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>' : ''}
    </div>
    <span style="flex:1;font-size:.82rem;${it.is_done ? 'text-decoration:line-through;color:var(--text-muted)' : ''}">${mtgH(it.text)}</span>
    <button onclick="deleteTaskItem(${taskId},${it.id})" style="border:none;background:transparent;cursor:pointer;color:#9ca3af;font-size:.8rem;padding:.1rem .25rem;opacity:0;transition:opacity .15s" onmouseenter="this.style.opacity=1" onmouseleave="this.style.opacity=0">✕</button>
  </div>`;
}

async function addTaskItem(taskId) {
  const inp = document.getElementById(`tsk-new-${taskId}`);
  const text = inp?.value?.trim();
  if (!text) return;
  inp.value = '';
  const res = await API.post('meetings/index', { action: 'task_items', sub: 'add', task_id: taskId, text });
  if (res.success) {
    const wrap = document.getElementById(`tsk-items-${taskId}`);
    if (wrap) {
      const placeholder = wrap.querySelector('.text-xs.text-muted');
      if (placeholder) placeholder.remove();
      wrap.insertAdjacentHTML('beforeend', _taskItemRow(taskId, res.data));
    }
  }
}

async function toggleTaskItem(taskId, itemId, done) {
  const row = document.getElementById(`ti-${itemId}`);
  const circ = row?.querySelector('div');
  if (circ) { circ.style.background = done ? '#16a34a' : 'transparent'; circ.style.borderColor = done ? '#16a34a' : '#d1d5db'; circ.innerHTML = done ? '<svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>' : ''; }
  const label = row?.querySelector('span');
  if (label) label.style.cssText = done ? 'flex:1;font-size:.82rem;text-decoration:line-through;color:var(--text-muted)' : 'flex:1;font-size:.82rem';
  await API.post('meetings/index', { action: 'task_items', sub: 'toggle', task_id: taskId, item_id: itemId, done });
}

async function deleteTaskItem(taskId, itemId) {
  document.getElementById(`ti-${itemId}`)?.remove();
  await API.post('meetings/index', { action: 'task_items', sub: 'delete', task_id: taskId, item_id: itemId });
}

function openTaskModal(editId = 0) {
  (async () => {
    let t = null;
    if (editId) { const r = await API.post('meetings/index', { action: 'get', id: editId }); if (r.success) t = r.data.meeting; }
    const v = (k, d = '') => t ? (t[k] ?? d) : d;
    const today = new Date().toISOString().split('T')[0];
    Modal.open({
      id: 'task-modal', title: editId ? 'Edit Task' : 'New Task',
      body: `<form id="task-form">
        ${editId ? `<input type="hidden" name="id" value="${editId}">` : ''}
        <input type="hidden" name="type" value="task">
        <div class="form-group"><label class="form-label">Title <span class="required">*</span></label>
          <input name="title" class="form-control" required placeholder="What needs to be done?" value="${mtgH(v('title'))}"></div>
        <div class="form-group"><label class="form-label">Notes</label>
          <textarea name="description" class="form-control" rows="2">${mtgH(v('description'))}</textarea></div>
        <div class="form-row form-row-3">
          <div class="form-group"><label class="form-label">Due Date</label>
            <input type="date" name="meeting_date" class="form-control" value="${v('meeting_date', today)}"></div>
          <div class="form-group"><label class="form-label">Priority</label>
            <select name="priority" class="form-control">
              ${Object.entries(TASK_PRIORITY).map(([k, p]) => `<option value="${k}" ${v('priority', 'normal') === k ? 'selected' : ''}>${p.flag} ${p.label}</option>`).join('')}
            </select></div>
          <div class="form-group"><label class="form-label">Context</label>
            <input name="location" class="form-control" placeholder="Project / place" value="${mtgH(v('location'))}"></div>
        </div>
      </form>`,
      footer: `<button class="btn btn-ghost" onclick="Modal.close()">Cancel</button>
              <button class="btn btn-primary" onclick="submitTaskOrReminder('task-form',${editId})"><span class="btn-text">${editId ? 'Save Changes' : 'Create Task'}</span></button>`,
    });
  })();
}


// ══════════════════════════════════════════════════════════════════════
// REMINDERS  — Smart time-aware reminder system
// ══════════════════════════════════════════════════════════════════════

let _reminderView = 'upcoming';

async function renderRemindersInline(container) {
  _reminderView = 'upcoming';
  container.innerHTML = `
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:1.25rem" id="rem-shell">

      <!-- Left: list -->
      <div>
        <!-- View tabs -->
        <div style="display:flex;gap:.3rem;margin-bottom:1rem;background:var(--bg);border-radius:10px;padding:.3rem">
          ${[['upcoming', '🔔 Upcoming'], ['today', '☀️ Today'], ['overdue', '🔥 Overdue'], ['done', '✅ Done']].map(([k, l]) => `
            <button id="rvt-${k}" onclick="remSetView('${k}')"
              style="flex:1;border:none;border-radius:7px;padding:.4rem .5rem;font-size:.78rem;font-weight:600;cursor:pointer;transition:all .15s;background:${_reminderView === k ? 'var(--primary)' : 'transparent'};color:${_reminderView === k ? '#fff' : 'var(--text-muted)'}">${l}</button>`).join('')}
        </div>
        <div id="rem-list"><div class="loading-overlay" style="min-height:120px"><div class="spinner"></div></div></div>
      </div>

      <!-- Right: quick-add -->
      <div>
        <div class="card">
          <div class="card-header"><h5 style="margin:0;font-size:.9rem">🔔 New Reminder</h5></div>
          <div class="card-body" style="display:flex;flex-direction:column;gap:.75rem">
            <div class="form-group" style="margin:0"><label class="form-label">What to remember</label>
              <input id="rem-title" class="form-control" placeholder="Remind me to…"></div>
            <div class="form-group" style="margin:0"><label class="form-label">Notes</label>
              <textarea id="rem-notes" class="form-control" rows="2" placeholder="Optional details…"></textarea></div>

            <!-- Smart time presets -->
            <div>
              <div class="form-label mb-2">When</div>
              <div style="display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin-bottom:.5rem">
                ${[
      ['today-morning', '☀️ Today Morning', _todayAt('08:00')],
      ['today-afternoon', '🌤 This Afternoon', _todayAt('14:00')],
      ['today-evening', '🌙 This Evening', _todayAt('18:00')],
      ['tomorrow-morning', '🌅 Tomorrow Morning', _tomorrowAt('08:00')],
      ['next-week', '📅 Next Week', _nextWeekAt('09:00')],
      ['custom', '🗓 Custom…', ''],
    ].map(([k, l, v]) => `
                  <button class="rem-preset-btn" data-date="${v.date || ''}" data-time="${v.time || ''}"
                    style="padding:.45rem .5rem;border:1.5px solid var(--border);border-radius:8px;background:var(--surface);font-size:.78rem;cursor:pointer;text-align:left;transition:all .15s;font-weight:500"
                    onclick="remSelectPreset(this,'${k}')">${l}</button>`).join('')}
              </div>
              <div id="rem-custom-fields" style="display:none;gap:.5rem;margin-top:.25rem">
                <div class="form-row form-row-2" style="margin:0">
                  <div class="form-group" style="margin:0"><label class="form-label">Date</label>
                    <input type="date" id="rem-custom-date" class="form-control" value="${new Date().toISOString().split('T')[0]}"></div>
                  <div class="form-group" style="margin:0"><label class="form-label">Time</label>
                    <input type="time" id="rem-custom-time" class="form-control" value="09:00"></div>
                </div>
              </div>
            </div>

            <div class="form-group" style="margin:0"><label class="form-label">Priority</label>
              <div style="display:flex;gap:.4rem">
                ${Object.entries(TASK_PRIORITY).map(([k, p]) => `
                  <button class="rem-pri-btn" data-pri="${k}" onclick="remSelectPriority(this,'${k}')"
                    style="flex:1;padding:.35rem;border:2px solid ${k === 'normal' ? p.color : 'var(--border)'};border-radius:7px;background:${k === 'normal' ? p.bg : 'transparent'};font-size:.8rem;cursor:pointer;font-weight:600;color:${k === 'normal' ? p.color : 'var(--text-muted)'};transition:all .15s"
                    title="${p.label}">${p.flag}</button>`).join('')}
              </div>
            </div>

            <button class="btn btn-primary w-full" onclick="remQuickCreate()">🔔 Set Reminder</button>
          </div>
        </div>
      </div>
    </div>`;

  // Mobile: stack
  if (window.innerWidth < 640) {
    const shell = document.getElementById('rem-shell');
    if (shell) shell.style.gridTemplateColumns = '1fr';
  }

  window._remSelectedDate = _todayAt('09:00').date;
  window._remSelectedTime = _todayAt('09:00').time;
  window._remSelectedPri = 'normal';

  await _loadReminders();
}

function _todayAt(time) {
  return { date: new Date().toISOString().split('T')[0], time };
}
function _tomorrowAt(time) {
  const d = new Date(); d.setDate(d.getDate() + 1);
  return { date: d.toISOString().split('T')[0], time };
}
function _nextWeekAt(time) {
  const d = new Date(); d.setDate(d.getDate() + 7);
  return { date: d.toISOString().split('T')[0], time };
}

function remSelectPreset(btn, key) {
  document.querySelectorAll('.rem-preset-btn').forEach(b => {
    b.style.borderColor = 'var(--border)'; b.style.background = 'var(--surface)'; b.style.color = 'var(--text)';
  });
  btn.style.borderColor = 'var(--primary)'; btn.style.background = '#eff6ff'; btn.style.color = 'var(--primary)';

  const custom = document.getElementById('rem-custom-fields');
  if (key === 'custom') {
    if (custom) custom.style.display = 'flex';
    return;
  }
  if (custom) custom.style.display = 'none';
  window._remSelectedDate = btn.dataset.date;
  window._remSelectedTime = btn.dataset.time;
}

function remSelectPriority(btn, pri) {
  window._remSelectedPri = pri;
  document.querySelectorAll('.rem-pri-btn').forEach(b => {
    const p = TASK_PRIORITY[b.dataset.pri];
    b.style.borderColor = 'var(--border)';
    b.style.background = 'transparent';
    b.style.color = 'var(--text-muted)';
  });
  const p = TASK_PRIORITY[pri];
  btn.style.borderColor = p.color;
  btn.style.background = p.bg;
  btn.style.color = p.color;
}

async function remQuickCreate() {
  const title = document.getElementById('rem-title')?.value?.trim();
  const notes = document.getElementById('rem-notes')?.value?.trim();
  const customDate = document.getElementById('rem-custom-date')?.value;
  const customTime = document.getElementById('rem-custom-time')?.value;

  if (!title) { Toast.show('Please enter what to remember.', 'error'); return; }

  const isCustom = document.getElementById('rem-custom-fields')?.style.display !== 'none';
  const date = isCustom ? customDate : window._remSelectedDate;
  const time = isCustom ? customTime : window._remSelectedTime;

  const res = await API.post('meetings/index', {
    action: 'save', type: 'reminder', title,
    description: notes, meeting_date: date, start_time: time,
    priority: window._remSelectedPri || 'normal',
  });
  if (res.success) {
    Toast.show('Reminder set ✓', 'success');
    document.getElementById('rem-title').value = '';
    document.getElementById('rem-notes').value = '';
    // Reset preset selection
    document.querySelectorAll('.rem-preset-btn').forEach(b => { b.style.borderColor = 'var(--border)'; b.style.background = 'var(--surface)'; b.style.color = 'var(--text)'; });
    await _loadReminders();
  } else Toast.show(res.message, 'error');
}

async function remSetView(v) {
  _reminderView = v;
  document.querySelectorAll('[id^="rvt-"]').forEach(b => {
    const isA = b.id === `rvt-${v}`;
    b.style.background = isA ? 'var(--primary)' : 'transparent';
    b.style.color = isA ? '#fff' : 'var(--text-muted)';
  });
  await _loadReminders();
}

async function _loadReminders() {
  const wrap = document.getElementById('rem-list');
  if (!wrap) return;
  wrap.innerHTML = '<div class="loading-overlay" style="min-height:80px"><div class="spinner"></div></div>';
  const today = new Date().toISOString().split('T')[0];
  const tomorrow = new Date(Date.now() + 864e5).toISOString().split('T')[0];
  const params = { action: 'list', type: 'reminder', my_only: 1, limit: 100, page: 1 };

  if (_reminderView === 'upcoming') { params.status = 'scheduled'; params.date_from = today; }
  if (_reminderView === 'today') { params.status = 'scheduled'; params.date_from = today; params.date_to = today; }
  if (_reminderView === 'overdue') { params.status = 'scheduled'; params.date_to = new Date(Date.now() - 864e5).toISOString().split('T')[0]; }
  if (_reminderView === 'done') { params.status = 'completed'; }

  const res = await API.post('meetings/index', params);
  const rems = res.data?.meetings || [];

  if (!rems.length) {
    const msgs = { upcoming: 'No upcoming reminders', today: 'Nothing today', overdue: 'Nothing overdue — great!', done: 'No dismissed reminders' };
    wrap.innerHTML = `<div class="empty-state" style="padding:2rem 1rem">
      <div style="font-size:2.5rem;margin-bottom:.5rem">${_reminderView === 'overdue' ? '🎉' : '🔔'}</div>
      <div style="font-weight:600">${msgs[_reminderView] || 'No reminders'}</div>
    </div>`;
    return;
  }

  // Group by date
  const groups = {};
  rems.forEach(r => {
    const d = r.meeting_date || 'someday';
    if (!groups[d]) groups[d] = [];
    groups[d].push(r);
  });

  wrap.innerHTML = Object.entries(groups).sort(([a], [b]) => a.localeCompare(b)).map(([date, items]) => {
    const isToday = date === today;
    const isTom = date === tomorrow;
    const isPast = date !== 'someday' && date < today;
    const label = date === 'someday' ? 'Someday' : isToday ? 'Today' : isTom ? 'Tomorrow' : Fmt.date(date);
    return `<div style="margin-bottom:1rem">
      <div style="font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:${isPast ? '#dc2626' : 'var(--text-muted)'};margin-bottom:.4rem;padding:0 .25rem">${label}</div>
      <div style="display:flex;flex-direction:column;gap:.4rem">
        ${items.map(r => _remCard(r, today)).join('')}
      </div>
    </div>`;
  }).join('');
}

function _remCard(r, today) {
  const done = r.status === 'completed';
  const isPast = !done && r.meeting_date && r.meeting_date < today;
  const p = TASK_PRIORITY[r.priority] || TASK_PRIORITY.normal;
  const timeStr = r.start_time ? r.start_time.slice(0, 5) : '';

  return `<div style="border-radius:10px;border:1.5px solid ${isPast ? '#fecdd3' : done ? 'var(--border)' : 'var(--border)'};background:${isPast ? '#fff5f5' : done ? 'var(--bg)' : 'var(--surface)'};padding:.75rem 1rem;${done ? 'opacity:.55' : ''}">
    <div style="display:flex;align-items:flex-start;gap:.65rem">
      <span style="font-size:1.1rem;flex-shrink:0;margin-top:1px">${done ? '✅' : isPast ? '⚠️' : p.flag}</span>
      <div style="flex:1;min-width:0">
        <div style="font-weight:600;font-size:.88rem;${done ? 'text-decoration:line-through;color:var(--text-muted)' : isPast ? 'color:#dc2626' : ''}">${mtgH(r.title)}</div>
        ${r.description ? `<div class="text-xs text-muted mt-1">${mtgH(r.description)}</div>` : ''}
        <div class="text-xs text-muted mt-1">
          ${timeStr ? `⏰ <strong>${timeStr}</strong>` : ''}
          ${isPast ? ' <span style="color:#dc2626;font-weight:600">· Overdue</span>' : ''}
        </div>
      </div>
      <div style="display:flex;flex-direction:column;gap:.3rem;align-items:flex-end;flex-shrink:0">
        ${!done ? `
          <button class="btn btn-primary btn-sm" style="font-size:.75rem;padding:.3rem .7rem;white-space:nowrap" onclick="dismissReminder(${r.id})">✓ Done</button>
          <div style="position:relative">
            <button class="btn btn-ghost btn-sm" style="font-size:.75rem;padding:.3rem .6rem" onclick="remToggleSnoozeMenu(${r.id})">💤 Snooze ▾</button>
            <div id="snooze-menu-${r.id}" style="display:none;position:absolute;right:0;top:calc(100% + 4px);background:var(--surface);border:1.5px solid var(--border);border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.12);z-index:100;min-width:160px;overflow:hidden">
              ${[
        ['In 1 hour', _snoozeDate(1 / 24)],
        ['Tonight 8pm', _snoozeDate(0, '20:00')],
        ['Tomorrow', _snoozeDate(1)],
        ['In 2 days', _snoozeDate(2)],
        ['Next week', _snoozeDate(7)],
      ].map(([l, { date, time }]) => `
                <button style="display:block;width:100%;padding:.5rem .9rem;border:none;background:transparent;text-align:left;font-size:.82rem;cursor:pointer;color:var(--text)"
                  onmouseenter="this.style.background='var(--bg)'" onmouseleave="this.style.background='transparent'"
                  onclick="snoozeReminder(${r.id},'${date}','${time || ''}')">
                  ${l}
                </button>`).join('')}
              <div style="border-top:1px solid var(--border);padding:.35rem .9rem">
                <button style="display:block;width:100%;border:none;background:transparent;text-align:left;font-size:.82rem;cursor:pointer;color:var(--primary);padding:.2rem 0"
                  onclick="remToggleSnoozeMenu(${r.id});openSnoozeModal(${r.id})">📅 Pick date…</button>
              </div>
            </div>
          </div>
        ` : ''}
        <div style="display:flex;gap:.15rem">
          <button class="btn btn-ghost btn-sm" style="padding:.2rem .3rem" onclick="openReminderModal(${r.id})">
            <svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
          </button>
          <button class="btn btn-ghost btn-sm" style="padding:.2rem .3rem;color:var(--danger)" onclick="deleteTaskOrReminder(${r.id})">
            <svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/></svg>
          </button>
        </div>
      </div>
    </div>
  </div>`;
}

function _snoozeDate(days, timeOverride = '') {
  const d = new Date(Date.now() + days * 864e5);
  return { date: d.toISOString().split('T')[0], time: timeOverride };
}

function remToggleSnoozeMenu(id) {
  // Close all other menus first
  document.querySelectorAll('[id^="snooze-menu-"]').forEach(m => {
    if (m.id !== `snooze-menu-${id}`) m.style.display = 'none';
  });
  const menu = document.getElementById(`snooze-menu-${id}`);
  if (menu) menu.style.display = menu.style.display === 'none' ? 'block' : 'none';
  // Close on outside click
  setTimeout(() => {
    const close = (e) => {
      if (!document.getElementById(`snooze-menu-${id}`)?.contains(e.target)) {
        const m = document.getElementById(`snooze-menu-${id}`);
        if (m) m.style.display = 'none';
        document.removeEventListener('click', close);
      }
    };
    document.addEventListener('click', close);
  }, 50);
}

async function dismissReminder(id) {
  await API.post('meetings/index', { action: 'dismiss_reminder', id });
  Toast.show('Done ✓', 'success');
  _loadReminders();
}

async function snoozeReminder(id, date, time = '') {
  document.querySelectorAll('[id^="snooze-menu-"]').forEach(m => m.style.display = 'none');
  await API.post('meetings/index', { action: 'snooze_reminder', id, new_date: date, new_time: time });
  const d = new Date(date);
  const label = date === new Date().toISOString().split('T')[0] ? 'today' : Fmt.date(date);
  Toast.show(`Snoozed to ${label}${time ? ' at ' + time : ''} 💤`, 'success');
  _loadReminders();
}

function openSnoozeModal(id) {
  const tomorrow = new Date(); tomorrow.setDate(tomorrow.getDate() + 1);
  Modal.open({
    id: 'snooze-modal', title: '💤 Snooze Reminder',
    body: `<div class="form-row form-row-2">
      <div class="form-group"><label class="form-label">Date</label>
        <input type="date" id="snooze-date" class="form-control" value="${tomorrow.toISOString().split('T')[0]}" min="${tomorrow.toISOString().split('T')[0]}"></div>
      <div class="form-group"><label class="form-label">Time</label>
        <input type="time" id="snooze-time" class="form-control" value="09:00"></div>
    </div>`,
    footer: `<button class="btn btn-ghost" onclick="Modal.close()">Cancel</button>
            <button class="btn btn-primary" onclick="snoozeReminder(${id},document.getElementById('snooze-date').value,document.getElementById('snooze-time').value);Modal.close()">💤 Snooze</button>`,
  });
}

function openReminderModal(editId = 0) {
  (async () => {
    let r = null;
    if (editId) { const res = await API.post('meetings/index', { action: 'get', id: editId }); if (res.success) r = res.data.meeting; }
    const v = (k, d = '') => r ? (r[k] ?? d) : d;
    const today = new Date().toISOString().split('T')[0];
    Modal.open({
      id: 'reminder-modal', title: editId ? 'Edit Reminder' : 'New Reminder',
      body: `<form id="reminder-form">
        ${editId ? `<input type="hidden" name="id" value="${editId}">` : ''}
        <input type="hidden" name="type" value="reminder">
        <div class="form-group"><label class="form-label">Title <span class="required">*</span></label>
          <input name="title" class="form-control" required placeholder="Remind me to…" value="${mtgH(v('title'))}"></div>
        <div class="form-group"><label class="form-label">Notes</label>
          <textarea name="description" class="form-control" rows="2">${mtgH(v('description'))}</textarea></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="meeting_date" class="form-control" required value="${v('meeting_date', today)}"></div>
          <div class="form-group"><label class="form-label">Time</label>
            <input type="time" name="start_time" class="form-control" value="${v('start_time', '').slice(0, 5)}"></div>
        </div>
        <div class="form-group"><label class="form-label">Priority</label>
          <select name="priority" class="form-control">
            ${Object.entries(TASK_PRIORITY).map(([k, p]) => `<option value="${k}" ${v('priority', 'normal') === k ? 'selected' : ''}>${p.flag} ${p.label}</option>`).join('')}
          </select></div>
      </form>`,
      footer: `<button class="btn btn-ghost" onclick="Modal.close()">Cancel</button>
              <button class="btn btn-primary" onclick="submitTaskOrReminder('reminder-form',${editId})"><span class="btn-text">${editId ? 'Save' : 'Create Reminder'}</span></button>`,
    });
  })();
}

// ── Shared save & delete ───────────────────────────────────────
async function submitTaskOrReminder(formId, editId = 0) {
  const modalId = formId === 'task-form' ? 'task-modal' : 'reminder-modal';
  const btn = document.querySelector(`#modal-${modalId} .btn-primary`);
  if (btn) btn.classList.add('loading');
  const res = await API.post('meetings/index', { action: 'save', ...getFormData(formId) });
  if (btn) btn.classList.remove('loading');
  if (res.success) {
    Toast.show(editId ? 'Saved ✓' : 'Created ✓', 'success');
    Modal.close();
    if (document.getElementById('task-main')) _loadTasks();
    if (document.getElementById('rem-list')) _loadReminders();
  } else Toast.show(res.message, 'error');
}

async function deleteTaskOrReminder(id) {
  if (!await Modal.confirm('Delete this item?', 'Delete', true)) return;
  const res = await API.post('meetings/index', { action: 'delete', id });
  if (res.success) {
    Toast.show('Deleted.', 'success');
    if (document.getElementById('task-main')) _loadTasks();
    if (document.getElementById('rem-list')) _loadReminders();
  } else Toast.show(res.message, 'error');
}