// web/js/payroll.js
//
// The money: entities, employees, pay runs, the day-by-day hours grid, and
// payslip PDFs.
//
// Imports people.js for the termination drawer, which is opened from the
// employee list. people.js imports only core.js, so there is no cycle.

import {
  CONFIG, supabase, state, $, icons, esc, money, toast, api,
  avatar, statusPill, stat, empty, errorBox, skeleton, pageHead,
  screen, openDrawer, closeDrawer, ensureEmployers, entCard, renderPicker,
  DOW, periodDays, defaultPenalty, LEAVE_LABEL, hrs, days, hooks, setActive,
} from './core.js';
import { openTerminationDrawer } from './people.js';

async function renderDashboard() {
  $('content').innerHTML = pageHead('Dashboard', 'Where things stand right now.') + skeleton(4);
  icons();
  try {
    const employers = await ensureEmployers();
    let employees = [], payRuns = [];
    if (state.employer) {
      [{ employees }, { pay_runs: payRuns }] = await Promise.all([
        api(`/employees?employer_id=${state.employer.id}`),
        api(`/pay-runs?employer_id=${state.employer.id}`),
      ]);
    }
    const active = employees.filter((e) => e.status === 'active');
    const drafts = payRuns.filter((r) => r.status === 'draft' || r.status === 'calculated');
    const last = payRuns.find((r) => r.status === 'approved' || r.status === 'exported');

    let html = pageHead('Dashboard', state.employer ? state.employer.legal_name : 'Select an entity to see its figures.');
    html += `<div class="grid g4" style="margin-bottom:20px">
      ${stat('Entities', String(employers.length), employers.length === 1 ? 'One employer' : 'Employers you can access', 'building-2')}
      ${stat('Active employees', String(active.length), state.employer ? 'In this entity' : 'Pick an entity', 'users')}
      ${stat('Open pay runs', String(drafts.length), drafts.length ? 'Awaiting approval' : 'Nothing in progress', 'banknote')}
      ${stat('Last paid', last ? last.pay_date : '—', last ? `${last.pay_cycle} cycle` : 'No approved runs yet', 'calendar-check')}
    </div>`;

    if (!state.employer) {
      html += empty('building-2', 'Choose an entity', 'Pick the business you want to work on and the figures above will fill in.', 'Go to entities', 'dashPick');
    } else if (payRuns.length) {
      html += `<div class="card-title" style="margin-top:4px">Recent pay runs</div>
        <div class="table-wrap"><table>
        <thead><tr><th>Period</th><th>Pay date</th><th>Cycle</th><th>Status</th></tr></thead><tbody>
        ${payRuns.slice(0, 5).map((r) => `<tr class="row-click" data-run="${r.id}">
          <td class="mono">${r.period_start} → ${r.period_end}</td>
          <td class="mono">${r.pay_date}</td><td>${esc(r.pay_cycle)}</td>
          <td>${statusPill(r.status)}</td></tr>`).join('')}
        </tbody></table></div>`;
    } else {
      html += empty('banknote', 'No pay runs yet', 'Create the first pay run for this entity to get started.', 'New pay run', 'dashNewRun');
    }

    $('content').innerHTML = html; icons();
    $('dashPick')?.addEventListener('click', () => hooks.navigate('entities'));
    $('dashNewRun')?.addEventListener('click', () => { hooks.navigate('payruns'); setTimeout(openPayRunDrawer, 120); });
    document.querySelectorAll('[data-run]').forEach((el) =>
      el.addEventListener('click', () => { hooks.navigate('payruns'); setTimeout(() => openPayRunDetail(el.dataset.run), 60); }));
  } catch (e) {
    $('content').innerHTML = pageHead('Dashboard') + errorBox(e.message); icons();
  }
}

/* ============================================================
   Entities
   ============================================================ */

async function renderEntities() {
  const canCreate = state.me?.platform_admin;
  $('content').innerHTML = pageHead('Entities', 'The businesses you run payroll for.',
    canCreate ? '<button class="btn btn-primary" id="entNew"><i data-lucide="plus"></i>New entity</button>' : '') + skeleton(3);
  icons();
  $('entNew')?.addEventListener('click', openEmployerDrawer);
  try {
    const employers = await ensureEmployers();
    let html = pageHead('Entities', 'The businesses you run payroll for.',
      canCreate ? '<button class="btn btn-outline" id="entInvite"><i data-lucide="ticket"></i>Invite a client</button>'
              + '<button class="btn btn-primary" id="entNew2"><i data-lucide="plus"></i>New entity</button>' : '');
    html += employers.length
      ? `<div class="grid g3">${employers.map(entCard).join('')}</div>`
      : empty('building-2', 'No entities yet', canCreate ? 'Create your first entity to start running payroll.' : 'You have not been given access to an entity yet. Ask your administrator.', canCreate ? 'New entity' : '', 'entNew3');
    $('content').innerHTML = html; icons();
    ['entNew2', 'entNew3'].forEach((id) => $(id)?.addEventListener('click', openEmployerDrawer));
    $('entInvite')?.addEventListener('click', openNewClientDrawer);
    document.querySelectorAll('[data-emp]').forEach((el) => el.addEventListener('click', () => {
      state.employer = state.employers.find((x) => x.id === el.dataset.emp);
      hooks.navigate('employees');
    }));
  } catch (e) { $('content').innerHTML = pageHead('Entities') + errorBox(e.message); icons(); }
}

/* ============================================================
   Employees
   ============================================================ */
async function renderEmployees() {
  await ensureEmployers();
  if (!state.employer) return renderPicker('Employees', 'Pick an entity to see its people.', 'employees');

  $('content').innerHTML = pageHead('Employees', state.employer.legal_name,
    `<button class="btn btn-outline btn-sm" id="empBack"><i data-lucide="arrow-left"></i>Entities</button>
     <button class="btn btn-primary" id="empNew"><i data-lucide="user-plus"></i>Add employee</button>`) + skeleton(2);
  icons();
  $('empBack').addEventListener('click', () => { state.employer = null; hooks.navigate('entities'); });
  $('empNew').addEventListener('click', openEmployeeDrawer);

  try {
    const { employees } = await api(`/employees?employer_id=${state.employer.id}`);
    let html = pageHead('Employees', state.employer.legal_name,
      `<button class="btn btn-outline btn-sm" id="empBack2"><i data-lucide="arrow-left"></i>Entities</button>
       <button class="btn btn-primary" id="empNew2"><i data-lucide="user-plus"></i>Add employee</button>`);
    html += employees.length ? `<div class="table-wrap"><table>
      <thead><tr><th>Name</th><th>Basis</th><th>Award</th><th class="r">Rate</th><th>Income type</th><th>Status</th><th></th></tr></thead>
      <tbody>${employees.map((e) => `<tr>
        <td><div style="display:flex;align-items:center;gap:10px">${avatar(e.id, e.first_name, e.last_name, true)}
          <div><div class="emp-name">${esc(e.first_name)} ${esc(e.last_name)}</div>
          <div class="emp-sub">${esc(e.email || 'no email')}</div></div></div></td>
        <td>${esc(({ F: 'Full-time', P: 'Part-time', C: 'Casual', L: 'Labour hire', V: 'Voluntary', D: 'Death benefit', N: 'Non-employee' })[e.employment_basis] || e.employment_type || '—')}</td>
        <td class="mono">${e.award_code ? esc(e.award_code) + (e.classification ? '<div class="emp-sub">' + esc(e.classification) + '</div>' : '') : '—'}</td>
        <td class="r">${e.base_hourly_rate ? money(e.base_hourly_rate) : '—'}</td>
        <td><span class="pill pill-blue">${esc(e.income_stream_type || 'SAW')}</span></td>
        <td>${statusPill(e.status)}</td>
        <td class="r">${e.status === 'active' ? `<button class="btn btn-outline btn-sm" data-term="${e.id}"><i data-lucide="user-minus"></i>Terminate</button>` : ''}</td></tr>`).join('')}</tbody></table></div>`
      : empty('users', 'No employees yet', `Add the first person to ${state.employer.legal_name}.`, 'Add employee', 'empNew3');
    $('content').innerHTML = html; icons();
    $('empBack2').addEventListener('click', () => { state.employer = null; hooks.navigate('entities'); });
    ['empNew2', 'empNew3'].forEach((id) => $(id)?.addEventListener('click', openEmployeeDrawer));
    state.curEmployees = employees;
    document.querySelectorAll('[data-term]').forEach((el) => el.addEventListener('click', () =>
      openTerminationDrawer(employees.find((x) => x.id === el.dataset.term))));
  } catch (e) { $('content').innerHTML = pageHead('Employees') + errorBox(e.message); icons(); }
}

/* generic entity picker used by employees / pay runs / access */

async function renderPayruns() {
  await ensureEmployers();
  if (!state.employer) return renderPicker('Pay runs', 'Pick an entity to see its pay runs.', 'payruns');

  $('content').innerHTML = pageHead('Pay runs', state.employer.legal_name,
    `<button class="btn btn-outline btn-sm" id="prBack"><i data-lucide="arrow-left"></i>Entities</button>
     <button class="btn btn-primary" id="prNew"><i data-lucide="plus"></i>New pay run</button>`) + skeleton(2);
  icons();
  $('prBack').addEventListener('click', () => { state.employer = null; hooks.navigate('entities'); });
  $('prNew').addEventListener('click', openPayRunDrawer);

  try {
    const { pay_runs } = await api(`/pay-runs?employer_id=${state.employer.id}`);
    let html = pageHead('Pay runs', state.employer.legal_name,
      `<button class="btn btn-outline btn-sm" id="prBack2"><i data-lucide="arrow-left"></i>Entities</button>
       <button class="btn btn-primary" id="prNew2"><i data-lucide="plus"></i>New pay run</button>`);
    html += pay_runs.length ? `<div class="table-wrap"><table>
      <thead><tr><th>Period</th><th>Pay date</th><th>Cycle</th><th>Status</th><th></th></tr></thead>
      <tbody>${pay_runs.map((r) => `<tr class="row-click" data-pr="${r.id}">
        <td class="mono">${r.period_start} → ${r.period_end}</td>
        <td class="mono">${r.pay_date}</td><td>${esc(r.pay_cycle)}</td>
        <td>${statusPill(r.status)}</td>
        <td class="r"><i data-lucide="chevron-right" style="width:15px;height:15px;color:var(--mist)"></i></td>
      </tr>`).join('')}</tbody></table></div>`
      : empty('calendar-clock', 'No pay runs yet', `Create the first pay run for ${state.employer.legal_name}.`, 'New pay run', 'prNew3');
    $('content').innerHTML = html; icons();
    $('prBack2').addEventListener('click', () => { state.employer = null; hooks.navigate('entities'); });
    ['prNew2', 'prNew3'].forEach((id) => $(id)?.addEventListener('click', openPayRunDrawer));
    document.querySelectorAll('[data-pr]').forEach((el) =>
      el.addEventListener('click', () => openPayRunDetail(el.dataset.pr)));
  } catch (e) { $('content').innerHTML = pageHead('Pay runs') + errorBox(e.message); icons(); }
}

async function openPayRunDetail(id) {
  state.payRunId = id;
  setActive('payruns');
  $('content').innerHTML = pageHead('Pay run', state.employer?.legal_name || '',
    '<button class="btn btn-outline btn-sm" id="prBackList"><i data-lucide="arrow-left"></i>All pay runs</button>')
    + '<div id="prDetail">' + skeleton(1) + '</div>';
  icons();
  $('prBackList').addEventListener('click', renderPayruns);
  await loadPayRunDetail();
}

async function loadPayRunDetail() {
  try {
    const [{ pay_run, payslips, timesheets }, { employees }, bal] = await Promise.all([
      api(`/pay-runs/get?id=${state.payRunId}`),
      api(`/employees?employer_id=${state.employer.id}`),
      api(`/leave/balances?employer_id=${state.employer.id}`).catch(() => null),
    ]);
    state.leaveBalances = bal?.available || null;
    state.curRun = pay_run;
    state.curSlips = payslips;
    // The grid only offers ACTIVE employees, but a payslip may still be needed
    // for someone terminated since the run was paid - keep the full list too.
    state.allEmployees = employees;
    state.curEmployees = employees.filter((e) => e.status === 'active');
    state.curTs = {};
    (timesheets || []).forEach((t) => { state.curTs[`${t.employee_id}|${t.work_date}`] = t; });
    renderPayRunDetailBody();
  } catch (e) { $('prDetail').innerHTML = errorBox(e.message); icons(); }
}

/**
 * Daily ordinary hours used to prefill a fresh pay run.
 *
 * Precedence:
 *   1. the employee's own profile (ordinary_hours_per_week / 5)
 *   2. the award's standard day
 *   3. 7.6 - a 38-hour week over five days, the standard Australian full day
 *
 * Step 2 is a placeholder. The award registry carries penalty rates, overtime
 * tiers and classifications, but no standard hours, so nothing populates
 * award_ordinary_hours_per_day today. The branch is here so an award can supply
 * it later without touching this logic.
 */
function ordinaryHoursFor(employee) {
  const weekly = Number(employee?.ordinary_hours_per_week);
  if (Number.isFinite(weekly) && weekly > 0) return Math.round((weekly / 5) * 100) / 100;
  const perDay = Number(employee?.award_ordinary_hours_per_day);
  if (Number.isFinite(perDay) && perDay > 0) return perDay;
  return 7.6;
}

function renderPayRunDetailBody() {
  const run = state.curRun;
  const editable = run.status === 'draft' || run.status === 'calculated';
  const days = periodDays(run);
  state.curDays = days;

  let html = `<div class="grid g4" style="margin-bottom:20px">
    ${stat('Period', `<span style="font-size:15px">${run.period_start}<br>→ ${run.period_end}</span>`, `${days.length} days`, 'calendar-days')}
    ${stat('Pay date', `<span style="font-size:18px">${run.pay_date}</span>`, run.pay_cycle, 'calendar-check')}
    ${stat('Employees', String(state.curEmployees.length), 'Active in this entity', 'users')}
    ${stat('Status', `<span style="font-size:18px">${esc(run.status)}</span>`, editable ? 'Hours can be edited' : 'Locked', 'lock')}
  </div>`;

  html += `<section style="margin-bottom:24px">
    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:12px;flex-wrap:wrap">
      <div class="eyebrow">Hours</div>
      ${editable && state.curEmployees.length ? `<div style="display:flex;gap:8px;align-items:center">
        <input id="tsBulk" class="mono hrs" type="number" step="0.25" placeholder="7.6">
        <button class="btn btn-outline btn-sm" id="tsFill"><i data-lucide="wand-2"></i>Fill weekdays</button>
      </div>` : ''}
    </div>`;

  // Prefill only when the run has NO hours recorded at all. Once anything has
  // been saved, a blank day is a deliberate blank day - re-prefilling it would
  // quietly pay someone for a day they did not work.
  const fresh = !Object.keys(state.curTs || {}).length;

  if (!state.curEmployees.length) {
    html += empty('users', 'No active employees', 'Add employees to this entity before running payroll.', '', '');
  } else {
    for (const e of state.curEmployees) {
      const total = days.reduce((a, d) => {
        const ts = state.curTs?.[`${e.id}|${d.iso}`] || {};
        return a + (Number(ts.ordinary_hours) || 0) + (Number(ts.overtime_hours) || 0) + (Number(ts.leave_hours) || 0);
      }, 0);
      const bal = state.leaveBalances?.[e.id];
      html += `<div class="day-block">
        <div class="day-head">
          <div style="display:flex;align-items:center;gap:10px">${avatar(e.id, e.first_name, e.last_name, true)}
            <div><div class="emp-name">${esc(e.first_name)} ${esc(e.last_name)}</div>
            <div class="emp-sub">${e.award_code ? esc(e.award_code) + (e.classification ? ' · ' + esc(e.classification) : '') : 'no award'}</div></div></div>
          <div style="text-align:right">
            <span class="mono" id="tsTot-${e.id}" style="color:var(--mist);font-size:12.5px">${total.toFixed(2)} h</span>
            ${bal ? `<div class="emp-sub">leave available — annual ${Number(bal.annual || 0).toFixed(1)}h · personal ${Number(bal.personal || 0).toFixed(1)}h</div>` : ''}
          </div>
        </div>
        <div class="table-wrap"><table><thead><tr>
          <th style="width:118px">Day</th><th>Ordinary</th><th>Overtime</th><th>Penalty</th>
          <th>Leave</th><th>Leave type</th></tr></thead><tbody>`;
      for (const d of days) {
        const ts = state.curTs?.[`${e.id}|${d.iso}`] || {};
        const isWeekend = d.dow === 0 || d.dow === 6;
        // Weekends are never prefilled: a weekend row carries a penalty rate,
        // so a stray 7.6 there is an expensive mistake.
        const prefill = fresh && editable && !isWeekend ? ordinaryHoursFor(e) : '';
        const ord = ts.ordinary_hours != null ? ts.ordinary_hours : prefill;
        const ot = ts.overtime_hours != null ? ts.overtime_hours : '';
        const pen = ts.penalty_type || defaultPenalty(d.dow);
        const ps = (v) => (pen === v ? 'selected' : '');
        const lv = ts.leave_hours != null && Number(ts.leave_hours) > 0 ? ts.leave_hours : '';
        const lt = ts.leave_type || '';
        const ls = (v) => (lt === v ? 'selected' : '');
        const weekend = isWeekend;
        html += `<tr class="${weekend ? 'weekend' : ''}">
          <td class="mono" style="white-space:nowrap">${d.label} ${d.iso.slice(8)}/${d.iso.slice(5, 7)}</td>
          <td><input data-ts="${e.id}" data-d="${d.iso}" data-f="ord" class="mono hrs" type="number" step="0.25" min="0" max="24" placeholder="0" value="${ord}" ${editable ? '' : 'disabled'}></td>
          <td><input data-ts="${e.id}" data-d="${d.iso}" data-f="ot" class="mono hrs" type="number" step="0.25" min="0" max="24" placeholder="0" value="${ot}" ${editable ? '' : 'disabled'}></td>
          <td><select data-ts="${e.id}" data-d="${d.iso}" data-f="pen" class="pen" ${editable ? '' : 'disabled'}>
            <option value="ordinary" ${ps('ordinary')}>Ordinary</option><option value="saturday" ${ps('saturday')}>Saturday</option>
            <option value="sunday" ${ps('sunday')}>Sunday</option><option value="public_holiday" ${ps('public_holiday')}>Public holiday</option>
          </select></td>
          <td><input data-ts="${e.id}" data-d="${d.iso}" data-f="lv" class="mono hrs" type="number" step="0.25" min="0" max="24" placeholder="0" value="${lv}" ${editable ? '' : 'disabled'}></td>
          <td><select data-ts="${e.id}" data-d="${d.iso}" data-f="lvt" class="pen" ${editable ? '' : 'disabled'}>
            <option value="" ${ls('')}>—</option>
            <option value="annual" ${ls('annual')}>Annual</option>
            <option value="personal" ${ls('personal')}>Personal/carer's</option>
            <option value="long_service" ${ls('long_service')}>Long service</option>
            <option value="unpaid" ${ls('unpaid')}>Unpaid</option>
          </select></td></tr>`;
      }
      html += `</tbody></table></div></div>`;
    }
  }
  if (editable && state.curEmployees.length) {
    html += `<div style="margin-top:14px"><button class="btn btn-primary" id="prCalc"><i data-lucide="calculator"></i>Save and calculate</button></div>`;
  }
  html += `</section>`;

  if (state.curSlips && state.curSlips.length) {
    const t = state.curSlips.reduce((a, s) => ({
      gross: a.gross + +s.gross, ote: a.ote + +s.ote, payg: a.payg + +s.payg,
      stsl: a.stsl + +s.stsl, sup: a.sup + +s.super_amount, net: a.net + +s.net,
    }), { gross: 0, ote: 0, payg: 0, stsl: 0, sup: 0, net: 0 });

    html += `<div class="grid g4" style="margin-bottom:16px">
      ${stat('Gross', money(t.gross), '', 'coins')}
      ${stat('PAYG + STSL', money(t.payg + t.stsl), '', 'landmark')}
      ${stat('Super', money(t.sup), '', 'piggy-bank')}
      ${stat('Net pay', money(t.net), 'Total to bank', 'banknote')}
    </div>`;

    html += `<div class="eyebrow" style="margin-bottom:12px">Payslips</div>
      <div class="table-wrap"><table>
      <thead><tr><th>Employee</th><th class="r">Gross</th><th class="r">OTE</th><th class="r">PAYG</th><th class="r">STSL</th><th class="r">Super</th><th class="r">Net</th><th></th></tr></thead>
      <tbody>${state.curSlips.map((s) => `<tr>
        <td class="emp-name">${esc(s.employees?.first_name || '')} ${esc(s.employees?.last_name || '')}</td>
        <td class="r">${money(s.gross)}</td><td class="r">${money(s.ote)}</td><td class="r">${money(s.payg)}</td>
        <td class="r">${money(s.stsl)}</td><td class="r">${money(s.super_amount)}</td>
        <td class="r" style="font-weight:700">${money(s.net)}</td>
        <td class="r"><button class="btn btn-outline btn-sm" data-slip="${s.employee_id}"><i data-lucide="file-down"></i>PDF</button></td></tr>`).join('')}
      <tr style="border-top:2px solid var(--line)">
        <td style="font-weight:700;color:var(--ink)">Totals</td>
        <td class="r" style="font-weight:700">${money(t.gross)}</td><td class="r">${money(t.ote)}</td>
        <td class="r">${money(t.payg)}</td><td class="r">${money(t.stsl)}</td><td class="r">${money(t.sup)}</td>
        <td class="r" style="font-weight:700;color:var(--brand)">${money(t.net)}</td><td></td></tr>
      </tbody></table></div>`;

    html += `<div style="margin-top:16px;display:flex;gap:8px">`;
    if (run.status === 'calculated') html += `<button class="btn btn-primary" id="prApprove"><i data-lucide="check-circle-2"></i>Approve pay run</button>`;
    if (run.status === 'approved' || run.status === 'exported') html += `<button class="btn btn-primary" id="prExport"><i data-lucide="download"></i>Export ABA file</button>`;
    html += `<button class="btn btn-outline" id="prSlips"><i data-lucide="file-down"></i>All payslips</button>`;
    html += `</div>`;
  }

  $('prDetail').innerHTML = html; icons();
  $('prCalc')?.addEventListener('click', savePayRunAndCalc);
  $('prApprove')?.addEventListener('click', approveRun);
  $('prExport')?.addEventListener('click', openExportDrawer);
  $('prSlips')?.addEventListener('click', downloadAllPayslips);
  document.querySelectorAll('[data-slip]').forEach((el) =>
    el.addEventListener('click', () => downloadPayslip(el.dataset.slip)));
  $('tsFill')?.addEventListener('click', fillWeekdays);
  document.querySelectorAll('[data-ts][data-f="ord"], [data-ts][data-f="ot"], [data-ts][data-f="lv"]')
    .forEach((el) => el.addEventListener('input', () => recomputeTotal(el.dataset.ts)));
  // The header totals are rendered from saved data, so refresh them once the
  // prefilled inputs are in the DOM.
  for (const e of state.curEmployees) recomputeTotal(e.id);
  // Entering leave hours without a type is the easiest mistake to make here.
  document.querySelectorAll('[data-ts][data-f="lv"]').forEach((el) => el.addEventListener('change', () => {
    const sel = document.querySelector(`[data-ts="${el.dataset.ts}"][data-d="${el.dataset.d}"][data-f="lvt"]`);
    if (sel && Number(el.value) > 0 && !sel.value) sel.value = 'annual';
  }));
}

function fillWeekdays() {
  const v = parseFloat($('tsBulk').value);
  if (!v || v <= 0) { toast('Enter an hours value first', 'err'); return; }
  for (const e of state.curEmployees) {
    for (const d of state.curDays) {
      if (d.dow === 0 || d.dow === 6) continue;
      const el = document.querySelector(`[data-ts="${e.id}"][data-d="${d.iso}"][data-f="ord"]`);
      if (el && !el.value) el.value = v;
    }
    recomputeTotal(e.id);
  }
}

function recomputeTotal(employeeId) {
  let t = 0;
  document.querySelectorAll(`[data-ts="${employeeId}"][data-f="ord"], [data-ts="${employeeId}"][data-f="ot"], [data-ts="${employeeId}"][data-f="lv"]`)
    .forEach((el) => { t += parseFloat(el.value) || 0; });
  const out = $(`tsTot-${employeeId}`);
  if (out) out.textContent = t.toFixed(2) + ' h';
}

async function savePayRunAndCalc() {
  const entries = [];
  for (const e of state.curEmployees) {
    for (const d of state.curDays) {
      const sel = (f) => document.querySelector(`[data-ts="${e.id}"][data-d="${d.iso}"][data-f="${f}"]`);
      const ord = parseFloat(sel('ord')?.value) || 0;
      const ot = parseFloat(sel('ot')?.value) || 0;
      const lv = parseFloat(sel('lv')?.value) || 0;
      const lvt = sel('lvt')?.value || '';
      if (ord + ot + lv <= 0) continue;
      if (ord + ot + lv > 24) { toast(`More than 24 hours on ${d.iso} for ${e.first_name}`, 'err'); return; }
      if (lv > 0 && !lvt) { toast(`Leave hours on ${d.iso} for ${e.first_name} need a leave type`, 'err'); return; }
      entries.push({
        employee_id: e.id, work_date: d.iso,
        ordinary_hours: ord, overtime_hours: ot,
        leave_hours: lv, leave_type: lv > 0 ? lvt : null,
        penalty_type: sel('pen')?.value || 'ordinary',
      });
    }
  }
  if (!entries.length) { toast('No hours entered', 'err'); return; }

  const btn = $('prCalc'); btn.disabled = true; const old = btn.innerHTML;
  btn.innerHTML = '<i data-lucide="loader-2"></i>Calculating…'; icons();
  try {
    await api('/pay-runs/timesheets', { method: 'POST', body: JSON.stringify({ pay_run_id: state.payRunId, entries }) });
    const res = await api('/pay-runs/calculate', { method: 'POST', body: JSON.stringify({ pay_run_id: state.payRunId }) });
    toast(`Calculated ${res.totals?.employees || res.payslips?.length || 0} payslip(s)`);
    if (res.skipped && res.skipped.length) toast(`${res.skipped.length} skipped — check award and hours`, 'err');
    if (res.leave?.posted?.length) toast(`Leave accrued for ${new Set(res.leave.posted.map((x) => x.employee_id)).size} employee(s)`);
    if (res.leave?.taken?.length) toast(`Leave paid and deducted for ${new Set(res.leave.taken.map((x) => x.employee_id)).size} employee(s)`);
    (res.leave?.leaveWarnings || []).forEach((w) => toast(w.message, 'err'));
    await loadPayRunDetail();
  } catch (e) { toast(e.message, 'err'); btn.disabled = false; btn.innerHTML = old; icons(); }
}

async function approveRun() {
  try {
    await api('/pay-runs/approve', { method: 'POST', body: JSON.stringify({ pay_run_id: state.payRunId }) });
    toast('Pay run approved'); await loadPayRunDetail();
  } catch (e) { toast(e.message, 'err'); }
}

/* ============================================================
   Users & access
   ============================================================ */

function openEmployerDrawer() {
  openDrawer('New entity', `
    <div class="field"><label>Legal name</label><input id="e_name" placeholder="Acme Labour Hire Pty Ltd"></div>
    <div class="row2">
      <div class="field"><label>ABN <span class="hint">or WPN</span></label><input id="e_abn" class="mono" placeholder="12 345 678 901"></div>
      <div class="field"><label>Branch code</label><input id="e_branch" class="mono" value="001"></div>
    </div>
    <div class="row2">
      <div class="field"><label>Accounting target <span class="hint">optional</span></label><select id="e_target">
        <option value="" selected>None</option><option value="xero">Xero</option><option value="myob">MYOB</option>
      </select></div>
      <div class="field"><label>Default pay cycle</label><select id="e_cycle"><option value="weekly">Weekly</option><option value="fortnightly" selected>Fortnightly</option><option value="monthly">Monthly</option></select></div>
    </div>
    <div class="field"><label>Contact name</label><input id="e_contact" placeholder="Who the ATO should contact"></div>
    <div class="row2">
      <div class="field"><label>Email</label><input id="e_email" type="email"></div>
      <div class="field"><label>Phone</label><input id="e_phone" class="mono"></div>
    </div>`, async () => {
    const name = $('e_name').value.trim();
    if (!name) throw new Error('Legal name is required');
    await api('/employers', { method: 'POST', body: JSON.stringify({
      legal_name: name, abn: $('e_abn').value.trim() || null, branch_code: $('e_branch').value.trim() || '001',
      accounting_target: $('e_target').value || null, default_pay_cycle: $('e_cycle').value,
      payer_contact_name: $('e_contact').value.trim() || null,
      payer_email: $('e_email').value.trim() || null, payer_phone: $('e_phone').value.trim() || null,
    }) });
    toast('Entity created');
    state.employers = []; renderEntities();
  });
}

function openEmployeeDrawer() {
  openDrawer('Add employee', `
    <div class="row2">
      <div class="field"><label>First name</label><input id="p_first"></div>
      <div class="field"><label>Last name</label><input id="p_last"></div>
    </div>
    <div class="field"><label>Email</label><input id="p_email" type="email"></div>
    <div class="row2">
      <div class="field"><label>Date of birth</label><input id="p_dob" type="date"></div>
      <div class="field"><label>Start date</label><input id="p_start" type="date"></div>
    </div>
    <div class="row2">
      <div class="field"><label>Employment type</label><select id="p_type">
        <option value="full_time">Full-time</option><option value="part_time">Part-time</option><option value="casual" selected>Casual</option>
      </select></div>
      <div class="field"><label>Employment basis <span class="hint">STP2</span></label><select id="p_basis">
        <option value="">Derive from type</option><option value="F">F — Full-time</option><option value="P">P — Part-time</option>
        <option value="C">C — Casual</option><option value="L">L — Labour hire</option>
      </select></div>
    </div>
    <div class="row2">
      <div class="field"><label>Income stream <span class="hint">STP2</span></label><select id="p_stream">
        <option value="SAW">SAW — Salary &amp; wages</option><option value="LAB">LAB — Labour hire</option>
        <option value="WHM">WHM — Working holiday</option><option value="SWP">SWP — Seasonal worker</option>
        <option value="CHP">CHP — Closely held</option>
      </select></div>
      <div class="field"><label>Residency</label><select id="p_res">
        <option value="resident">Resident</option><option value="foreign_resident">Foreign resident</option>
        <option value="working_holiday">Working holiday</option>
      </select></div>
    </div>
    <div class="field"><label>Tax file number <span class="hint">encrypted, never shown again</span></label><input id="p_tfn" class="mono" placeholder="123 456 782"></div>
    <div class="check"><input type="checkbox" id="p_tft" checked><label for="p_tft" style="margin:0">Claims the tax-free threshold</label></div>
    <div class="check"><input type="checkbox" id="p_help"><label for="p_help" style="margin:0">Has a HELP/STSL debt</label></div>
    <div class="row2">
      <div class="field"><label>Award code</label><input id="p_award" class="mono" placeholder="MA000028"></div>
      <div class="field"><label>Classification</label><input id="p_class"></div>
    </div>
    <div class="field"><label>Base hourly rate</label><input id="p_rate" type="number" step="0.01" class="mono"></div>
    <div class="row2">
      <div class="field"><label>BSB</label><input id="p_bsb" class="mono" placeholder="000-000"></div>
      <div class="field"><label>Account number</label><input id="p_acct" class="mono"></div>
    </div>
    <div class="field"><label>Account name</label><input id="p_acctname"></div>`, async () => {
    const first = $('p_first').value.trim(), last = $('p_last').value.trim();
    if (!first || !last) throw new Error('First and last name are required');
    await api('/employees', { method: 'POST', body: JSON.stringify({
      employer_id: state.employer.id, first_name: first, last_name: last,
      email: $('p_email').value.trim() || null,
      date_of_birth: $('p_dob').value || null, start_date: $('p_start').value || null,
      employment_type: $('p_type').value, employment_basis: $('p_basis').value || undefined,
      income_stream_type: $('p_stream').value, residency_status: $('p_res').value,
      tfn: $('p_tfn').value.trim() || undefined,
      tax_free_threshold: $('p_tft').checked, has_help_debt: $('p_help').checked,
      award_code: $('p_award').value.trim() || null, classification: $('p_class').value.trim() || null,
      base_hourly_rate: parseFloat($('p_rate').value) || 0,
      bsb: $('p_bsb').value.trim() || null, account_number: $('p_acct').value.trim() || null,
      account_name: $('p_acctname').value.trim() || null,
    }) });
    toast('Employee added');
    renderEmployees();
  });
}

function openPayRunDrawer() {
  openDrawer('New pay run', `
    <div class="row2">
      <div class="field"><label>Period start</label><input id="pr_start" type="date"></div>
      <div class="field"><label>Period end</label><input id="pr_end" type="date"></div>
    </div>
    <div class="row2">
      <div class="field"><label>Pay date</label><input id="pr_paid" type="date"></div>
      <div class="field"><label>Cycle</label><select id="pr_cycle">
        <option value="weekly">Weekly</option><option value="fortnightly" selected>Fortnightly</option><option value="monthly">Monthly</option>
      </select></div>
    </div>
    <p style="font-size:12.5px;color:var(--mist);line-height:1.6;margin:0">
      Hours are entered day by day once the run is created, so weekend and public-holiday penalties apply correctly.
    </p>`, async () => {
    const start = $('pr_start').value, end = $('pr_end').value, paid = $('pr_paid').value;
    if (!start || !end || !paid) throw new Error('All three dates are required');
    const { id } = await api('/pay-runs', { method: 'POST', body: JSON.stringify({
      employer_id: state.employer.id, period_start: start, period_end: end,
      pay_date: paid, pay_cycle: $('pr_cycle').value,
    }) });
    toast('Pay run created');
    openPayRunDetail(id);
  });
  setTimeout(() => { const s = $('pr_cycle'); if (s && state.employer) s.value = state.employer.default_pay_cycle || 'fortnightly'; }, 0);
}

/**
 * Show a freshly issued code. This is the ONLY time it is visible - the server
 * stores a hash, so it cannot be looked up again. Reissue if it is lost.
 */

function openExportDrawer() {
  openDrawer('Export ABA file', `
    <p style="font-size:12.5px;color:var(--mist);line-height:1.6;margin:0 0 16px">
      The account wages are paid from, plus your bank's ABA header fields. Each employee is paid their net.
    </p>
    <div class="row2">
      <div class="field"><label>Bank abbreviation</label><input id="ab_bank" class="mono" placeholder="WBC" maxlength="3"></div>
      <div class="field"><label>APCA user ID</label><input id="ab_uid" class="mono" placeholder="123456"></div>
    </div>
    <div class="field"><label>Payer name <span class="hint">your business</span></label><input id="ab_uname" placeholder="ACME PTY LTD"></div>
    <div class="row2">
      <div class="field"><label>Payer BSB</label><input id="ab_bsb" class="mono" placeholder="000-000"></div>
      <div class="field"><label>Payer account</label><input id="ab_acct" class="mono"></div>
    </div>
    <div class="field"><label>Lodgement reference</label><input id="ab_ref" placeholder="PAYROLL"></div>`, async () => {
    const res = await api('/pay-runs/export-aba', { method: 'POST', body: JSON.stringify({
      pay_run_id: state.payRunId,
      header: {
        bankAbbrev: $('ab_bank').value.trim().toUpperCase(),
        userId: $('ab_uid').value.trim(),
        userName: $('ab_uname').value.trim(),
        description: $('ab_ref').value.trim() || 'PAYROLL',
      },
      payer: { bsb: $('ab_bsb').value.trim(), account: $('ab_acct').value.trim(), name: $('ab_uname').value.trim() },
    }) });
    if (res.missing && res.missing.length) toast(`${res.missing.length} employee(s) missing bank details`, 'err');
    const blob = new Blob([res.aba], { type: 'text/plain' });
    const a = document.createElement('a');
    a.href = URL.createObjectURL(blob);
    a.download = `payroll-${state.curRun.pay_date}.aba`;
    a.click(); URL.revokeObjectURL(a.href);
    toast('ABA file downloaded');
    await loadPayRunDetail();
  });
}


/* ============================================================
   Leave
   ============================================================ */

function payslipPdf(slip, employee, run, employer, leave) {
  const { jsPDF } = window.jspdf;
  const doc = new jsPDF({ unit: 'pt', format: 'a4' });
  const L = 48, R = 547;
  let y = 56;
  const line = (yy) => { doc.setDrawColor(220, 220, 214); doc.line(L, yy, R, yy); };
  const label = (t, x, yy) => { doc.setFontSize(7.5); doc.setTextColor(120); doc.text(String(t).toUpperCase(), x, yy); };
  const value = (t, x, yy, size = 10, bold = false) => {
    doc.setFontSize(size); doc.setTextColor(30);
    doc.setFont('helvetica', bold ? 'bold' : 'normal'); doc.text(String(t), x, yy);
    doc.setFont('helvetica', 'normal');
  };
  const rightVal = (t, yy, bold = false) => {
    doc.setFontSize(10); doc.setTextColor(30);
    doc.setFont('helvetica', bold ? 'bold' : 'normal');
    doc.text(String(t), R, yy, { align: 'right' }); doc.setFont('helvetica', 'normal');
  };

  doc.setFont('helvetica', 'bold'); doc.setFontSize(17); doc.setTextColor(11, 118, 174);
  doc.text('Payslip', L, y);
  doc.setFont('helvetica', 'normal'); doc.setFontSize(9); doc.setTextColor(110);
  doc.text(employer?.legal_name || '', R, y - 10, { align: 'right' });
  if (employer?.abn) doc.text('ABN ' + employer.abn, R, y + 2, { align: 'right' });
  y += 16; line(y); y += 22;

  label('Employee', L, y); label('Pay period', 250, y); label('Date of payment', 410, y); y += 13;
  value(`${employee.first_name} ${employee.last_name}`, L, y, 10, true);
  value(`${run.period_start} to ${run.period_end}`, 250, y);
  value(run.pay_date, 410, y);
  y += 24; line(y); y += 22;

  label('Earnings', L, y); doc.text('AMOUNT', R, y, { align: 'right' }); y += 15;
  const rate = Number(employee.base_hourly_rate || 0);
  const bd = slip.breakdown || {};
  const paidLeave = bd.leave || {};
  const paidLeaveHours = bd.leaveHours || {};
  const leaveLoading = Number(bd.leaveLoading || 0);
  const leaveTotal = Object.values(paidLeave).reduce((a, v) => a + Number(v || 0), 0) + leaveLoading;

  // Ordinary earnings excludes overtime and any paid leave, so leave can be
  // shown on its own line - Fair Work requires it to be itemised when paid.
  const ordinaryEarnings = Number(slip.gross) - Number(slip.non_ote || 0) - leaveTotal;
  value(`Ordinary earnings${rate ? ` — base rate ${money(rate)}/hr` : ''}`, L, y);
  rightVal(money(ordinaryEarnings), y); y += 15;

  const LEAVE_NAMES = { annual: 'Annual leave', personal: "Personal/carer's leave", long_service: 'Long service leave' };
  for (const [type, amount] of Object.entries(paidLeave)) {
    if (!Number(amount)) continue;
    const h = Number(paidLeaveHours[type] || 0);
    value(`${LEAVE_NAMES[type] || type}${h ? ` — ${h.toFixed(2)} hrs` : ''}`, L, y);
    rightVal(money(amount), y); y += 15;
  }
  if (leaveLoading > 0) { value('Annual leave loading', L, y); rightVal(money(leaveLoading), y); y += 15; }
  if (Number(slip.non_ote) > 0) { value('Overtime and other non-OTE', L, y); rightVal(money(slip.non_ote), y); y += 15; }
  y += 4; line(y); y += 15;
  value('Gross pay', L, y, 10, true); rightVal(money(slip.gross), y, true); y += 24;

  label('Deductions', L, y); y += 15;
  value('PAYG withholding', L, y); rightVal('-' + money(slip.payg), y); y += 15;
  if (Number(slip.stsl) > 0) { value('Study and training loan (STSL)', L, y); rightVal('-' + money(slip.stsl), y); y += 15; }
  y += 4; line(y); y += 17;
  doc.setFillColor(226, 240, 248); doc.rect(L, y - 13, R - L, 22, 'F');
  value('Net pay', L + 8, y + 2, 11, true);
  doc.setFont('helvetica', 'bold'); doc.setFontSize(11); doc.setTextColor(8, 88, 127);
  doc.text(money(slip.net), R - 8, y + 2, { align: 'right' });
  doc.setFont('helvetica', 'normal'); y += 36;

  label('Superannuation', L, y); y += 15;
  value('Employer contribution (paid on top of wages)', L, y); rightVal(money(slip.super_amount), y); y += 14;
  const fund = employee.super_fund || {};
  if (fund.name) { doc.setFontSize(8); doc.setTextColor(120); doc.text(`Fund: ${fund.name}${fund.usi ? ' · USI ' + fund.usi : ''}`, L, y); y += 12; }
  y += 10;

  // Leave. A closing figure on its own is not much use - an employee checking a
  // payslip wants to see what moved: what they started with, what they earned
  // this period, what they used, and what is left.
  label('Leave', L, y); y += 4; line(y); y += 14;

  if (leave?.notApplicable) {
    doc.setFontSize(9); doc.setTextColor(90);
    doc.text(leave.notApplicable, L, y); y += 20;
  } else if (leave?.rows?.length) {
    const cols = [L, 210, 300, 385, 470];
    doc.setFontSize(7.5); doc.setTextColor(120);
    ['Leave type', 'Opening', 'Accrued', 'Taken', 'Closing'].forEach((h, i) => {
      doc.text(h.toUpperCase(), i === 0 ? cols[i] : cols[i] + 60, y, { align: i === 0 ? 'left' : 'right' });
    });
    y += 13;
    for (const r of leave.rows) {
      doc.setFontSize(9.5); doc.setTextColor(30);
      doc.text(r.label, cols[0], y);
      doc.setFont('helvetica', 'normal');
      doc.text(r.opening.toFixed(2), cols[1] + 60, y, { align: 'right' });
      doc.text((r.accrued > 0 ? '+' : '') + r.accrued.toFixed(2), cols[2] + 60, y, { align: 'right' });
      doc.text(r.taken > 0 ? '-' + r.taken.toFixed(2) : '0.00', cols[3] + 60, y, { align: 'right' });
      doc.setFont('helvetica', 'bold');
      doc.text(r.closing.toFixed(2), cols[4] + 60, y, { align: 'right' });
      doc.setFont('helvetica', 'normal');
      y += 14;
    }
    doc.setFontSize(7.5); doc.setTextColor(140);
    doc.text('Balances are shown in hours as at the end of this pay period.', L, y + 2);
    y += 20;
  } else {
    doc.setFontSize(9); doc.setTextColor(150);
    doc.text(leave?.error || 'Leave balances were unavailable when this payslip was produced.', L, y);
    y += 20;
  }

  doc.setFontSize(7.5); doc.setTextColor(140);
  doc.text('Produced by Payflow. Retain for your records. Superannuation is paid by the employer in addition to wages.', L, 800);
  return doc;
}

/**
 * Leave movement for one employee over one pay period, built from the ledger.
 *
 * Closing is taken as at period_end rather than "now", so reprinting an old
 * payslip shows what the balance actually was at the time, not today's figure.
 */
async function leaveForPayslip(employee, run) {
  if (employee.employment_type === 'casual') {
    return { notApplicable: 'Casual employment — no paid leave accrues. A casual loading is paid instead.' };
  }
  let ledger;
  try {
    ({ ledger } = await api(`/leave/ledger?employee_id=${employee.id}`));
  } catch (e) {
    // Surface it rather than printing a payslip that quietly omits leave.
    toast(`Leave balances unavailable: ${e.message}`, 'err');
    return { error: `Leave balances could not be read (${e.message}).` };
  }

  const inPeriod = (t) =>
    t.pay_run_id === run.id ||
    (t.effective_on >= run.period_start && t.effective_on <= run.period_end);

  const TYPES = [
    ['annual', 'Annual leave'],
    ['personal', "Personal/carer's leave"],
    ['long_service', 'Long service leave'],
  ];

  const rows = [];
  for (const [type, label] of TYPES) {
    const mine = ledger.filter((t) => t.leave_type === type);
    const closing = mine
      .filter((t) => t.effective_on <= run.period_end)
      .reduce((a, t) => a + Number(t.hours), 0);
    const moved = mine.filter(inPeriod);
    const accrued = moved.filter((t) => Number(t.hours) > 0).reduce((a, t) => a + Number(t.hours), 0);
    const taken = Math.abs(moved.filter((t) => Number(t.hours) < 0).reduce((a, t) => a + Number(t.hours), 0));
    const opening = closing - accrued + taken;

    // Long service only appears once there is something to report.
    if (type === 'long_service' && closing === 0 && accrued === 0 && taken === 0) continue;
    rows.push({ label, opening, accrued, taken, closing });
  }
  return { rows };
}

async function downloadPayslip(employeeId) {
  try {
    const slip = state.curSlips.find((s) => s.employee_id === employeeId);
    const employee = (state.allEmployees || state.curEmployees).find((e) => e.id === employeeId);
    if (!slip || !employee) throw new Error('Payslip not found');
    const leave = await leaveForPayslip(employee, state.curRun);
    const doc = payslipPdf(slip, employee, state.curRun, state.employer, leave);
    doc.save(`payslip-${employee.last_name}-${state.curRun.pay_date}.pdf`);
    toast('Payslip downloaded');
  } catch (e) { toast(e.message, 'err'); }
}

async function downloadAllPayslips() {
  let n = 0;
  for (const s of state.curSlips) { await downloadPayslip(s.employee_id); n++; }
  if (n) toast(`${n} payslip(s) downloaded`);
}


/* ============================================================
   Security
   ============================================================ */

export { ordinaryHoursFor, renderDashboard, renderEntities, renderEmployees, renderPayruns, openPayRunDetail, loadPayRunDetail, renderPayRunDetailBody, savePayRunAndCalc, approveRun, openEmployerDrawer, openEmployeeDrawer, openPayRunDrawer, openExportDrawer, payslipPdf, leaveForPayslip, downloadPayslip, downloadAllPayslips, ordinaryHoursFor };