/* time_admin.js - Admin Time-Tracking Console
 * Renders an "All Team Clock-Ins (Admin)" section in the Time Tracking tab.
 * Visible only when the logged-in user is Dee or Alyssa.
 * Provides: date range filter, employee filter dropdown, per-row Edit / Approve /
 * Unapprove / Delete actions, bulk-approve, per-user totals, and pending
 * clock-in + time-edit request queues.
 */
(function () {
  'use strict';

  const ADMIN_USERNAMES = ['dee', 'alyssa'];

  function getUsername() {
    const el = document.getElementById('who');
    if (!el) return null;
    const m = (el.textContent || '').match(/\(([^)]+)\)\s*$/);
    return m ? m[1].trim().toLowerCase() : null;
  }
  function isAdmin(u) { return !!u && ADMIN_USERNAMES.includes(u.toLowerCase()); }

  async function rpc(fn, params) {
    try { const r = await window.rpc(fn, params || {}); return { ok: true, data: r }; }
    catch (e) { console.error('[TimeAdmin] rpc', fn, e); return { ok: false, error: e && e.message ? e.message : String(e) }; }
  }

  function el(tag, attrs, kids) {
    const n = document.createElement(tag);
    if (attrs) for (const k in attrs) {
      if (k === 'style') n.style.cssText = attrs[k];
      else if (k === 'cls') n.className = attrs[k];
      else if (k.startsWith('on')) n.addEventListener(k.slice(2), attrs[k]);
      else if (k === 'html') n.innerHTML = attrs[k];
      else n.setAttribute(k, attrs[k]);
    }
    if (kids) [].concat(kids).forEach(c => {
      if (c == null) return;
      n.appendChild(typeof c === 'string' ? document.createTextNode(c) : c);
    });
    return n;
  }

  function fmt(ts) { if (!ts) return '--'; try { return new Date(ts).toLocaleString(); } catch (e) { return String(ts); } }
  function fmtDate(d) { if (!d) return ''; try { return new Date(d + 'T00:00:00').toLocaleDateString(); } catch (e) { return d; } }
  function todayISO() { return new Date().toISOString().slice(0,10); }
  function daysAgoISO(n) { const d = new Date(); d.setDate(d.getDate() - n); return d.toISOString().slice(0,10); }
  function toLocalInput(ts) { if (!ts) return ''; const d = new Date(ts); const pad = x => String(x).padStart(2,'0'); return d.getFullYear()+'-'+pad(d.getMonth()+1)+'-'+pad(d.getDate())+'T'+pad(d.getHours())+':'+pad(d.getMinutes()); }

  function buildPanel() {
    const username = getUsername();
    if (!username || !isAdmin(username)) return null;

    const root = el('div', { id: 'time-admin-panel', cls: 'card', style: 'margin-top:16px;padding:16px;border:1px solid #444;' }, [
      el('h3', { style: 'margin:0 0 4px 0;color:#f5a623;' }, 'All Team Clock-Ins (Admin)'),
      el('div', { style: 'color:#888;font-size:12px;margin-bottom:10px;' }, 'View, edit, and approve every team member\'s clock-ins for payroll.'),

      // Filters
      el('div', { style: 'display:flex;flex-wrap:wrap;gap:8px;align-items:end;margin-bottom:10px;' }, [
        el('label', null, [ el('div', { style:'font-size:11px;color:#888;' }, 'FROM'),
          el('input', { id:'ta-from', type:'date', value: daysAgoISO(13), style:'width:140px;' }) ]),
        el('label', null, [ el('div', { style:'font-size:11px;color:#888;' }, 'TO'),
          el('input', { id:'ta-to', type:'date', value: todayISO(), style:'width:140px;' }) ]),
        el('label', null, [ el('div', { style:'font-size:11px;color:#888;' }, 'EMPLOYEE'),
          el('select', { id:'ta-filter', style:'width:180px;' }, [
            el('option', { value:'' }, 'All employees'),
          ]) ]),
        el('button', { cls:'btn', onclick: refresh }, 'Refresh'),
        el('button', { cls:'btn', style:'background:#1f7a4d;color:#fff;', onclick: bulkApprove }, 'Bulk-approve range'),
        el('button', { cls:'btn', style:'background:#0a6cb6;color:#fff;', onclick: openAddDialog }, 'Add entry for employee'),
      ]),

      // Pending counts banner
      el('div', { id:'ta-pending-banner', style:'margin-bottom:10px;color:#bbb;' }),

      // Per-user totals
      el('h4', { style:'margin:14px 0 4px 0;' }, 'Per-Employee Totals'),
      el('div', { id:'ta-summary', style:'font-size:13px;color:#bbb;' }, 'Loading...'),

      // Entries table
      el('h4', { style:'margin:14px 0 4px 0;' }, 'Time Entries'),
      el('div', { id:'ta-entries', style:'font-size:13px;color:#bbb;overflow-x:auto;' }, 'Loading...'),

      // Pending clock-in requests
      el('h4', { style:'margin:14px 0 4px 0;color:#f5a623;' }, 'Pending Clock-In Requests'),
      el('div', { id:'ta-clock-reqs', style:'font-size:13px;color:#bbb;' }, 'Loading...'),

      // Pending time-edit requests
      el('h4', { style:'margin:14px 0 4px 0;color:#f5a623;' }, 'Pending Time-Edit Requests'),
      el('div', { id:'ta-edit-reqs', style:'font-size:13px;color:#bbb;' }, 'Loading...'),
    ]);
    return root;
  }

  function mount(panel) {
    if (!panel) return;
    const prior = document.getElementById('time-admin-panel');
    if (prior) prior.remove();
    const host = document.getElementById('panel-time-tracking')
              || document.getElementById('panel-manage')
              || document.getElementById('app')
              || document.body;
    host.appendChild(panel);
  }

  async function loadEmployeeOptions() {
    const sel = document.getElementById('ta-filter');
    if (!sel) return;
    const dash = await rpc('app_get_dashboard_data', { p_username: getUsername() });
    if (!dash.ok) return;
    const users = (dash.data && dash.data.all_app_users) || [];
    users.filter(u => u.is_active).sort((a,b)=> (a.full_name||'').localeCompare(b.full_name||''))
      .forEach(u => sel.appendChild(el('option', { value: u.username }, u.full_name + ' ('+u.username+')')));
  }

  async function loadPendingCounts() {
    const banner = document.getElementById('ta-pending-banner');
    if (!banner) return;
    const r = await rpc('app_admin_pending_counts', { p_username: getUsername() });
    if (!r.ok) { banner.textContent = ''; return; }
    const row = (r.data || [])[0] || r.data || {};
    const parts = [];
    if (row.clock_request_count) parts.push('<b style="color:#f5a623;">'+row.clock_request_count+'</b> pending clock-in request(s)');
    if (row.time_edit_count)     parts.push('<b style="color:#f5a623;">'+row.time_edit_count+'</b> pending time-edit request(s)');
    if (row.unapproved_entries_count) parts.push('<b style="color:#f5a623;">'+row.unapproved_entries_count+'</b> unapproved entry(s)');
    banner.innerHTML = parts.length ? parts.join(' &nbsp; | &nbsp; ') : '<span style="color:#5dd5a8;">All caught up.</span>';
  }

  async function loadSummary() {
    const wrap = document.getElementById('ta-summary');
    if (!wrap) return;
    const from = document.getElementById('ta-from').value;
    const to   = document.getElementById('ta-to').value;
    const r = await rpc('app_admin_get_team_time_summary', { p_username: getUsername(), p_from_date: from, p_to_date: to });
    if (!r.ok) { wrap.textContent = 'Could not load summary. ('+r.error+')'; return; }
    const rows = r.data || [];
    wrap.innerHTML = '';
    if (rows.length === 0) { wrap.textContent = 'No entries in this date range.'; return; }
    const head = el('div', { style: 'display:grid;grid-template-columns:1.8fr 0.9fr 0.7fr 0.9fr 0.9fr;gap:8px;padding:6px 0;border-bottom:1px solid #333;font-weight:600;color:#bbb;font-size:12px;' }, [
      el('div', null, 'Employee'), el('div', null, 'Office'), el('div', null, 'Entries'),
      el('div', null, 'Approved hrs'), el('div', null, 'Pending hrs'),
    ]);
    wrap.appendChild(head);
    rows.forEach(s => {
      wrap.appendChild(el('div', { style: 'display:grid;grid-template-columns:1.8fr 0.9fr 0.7fr 0.9fr 0.9fr;gap:8px;padding:6px 0;border-bottom:1px solid #222;font-size:13px;' }, [
        el('div', { style:'color:#ddd;' }, s.full_name + ' ('+s.username+')'),
        el('div', null, s.office || ''),
        el('div', null, String(s.entries_count || 0)),
        el('div', { style:'color:#5dd5a8;' }, String(s.approved_hours || 0)),
        el('div', { style:'color:#f5a623;' }, String(s.pending_hours || 0)),
      ]));
    });
  }

  async function loadEntries() {
    const wrap = document.getElementById('ta-entries');
    if (!wrap) return;
    const from = document.getElementById('ta-from').value;
    const to   = document.getElementById('ta-to').value;
    const filt = document.getElementById('ta-filter').value || null;
    const r = await rpc('app_admin_get_team_time_entries', { p_username: getUsername(), p_from_date: from, p_to_date: to, p_filter_username: filt });
    if (!r.ok) { wrap.textContent = 'Could not load entries. ('+r.error+')'; return; }
    const rows = r.data || [];
    wrap.innerHTML = '';
    if (rows.length === 0) { wrap.textContent = 'No entries.'; return; }
    const head = el('div', { style:'display:grid;grid-template-columns:1.4fr 1.5fr 1.5fr 0.7fr 0.7fr 0.9fr 1.4fr;gap:8px;padding:6px 0;border-bottom:1px solid #333;font-weight:600;color:#bbb;font-size:12px;' }, [
      el('div', null, 'Employee'), el('div', null, 'Clock In'), el('div', null, 'Clock Out'),
      el('div', null, 'Break'), el('div', null, 'Hours'), el('div', null, 'Status'), el('div', null, 'Actions'),
    ]);
    wrap.appendChild(head);
    rows.forEach(e => wrap.appendChild(renderEntryRow(e)));
  }

  function renderEntryRow(e) {
    const open = !e.clock_out;
    const status = open ? 'OPEN' : (e.payroll_approved ? 'APPROVED' : 'PENDING');
    const statusColor = open ? '#f5a623' : (e.payroll_approved ? '#5dd5a8' : '#e26565');
    const actions = [];
    actions.push(el('button', { cls:'btn-sm', style:'background:#3b6db2;color:#fff;', onclick: () => openEditDialog(e) }, 'Edit'));
    if (!open) {
      if (e.payroll_approved) actions.push(el('button', { cls:'btn-sm', style:'background:#8a4d1b;color:#fff;', onclick: () => approve(e.id, false) }, 'Unapprove'));
      else                    actions.push(el('button', { cls:'btn-sm', style:'background:#1f7a4d;color:#fff;', onclick: () => approve(e.id, true) }, 'Approve'));
    }
    actions.push(el('button', { cls:'btn-sm', style:'background:#a13b3b;color:#fff;', onclick: () => deleteEntry(e.id) }, 'Delete'));
    return el('div', { style:'display:grid;grid-template-columns:1.4fr 1.5fr 1.5fr 0.7fr 0.7fr 0.9fr 1.4fr;gap:8px;padding:6px 0;border-bottom:1px solid #222;font-size:13px;align-items:center;' }, [
      el('div', { style:'color:#ddd;' }, (e.full_name || '') + ' ('+e.username+')'),
      el('div', null, fmt(e.clock_in)),
      el('div', null, fmt(e.clock_out)),
      el('div', null, String(e.break_minutes || 0) + ' min'),
      el('div', { style:'color:#5dd5a8;' }, e.hours_worked != null ? String(e.hours_worked) : '--'),
      el('div', { style:'color:'+statusColor+';font-weight:600;font-size:11px;' }, status),
      el('div', { style:'display:flex;gap:4px;flex-wrap:wrap;' }, actions),
    ]);
  }

  function openAddDialog() {
    const employees = window.__teamMembersCache || [];
    /* Build option list from current filter <select> if present */
    const filterSel = document.getElementById('ta-filter');
    const opts = filterSel ? Array.from(filterSel.options).filter(o=>o.value).map(o=>({u:o.value,n:o.textContent})) : [];
    /* Default date to today in Central time */
    const today = new Date();
    const todayStr = today.toISOString().slice(0,10);
    const dlg = el('div', { id:'ta-add-dlg', style:'position:fixed;inset:0;background:rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center;z-index:9999;' });
    const card = el('div', { style:'background:#15171c;border:1px solid #2a2d34;border-radius:8px;padding:18px;min-width:340px;max-width:420px;color:#eee;' });
    card.appendChild(el('h3', { style:'margin:0 0 12px 0;color:#ffb84d;' }, 'Add Time Entry'));
    card.appendChild(el('div', { style:'font-size:12px;color:#aaa;margin-bottom:10px;' }, 'For an employee who forgot to clock in.'));
    const empSel = el('select', { id:'ta-add-emp', style:'width:100%;margin-bottom:8px;' });
    empSel.appendChild(el('option', { value:'' }, '\u2014 Select employee \u2014'));
    opts.forEach(o => empSel.appendChild(el('option', { value:o.u }, o.n)));
    card.appendChild(el('label', null, [el('div',{style:'font-size:11px;color:#888;'},'EMPLOYEE'), empSel]));
    const dateIn = el('input', { id:'ta-add-date', type:'date', value: todayStr, style:'width:100%;margin-bottom:8px;' });
    card.appendChild(el('label', null, [el('div',{style:'font-size:11px;color:#888;margin-top:6px;'},'DATE'), dateIn]));
    const inT = el('input', { id:'ta-add-in', type:'time', value:'08:00', style:'width:100%;margin-bottom:8px;' });
    card.appendChild(el('label', null, [el('div',{style:'font-size:11px;color:#888;margin-top:6px;'},'CLOCK IN (Central time)'), inT]));
    const outT = el('input', { id:'ta-add-out', type:'time', value:'18:00', style:'width:100%;margin-bottom:8px;' });
    card.appendChild(el('label', null, [el('div',{style:'font-size:11px;color:#888;margin-top:6px;'},'CLOCK OUT (Central time)'), outT]));
    const brk = el('input', { id:'ta-add-break', type:'number', min:'0', value:'60', style:'width:100%;margin-bottom:8px;' });
    card.appendChild(el('label', null, [el('div',{style:'font-size:11px;color:#888;margin-top:6px;'},'BREAK MINUTES'), brk]));
    const note = el('textarea', { id:'ta-add-note', rows:'2', style:'width:100%;margin-bottom:12px;', placeholder:'Reason (e.g. forgot to clock in)' });
    card.appendChild(el('label', null, [el('div',{style:'font-size:11px;color:#888;margin-top:6px;'},'NOTES'), note]));
    const btnRow = el('div', { style:'display:flex;gap:8px;justify-content:flex-end;' });
    const cancel = el('button', { cls:'btn', onclick: () => dlg.remove() }, 'Cancel');
    const save = el('button', { cls:'btn', style:'background:#1f7a4d;color:#fff;' }, 'Save');
    save.onclick = async () => {
      const u = empSel.value; if (!u) { alert('Pick an employee.'); return; }
      const d = dateIn.value; if (!d) { alert('Pick a date.'); return; }
      const ti = inT.value || '08:00'; const to_ = outT.value || '18:00';
      if (ti >= to_) { alert('Clock-out must be after clock-in.'); return; }
      /* Build ISO string treating the date+time as America/Chicago. */
      const buildCentralISO = (dateStr, timeStr) => {
        const [y,m,da] = dateStr.split('-').map(Number);
        const [hh,mm] = timeStr.split(':').map(Number);
        /* Determine Central offset by probing. CDT = -05:00 Mar-Nov; CST = -06:00 Nov-Mar.
           Use a Date built as UTC and adjust: take desired local minutes, find offset that toLocaleString gives back same values. */
        for (const offMin of [300, 360]) {
          const utcMs = Date.UTC(y, m-1, da, hh, mm, 0) + offMin*60000;
          const d2 = new Date(utcMs);
          const parts = d2.toLocaleString('en-US', { timeZone:'America/Chicago', hour12:false, year:'numeric', month:'2-digit', day:'2-digit', hour:'2-digit', minute:'2-digit' });
          /* parts like '05/13/2026, 08:00' */
          const re = /(\d{2})\/(\d{2})\/(\d{4}),\s*(\d{2}):(\d{2})/;
          const mm2 = parts.match(re);
          if (mm2) {
            const M=+mm2[1], D=+mm2[2], Y=+mm2[3], H=+mm2[4], Mi=+mm2[5];
            if (Y===y && M===m && D===da && H===hh && Mi===mm) return new Date(utcMs).toISOString();
          }
        }
        /* Fallback: treat as UTC-6 */
        return new Date(Date.UTC(y, m-1, da, hh+6, mm, 0)).toISOString();
      };
      const ci = buildCentralISO(d, ti);
      const co = buildCentralISO(d, to_);
      save.disabled = true; save.textContent = 'Saving...';
      try {
        await rpc('app_add_time_entry', { p_username:getUsername(), p_for_username:u, p_clock_in:ci, p_clock_out:co, p_note: note.value || 'Added by admin' });
        /* Apply break_minutes via edit since add doesn't accept break */
        /* We'll need to fetch the newly created entry id; refresh and find */
        await refresh();
        const brkMin = parseInt(brk.value||'0',10);
        if (brkMin > 0) {
          /* Find most recent entry for this user within the day */
          try {
            const rows = await rpc('app_admin_get_team_time_entries', { p_username:getUsername(), p_from_date:d, p_to_date:d, p_filter_username:u });
            const newest = (rows||[]).slice().sort((a,b)=>new Date(b.clock_in)-new Date(a.clock_in))[0];
            if (newest) {
              await rpc('app_admin_edit_time_entry', { p_username:getUsername(), p_entry_id:newest.id, p_clock_in:null, p_clock_out:null, p_break_minutes:brkMin, p_notes:null });
              await refresh();
            }
          } catch (err) { console.warn('[TimeAdmin] break update failed', err); }
        }
        dlg.remove();
      } catch (err) {
        save.disabled = false; save.textContent = 'Save';
        alert('Could not add entry: ' + (err && err.message || err));
      }
    };
    btnRow.appendChild(cancel); btnRow.appendChild(save);
    card.appendChild(btnRow);
    dlg.appendChild(card);
    document.body.appendChild(dlg);
  }

  function openEditDialog(e) {
    const dlg = el('div', { id:'ta-edit-dlg', style:'position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:9999;display:flex;align-items:center;justify-content:center;' }, [
      el('div', { style:'background:#222;border:1px solid #555;border-radius:8px;padding:18px;min-width:360px;' }, [
        el('h3', { style:'margin:0 0 10px 0;' }, 'Edit Time Entry'),
        el('div', { style:'color:#bbb;font-size:13px;margin-bottom:10px;' }, (e.full_name||'') + ' ('+e.username+')'),
        el('label', null, [ el('div', { style:'font-size:11px;color:#888;' }, 'CLOCK IN'),
          el('input', { id:'edit-in', type:'datetime-local', value: toLocalInput(e.clock_in), style:'width:100%;' }) ]),
        el('label', { style:'display:block;margin-top:8px;' }, [ el('div', { style:'font-size:11px;color:#888;' }, 'CLOCK OUT'),
          el('input', { id:'edit-out', type:'datetime-local', value: toLocalInput(e.clock_out), style:'width:100%;' }) ]),
        el('label', { style:'display:block;margin-top:8px;' }, [ el('div', { style:'font-size:11px;color:#888;' }, 'BREAK MINUTES'),
          el('input', { id:'edit-break', type:'number', min:'0', step:'1', value: String(e.break_minutes || 0), style:'width:100%;' }) ]),
        el('label', { style:'display:block;margin-top:8px;' }, [ el('div', { style:'font-size:11px;color:#888;' }, 'NOTES'),
          el('textarea', { id:'edit-notes', rows:2, style:'width:100%;' }, e.notes || '') ]),
        el('div', { style:'margin-top:12px;text-align:right;display:flex;justify-content:flex-end;gap:8px;' }, [
          el('button', { cls:'btn', onclick: () => dlg.remove() }, 'Cancel'),
          el('button', { cls:'btn', style:'background:#1f7a4d;color:#fff;', onclick: async () => {
            const params = {
              p_username: getUsername(), p_entry_id: e.id,
              p_clock_in: document.getElementById('edit-in').value ? new Date(document.getElementById('edit-in').value).toISOString() : null,
              p_clock_out: document.getElementById('edit-out').value ? new Date(document.getElementById('edit-out').value).toISOString() : null,
              p_break_minutes: parseInt(document.getElementById('edit-break').value || '0', 10),
              p_notes: document.getElementById('edit-notes').value || null,
            };
            const r = await rpc('app_admin_edit_time_entry', params);
            if (!r.ok) { alert('Error: '+r.error); return; }
            dlg.remove();
            await refresh();
          } }, 'Save'),
        ]),
      ]),
    ]);
    document.body.appendChild(dlg);
  }

  async function approve(entryId, approved) {
    const r = await rpc('app_admin_approve_time_entry', { p_username: getUsername(), p_entry_id: entryId, p_approved: approved });
    if (!r.ok) { alert('Error: '+r.error); return; }
    await refresh();
  }

  async function deleteEntry(entryId) {
    if (!confirm('Delete this time entry permanently?')) return;
    const r = await rpc('app_admin_delete_time_entry', { p_username: getUsername(), p_entry_id: entryId });
    if (!r.ok) { alert('Error: '+r.error); return; }
    await refresh();
  }

  async function bulkApprove() {
    const from = document.getElementById('ta-from').value;
    const to   = document.getElementById('ta-to').value;
    const filt = document.getElementById('ta-filter').value || null;
    const label = filt ? ('for '+filt) : 'for ALL employees';
    if (!confirm('Bulk-approve every unapproved entry '+label+' between '+fmtDate(from)+' and '+fmtDate(to)+'?')) return;
    const r = await rpc('app_admin_approve_range', { p_username: getUsername(), p_from_date: from, p_to_date: to, p_filter_username: filt });
    if (!r.ok) { alert('Error: '+r.error); return; }
    alert('Approved ' + (r.data || 0) + ' entries.');
    await refresh();
  }

  async function loadClockRequests() {
    const wrap = document.getElementById('ta-clock-reqs');
    if (!wrap) return;
    const r = await rpc('app_get_clock_requests', { p_username: getUsername() });
    if (!r.ok) { wrap.textContent = 'Could not load. ('+r.error+')'; return; }
    const data = r.data || {};
    const rows = (data.requests || []).filter(x => x.status === 'pending');
    wrap.innerHTML = '';
    if (rows.length === 0) { wrap.textContent = 'No pending clock-in requests.'; return; }
    rows.forEach(req => {
      const acts = el('div', { style:'display:flex;gap:6px;' }, [
        el('button', { cls:'btn-sm', style:'background:#1f7a4d;color:#fff;', onclick: () => reviewClock(req.id, 'approved') }, 'Approve'),
        el('button', { cls:'btn-sm', style:'background:#a13b3b;color:#fff;', onclick: () => reviewClock(req.id, 'denied') }, 'Deny'),
      ]);
      wrap.appendChild(el('div', { style:'padding:6px 0;border-bottom:1px solid #222;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;' }, [
        el('div', { style:'color:#ddd;' }, (req.full_name || req.username || '?') + ' - '+ fmt(req.requested_clock_in) + (req.note ? ' ('+req.note+')' : '')),
        acts,
      ]));
    });
  }

  async function reviewClock(reqId, action) {
    const note = action === 'denied' ? (prompt('Optional note for denial:')||null) : null;
    const r = await rpc('app_review_clock_request', { p_username: getUsername(), p_request_id: reqId, p_action: action, p_note: note });
    if (!r.ok) { alert('Error: '+r.error); return; }
    await refresh();
  }

  async function loadEditRequests() {
    const wrap = document.getElementById('ta-edit-reqs');
    if (!wrap) return;
    const r = await rpc('app_get_time_edit_requests', { p_username: getUsername() });
    if (!r.ok) { wrap.textContent = 'Could not load. ('+r.error+')'; return; }
    const data = r.data || {};
    const rows = (data.requests || []).filter(x => x.status === 'pending');
    wrap.innerHTML = '';
    if (rows.length === 0) { wrap.textContent = 'No pending time-edit requests.'; return; }
    rows.forEach(req => {
      const acts = el('div', { style:'display:flex;gap:6px;' }, [
        el('button', { cls:'btn-sm', style:'background:#1f7a4d;color:#fff;', onclick: () => reviewEdit(req.id, 'approved') }, 'Approve'),
        el('button', { cls:'btn-sm', style:'background:#a13b3b;color:#fff;', onclick: () => reviewEdit(req.id, 'denied') }, 'Deny'),
      ]);
      wrap.appendChild(el('div', { style:'padding:6px 0;border-bottom:1px solid #222;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;' }, [
        el('div', { style:'color:#ddd;' }, (req.full_name || req.username || '?') + ' - ' + (req.reason || JSON.stringify(req).slice(0,120))),
        acts,
      ]));
    });
  }

  async function reviewEdit(reqId, action) {
    const note = action === 'denied' ? (prompt('Optional note for denial:')||null) : null;
    const r = await rpc('app_review_time_edit', { p_username: getUsername(), p_request_id: reqId, p_action: action, p_note: note });
    if (!r.ok) { alert('Error: '+r.error); return; }
    await refresh();
  }

  async function refresh() {
    await loadPendingCounts();
    await loadSummary();
    await loadEntries();
    await loadClockRequests();
    await loadEditRequests();
  }

  async function init() {
    if (!window.rpc) { setTimeout(init, 300); return; }
    const u = getUsername();
    if (!u) { setTimeout(init, 300); return; }
    if (!isAdmin(u)) return;
    const panel = buildPanel();
    mount(panel);
    await loadEmployeeOptions();
    await refresh();
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', () => setTimeout(init, 700));
  } else {
    setTimeout(init, 700);
  }
})();