<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  <meta name="apple-mobile-web-app-title" content="Timekeeper" />
  <title>Labor Timekeeper</title>
  <link rel="stylesheet" href="/styles.css" />
  <link rel="manifest" href="/manifest.json" />
  <link rel="apple-touch-icon" href="/icon-192.png" />
</head>
<body>
  <div class="container">
    <div class="row" style="align-items:center; justify-content:space-between;">
      <h1>Log Hours</h1>
      <a href="/admin" class="badge">Admin</a>
    </div>

    <!-- Employee selector at top -->
    <div class="card" style="margin-top:12px; padding:12px;">
      <label class="small muted" for="employee">Who are you?</label>
      <select id="employee" title="Select employee" style="font-size:1.1rem; padding:8px;">
        <option value="">-- Select your name --</option>
      </select>
    </div>

    <div class="card" style="margin-top:12px;" id="mainCard">
      <h2>This Week</h2>
      <div style="display:flex; align-items:center; gap:10px; margin-bottom:4px;">
        <select id="weekSelect" title="Select week" style="font-size:0.95rem; padding:4px 8px;"></select>
        <div class="muted small" id="weekLabel"></div>
      </div>

      <div class="row" style="margin-top:12px;">
        <div class="col" style="flex:2;">
          <label class="small muted" for="customerName">Client</label>
          <input id="customerName" list="customerList" placeholder="Type a new client or pick from list..." autocomplete="off" style="font-size:1rem; padding:8px; width:100%; margin-top:8px;" />
          <datalist id="customerList"></datalist>
          <select id="customerSelect" style="display:none;"></select>
          <div id="customerAddress" class="small muted" style="margin-top:4px; font-style:italic;"></div>
          <div id="customerConfirm" class="small muted" style="margin-top:4px; font-style:italic;"></div>
          <div id="recentCustomers" class="small muted" style="margin-top:6px;"></div>
        </div>
        <div class="col">
          <label class="small muted" for="day">Day</label>
          <select id="day" title="Select day" class="emph-input"></select>
        </div>
        <div class="col">
          <div class="small muted">Quick Time</div>
          <button id="quickDayBtn" type="button" class="small" style="margin:2px 6px 6px 0;">7:30-4:00</button>
          <button id="quickLunchBtn" type="button" class="small" style="margin:2px 0 6px 0;">Lunch 12:00-12:30</button>
          <label class="small muted" for="startTime">Start (24h)</label>
          <input id="startTime" type="time" step="60" placeholder="07:30" class="emph-input" />
        </div>
        <div class="col">
          <label class="small muted" for="endTime">End (24h)</label>
          <input id="endTime" type="time" step="60" placeholder="16:00" class="emph-input" />
        </div>
      </div>
      <div class="row" style="margin-top:12px; gap:8px; align-items:center;">
        <div class="col">
          <label class="small muted" for="calcHours">Calculated Hours</label>
          <input id="calcHours" readonly />
        </div>
        <div class="col">
          <label class="small muted" for="totalHours">Total Hours (optional)</label>
          <input id="totalHours" type="number" step="0.25" min="0" placeholder="ex: 8" style="max-width:120px;" />
          <div class="small muted">If entered, this overrides start/end calculation.</div>
        </div>
      </div>
      <div class="row" style="margin-top:12px;">
        <div class="col">
          <label class="small muted" for="notes">Notes (column G)</label>
          <input id="notes" placeholder="Optional details..." />
        </div>
      </div>
      <div class="row" style="margin-top:12px;">
        <div class="col"><button class="primary" id="saveBtn">Save / Update</button></div>
      </div>
      <div id="submitStatus" class="small muted" style="margin-top:6px; display:none;"></div>
      <!-- seed UI removed from employee view (admin-only in /admin) -->
      <div class="small muted" style="margin-top:6px;">Save each block. You can add multiple clients for the same day.</div>

      <hr/>

      <h2>🎙 Speak it</h2>
      <p class="muted small">Example: "McGill 8 hours Friday" or "8 hours Friday McGill, 2 hours Saturday Hall".</p>
      <div class="row">
        <div class="col"><button class="primary" id="recBtn">Start Recording</button></div>
        <div class="col"><button id="applyVoiceBtn" disabled style="display:none;">Apply Parsed Entries</button></div>
        <div class="col"><button id="clearParsedBtn" class="badge" disabled>Clear Parsed</button></div>
      </div>
      <p class="muted small" id="voiceStatus"></p>
      <div id="voiceBox" class="toast" style="display:none;">
        <div class="small muted">Transcript</div>
        <div id="transcript" style="margin:6px 0 10px 0;"></div>
        <div class="small muted">Parsed entries</div>
        <div id="parsed"></div>
      </div>

      <hr/>

      <h2>Entries</h2>
      <div id="entries"></div>

      <!-- Daily Summary Table -->
      <div id="dailySummary" style="margin-top:12px; display:none;">
        <h3>📊 My Weekly Summary</h3>
        <table style="width:100%; max-width:600px; text-align:left; font-size:0.95rem; border-collapse:collapse;">
          <thead>
            <tr style="border-bottom:2px solid var(--accent,#4a90d9);">
              <th style="padding:6px 4px;">Day</th>
              <th style="padding:6px 4px; text-align:right;">Hours</th>
              <th style="padding:6px 4px; text-align:right;">Running</th>
              <th style="padding:6px 4px; text-align:center;">Status</th>
            </tr>
          </thead>
          <tbody id="dailySummaryBody"></tbody>
        </table>
      </div>

      <div class="row" style="margin-top:12px; align-items:center;">
        <div class="col">
          <div class="small muted">Week total: <span id="weekTotalHours" style="font-size:1.2rem; font-weight:700;">0</span> hours</div>
        </div>
      </div>
      <div class="row" style="margin-top:8px;">
        <div class="col">
          <label class="small muted" for="weeklyComment">Weekly comment to admin</label>
          <textarea id="weeklyComment" rows="3" placeholder="Anything the admin should know about this week..."></textarea>
        </div>
        <div class="col" style="display:flex; align-items:flex-end; gap:8px;">
          <button id="submitBtn">Submit Week</button>
          <button id="reopenWeekBtn" class="badge" style="display:none;">Reopen Week</button>
        </div>
      </div>
      <div class="row" style="margin-top:8px;">
        <div class="col">
          <button id="clearDraftsBtn" class="danger">Delete All Drafts</button>
        </div>
      </div>
    </div>
  </div>

<script>
let EMPLOYEE=null, EMPLOYEES=[], CUSTOMERS=[], WEEK=null;
let mediaRecorder=null, chunks=[], lastParsed=null;
let customerLocked = true;
const appliedParsed = new Set();
window.__editingEntryId = null;

// Storage keys
const EMPLOYEE_KEY = 'labor_timekeeper_employee';
const DRAFT_KEY = 'labor_timekeeper_draft';
const COMMENT_KEY = 'labor_timekeeper_week_comment';

function el(id){ return document.getElementById(id); }
function fmt(n){ return (Math.round(n*100)/100).toString(); }

function parseTimeToHours(t){
  if (!t) return null;
  const parts = String(t).split(':');
  if (parts.length < 2) return null;
  const h = Number(parts[0]);
  const m = Number(parts[1]);
  if (!Number.isFinite(h) || !Number.isFinite(m)) return null;
  return h + (m / 60);
}

function calcHours(start, end){
  const sh = parseTimeToHours(start);
  const eh = parseTimeToHours(end);
  if (sh == null || eh == null) return null;
  if (eh < sh) return null;
  return Math.round((eh - sh) * 100) / 100;
}

function formatTime12(t){
  if (!t || !/^\d{2}:\d{2}$/.test(String(t))) return t || '';
  const [hh, mm] = String(t).split(':').map(Number);
  if (!Number.isFinite(hh) || !Number.isFinite(mm)) return t;
  const h12 = ((hh + 11) % 12) + 1;
  const ampm = hh >= 12 ? 'PM' : 'AM';
  return `${h12}:${String(mm).padStart(2, '0')} ${ampm}`;
}

function updateCalcHours(){
  const manual = getManualHours();
  if (manual != null) {
    if (el('calcHours')) el('calcHours').value = manual.toString();
    return;
  }
  const start = (el('startTime') && el('startTime').value) || '';
  const end = (el('endTime') && el('endTime').value) || '';
  const hours = calcHours(start, end);
  if (el('calcHours')) el('calcHours').value = (hours == null ? '' : hours.toString());
}

function getManualHours() {
  const raw = (el('totalHours') && el('totalHours').value) || '';
  const n = Number(raw);
  if (!Number.isFinite(n) || n <= 0) return null;
  return Math.round(n * 100) / 100;
}

async function api(url, opts){
  const r = await fetch(url, opts);
  const j = await r.json().catch(()=>null);
  if (!r.ok) throw new Error((j && j.error) || 'Request failed');
  return j;
}

// Draft persistence
function saveDraft() {
  const draft = {
    customerName: (el('customerName') && el('customerName').value) || '',
    day: el('day').value,
    startTime: (el('startTime') && el('startTime').value) || '',
    endTime: (el('endTime') && el('endTime').value) || '',
    totalHours: (el('totalHours') && el('totalHours').value) || '',
    notes: (el('notes') && el('notes').value) || '',
    savedAt: new Date().toISOString()
  };
  localStorage.setItem(DRAFT_KEY, JSON.stringify(draft));
}

function loadDraft() {
  try {
    const saved = localStorage.getItem(DRAFT_KEY);
    if (!saved) return null;
    return JSON.parse(saved);
  } catch { return null; }
}

function clearDraft() {
  localStorage.removeItem(DRAFT_KEY);
}

function restoreDraft() {
  const draft = loadDraft();
  if (!draft) return;
  
  const savedAt = new Date(draft.savedAt);
  const hoursSinceSave = (Date.now() - savedAt.getTime()) / (1000 * 60 * 60);
  if (hoursSinceSave > 24) { clearDraft(); return; }
  
  if (draft.customerName) el('customerName').value = draft.customerName;
  if (draft.day) el('day').value = draft.day;
  if (draft.startTime) el('startTime').value = draft.startTime;
  if (draft.endTime) el('endTime').value = draft.endTime;
  if (el('totalHours')) el('totalHours').value = draft.totalHours || '';
  if (draft.notes) el('notes').value = draft.notes;
  
  renderCustomerConfirm(draft.customerName || '');
  handleTimingChange();
}

async function init(){
  // Load employees for selector and exclude internal/test or admin accounts we don't want in the dropdown
  EMPLOYEES = await api('/api/employees');
  // Exclude internal/test accounts and admin placeholders from the employee selector
  EMPLOYEES = EMPLOYEES.filter(e => {
    const lower = (e.name || '').toLowerCase();
    if (lower.includes('jafid')) return false;
    if (lower.includes('office admin')) return false;
    return true;
  });
  el('employee').innerHTML = '<option value="">-- Select your name --</option>' + 
    EMPLOYEES.map(e => `<option value="${e.id}">${e.name}</option>`).join('');

  // Ensure clean launch: do NOT restore any saved form state or employee selection
  // Remove potential saved keys so the UI always starts blank on load
  try {
    localStorage.removeItem(EMPLOYEE_KEY);
    localStorage.removeItem(DRAFT_KEY);
  } catch(e) {}

  // Employee change handler
  el('employee').onchange = async () => {
    const empId = el('employee').value;
    if (!empId) {
      EMPLOYEE = null;
      localStorage.removeItem(EMPLOYEE_KEY);
      el('mainCard').style.opacity = '0.5';
      el('mainCard').style.pointerEvents = 'none';
      return;
    }
    EMPLOYEE = EMPLOYEES.find(e => e.id === empId);
    localStorage.setItem(EMPLOYEE_KEY, empId);
    el('mainCard').style.opacity = '1';
    el('mainCard').style.pointerEvents = 'auto';
    await loadPayrollWeeks();
    await loadWeek();
  };

  // Load customers into datalist for free-text client input
  CUSTOMERS = await api('/api/customers');
  // Filter out obvious test/api placeholder customers
  CUSTOMERS = CUSTOMERS.filter(c => {
    const n = (c.name || '').toLowerCase();
    if (n.startsWith('test')) return false;
    if (n.includes('api test')) return false;
    if (n.includes('placeholder')) return false;
    return true;
  });
  el('customerList').innerHTML = CUSTOMERS.map(c => {
    const label = c.address ? `${c.name} \u2014 ${c.address}` : c.name;
    return `<option value="${c.name}" data-id="${c.id}" data-address="${c.address || ''}">${label}</option>`;
  }).join('');

  // Also populate hidden select for compatibility with legacy tests
  el('customerSelect').innerHTML = '<option value="">-- Select customer --</option>' + CUSTOMERS.map(c => {
    const label = c.address ? `${c.name} \u2014 ${c.address}` : c.name;
    return `<option value="${c.id}" data-name="${c.name}" data-address="${c.address || ''}">${label}</option>`;
  }).join('');
  // Keep address updated when select changes (tests may interact with select)
  el('customerSelect').addEventListener('change', updateCustomerAddress);
  // Gate customer selection until day + start/end are set
  setCustomerEnabled(false);

  // Customer input handlers
  el('customerName').addEventListener('input', (e)=>{ renderCustomerConfirm(e.target.value); saveEntryDebounced(); });
  el('customerName').addEventListener('change', (e)=>{ renderCustomerConfirm(e.target.value); saveEntryDebounced(); });

  // If employee already selected, load week
  if (EMPLOYEE) {
    await loadWeek();
    el('mainCard').style.opacity = '1';
    el('mainCard').style.pointerEvents = 'auto';
  } else {
    el('mainCard').style.opacity = '0.5';
    el('mainCard').style.pointerEvents = 'none';
  }

  el('saveBtn').onclick = saveEntry;
  el('submitBtn').onclick = submitWeek;
  if (el('reopenWeekBtn')) el('reopenWeekBtn').onclick = reopenWeek;
  if (el('clearDraftsBtn')) el('clearDraftsBtn').onclick = clearDrafts;

  // Default to clean forms on load (don't auto-restore drafts)
  // If you want draft restore later, call `restoreDraft()` manually from the console
  if (el('customerName')) el('customerName').value = '';
  if (el('startTime')) el('startTime').value = '';
  if (el('endTime')) el('endTime').value = '';
  if (el('calcHours')) el('calcHours').value = '';
  if (el('totalHours')) el('totalHours').value = '';
  if (el('notes')) el('notes').value = '';

  ['customerName', 'day', 'startTime', 'endTime', 'notes', 'totalHours'].forEach(id => {
    if (el(id)) {
      el(id).addEventListener('input', () => { handleTimingChange(); saveEntryDebounced(); });
      el(id).addEventListener('change', () => { handleTimingChange(); saveEntryDebounced(); });
    }
  });
  if (el('weeklyComment')) {
    el('weeklyComment').addEventListener('input', () => {
      saveWeekCommentDraft(el('weeklyComment').value || '');
    });
  }
  if (el('quickDayBtn')) el('quickDayBtn').onclick = () => {
    if (el('totalHours')) el('totalHours').value = '';
    if (el('startTime')) el('startTime').value = '07:30';
    if (el('endTime')) el('endTime').value = '16:00';
    updateCalcHours();
    handleTimingChange();
  };
  if (el('quickLunchBtn')) el('quickLunchBtn').onclick = () => {
    if (el('totalHours')) el('totalHours').value = '';
    if (el('startTime')) el('startTime').value = '12:00';
    if (el('endTime')) el('endTime').value = '12:30';
    updateCalcHours();
    const lunch = findCustomerByName('Lunch');
    if (lunch && el('customerSelect')) el('customerSelect').value = lunch.id;
    if (el('customerName')) el('customerName').value = 'Lunch';
    renderCustomerConfirm('Lunch');
    handleTimingChange();
  };

  await setupRecorder();
}

function setCustomerEnabled(enabled){
  const input = el('customerName');
  if (input) input.disabled = !enabled;
}

function canSelectCustomer(){
  const workDate = el('day')?.value;
  const manualHours = getManualHours();
  const start = (el('startTime') && el('startTime').value) || '';
  const end = (el('endTime') && el('endTime').value) || '';
  if (Number.isFinite(manualHours)) return !!workDate;
  return !!workDate && !!start && !!end;
}

function handleTimingChange() {
  if (canSelectCustomer()) customerLocked = false;
  setCustomerEnabled(canSelectCustomer() && !customerLocked);
  updateCalcHours();
}

// employee-side seeding removed; admin can seed from /admin

async function loadPayrollWeeks(){
  try {
    const data = await api('/api/payroll-weeks');
    const sel = el('weekSelect');
    if (!sel || !data.weeks || !data.weeks.length) return;
    const currentWeek = data.currentWeek;
    sel.innerHTML = data.weeks.map(ws => {
      const d = new Date(ws + 'T12:00:00');
      const label = d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
      const isCurrent = ws === currentWeek;
      return `<option value="${ws}"${isCurrent ? ' selected' : ''}>Week of ${label}${isCurrent ? ' (current)' : ''}</option>`;
    }).join('');
    // Wire up change handler
    sel.onchange = () => { loadWeek(sel.value); };
  } catch (err) {
    console.warn('Failed to load payroll weeks', err);
  }
}

async function loadWeek(weekStart){
  if (!EMPLOYEE) return;
  // If no weekStart provided, use the selected value from dropdown or default (server returns current)
  const ws = weekStart || (el('weekSelect') && el('weekSelect').value) || '';
  const url = ws
    ? `/api/time-entries?employee_id=${EMPLOYEE.id}&week_start=${encodeURIComponent(ws)}`
    : `/api/time-entries?employee_id=${EMPLOYEE.id}`;
  const week = await api(url);
  WEEK = week;
  el('weekLabel').textContent = `Week starting ${week.week_start}`;
  // Sync the dropdown selection to match what the server returned
  if (el('weekSelect')) el('weekSelect').value = week.week_start;
  el('day').innerHTML = week.days.map(d=>`<option value="${d.ymd}">${d.dow} (${d.ymd})</option>`).join('');
  if (!el('day').value && week.days && week.days[0]) {
    el('day').value = week.days[0].ymd;
  }
  handleTimingChange();
  renderEntries(week.entries);
  renderRecentCustomers(week.entries);
  await loadWeekComment();
}

function isLunchEntry(entry){
  const name = String(entry.customer_name || '').toLowerCase();
  const notes = String(entry.notes || '').toLowerCase();
  return name === 'lunch' || notes.includes('lunch');
}

function renderEntries(entries){
  if (!entries.length){
    el('entries').innerHTML = '<p class="muted">No entries yet.</p>';
    updateWeekTotals([]);
    const reopenBtn = el('reopenWeekBtn');
    if (reopenBtn) reopenBtn.style.display = 'none';
    return;
  }
  window.__entriesById = new Map(entries.map(e => [e.id, e]));
  const rows = entries.map(e=>{
    const badge = e.status==='APPROVED'
      ? '<span class="badge">APPROVED</span>'
      : e.status==='SUBMITTED'
        ? '<span class="badge">SUBMITTED</span>'
        : '<span class="badge">DRAFT</span>';
    // show a delete control for DRAFT and SUBMITTED entries so employee can remove/fix before admin approval
    const deleteBtn = (e.status === 'DRAFT' || e.status === 'SUBMITTED') ? `<button class="small" onclick="deleteEntry('${e.id}')" title="Delete entry">\u2715</button>` : '';
    const notes = e.notes ? `<span class="muted">${e.notes}</span>` : '';
    const timeRange = (e.start_time && e.end_time) ? `${formatTime12(e.start_time)} - ${formatTime12(e.end_time)}` : '';
    return `<tr>
      <td>${e.work_date}</td>
      <td>${e.customer_name}</td>
      <td>${fmt(Number(e.hours))}</td>
      <td>${timeRange}</td>
      <td>${notes}</td>
      <td style="display:flex; gap:8px; align-items:center;">
        <button class="small" onclick="editEntry('${e.id}')" title="Edit entry">Edit</button>
        ${badge} ${deleteBtn}
      </td>
    </tr>`;
  }).join('');
  el('entries').innerHTML = `
    <table>
      <thead><tr><th>Date</th><th>Customer</th><th>Hours</th><th>Time</th><th>Notes</th><th>Status</th></tr></thead>
      <tbody>${rows}</tbody>
    </table>
  `;
  updateWeekTotals(entries);
  const hasSubmitted = entries.some(e => e.status === 'SUBMITTED');
  const hasApproved = entries.some(e => e.status === 'APPROVED');
  const reopenBtn = el('reopenWeekBtn');
  if (reopenBtn) reopenBtn.style.display = (hasSubmitted && !hasApproved) ? 'inline-block' : 'none';
}

function updateWeekTotals(entries){
  const byDate = new Map();
  for (const e of (entries || [])) {
    const key = e.work_date || '';
    if (!byDate.has(key)) {
      byDate.set(key, { work: 0, lunch: 0, hasTime: false, statuses: new Set() });
    }
    const bucket = byDate.get(key);
    if (isLunchEntry(e)) {
      bucket.lunch += Number(e.hours || 0);
    } else {
      bucket.work += Number(e.hours || 0);
      if (e.start_time && e.end_time) bucket.hasTime = true;
    }
    if (e.status) bucket.statuses.add(e.status);
  }
  
  let total = 0;
  const summaryRows = [];
  
  const daysList = (WEEK && WEEK.days) ? WEEK.days.map(d => d.ymd) : [...byDate.keys()].sort();
  
  for (const dateKey of daysList) {
    const bucket = byDate.get(dateKey);
    let dayTotal = 0;
    let dayStatus = '';
    let statusColor = '';
    if (bucket) {
      dayTotal = bucket.work;
      if (bucket.hasTime && bucket.lunch) {
        dayTotal = Math.max(0, bucket.work - bucket.lunch);
      }
      // Determine day status: if any APPROVED → approved; else if any SUBMITTED → submitted; else DRAFT
      if (bucket.statuses.has('APPROVED')) { dayStatus = '✅ Approved'; statusColor = '#4caf50'; }
      else if (bucket.statuses.has('SUBMITTED')) { dayStatus = '📤 Submitted'; statusColor = '#ff9800'; }
      else if (bucket.statuses.size > 0) { dayStatus = '📝 Draft'; statusColor = '#90a4ae'; }
    }
    total += dayTotal;
    
    let dayName = dateKey;
    if (WEEK && WEEK.days) {
      const d = WEEK.days.find(x => x.ymd === dateKey);
      if (d) dayName = `${d.dow} <span class="muted small">${dateKey.slice(5)}</span>`;
    }
    
    const rowStyle = dayTotal > 0 ? 'font-weight:bold;' : 'opacity:0.6;';
    summaryRows.push(`<tr style="${rowStyle}">
      <td style="padding:6px 4px; border-bottom:1px solid rgba(255,255,255,0.1);">${dayName}</td>
      <td style="padding:6px 4px; border-bottom:1px solid rgba(255,255,255,0.1); text-align:right;">${dayTotal > 0 ? fmt(dayTotal) + ' h' : '—'}</td>
      <td style="padding:6px 4px; border-bottom:1px solid rgba(255,255,255,0.1); text-align:right;">${total > 0 ? fmt(total) + ' h' : '—'}</td>
      <td style="padding:6px 4px; border-bottom:1px solid rgba(255,255,255,0.1); text-align:center; color:${statusColor}; font-size:0.85rem;">${dayStatus}</td>
    </tr>`);
  }
  
  // Add total row
  summaryRows.push(`<tr style="font-weight:bold; border-top:2px solid var(--accent,#4a90d9);">
    <td style="padding:8px 4px;">TOTAL</td>
    <td style="padding:8px 4px; text-align:right;">${fmt(total)} h</td>
    <td style="padding:8px 4px; text-align:right;">${fmt(total)} h</td>
    <td style="padding:8px 4px; text-align:center;"></td>
  </tr>`);
  
  const elTotal = el('weekTotalHours');
  if (elTotal) elTotal.textContent = fmt(total);
  
  const summaryContainer = el('dailySummary');
  const summaryBody = el('dailySummaryBody');
  if (summaryContainer && summaryBody) {
    if (entries && entries.length > 0) {
      summaryBody.innerHTML = summaryRows.join('');
      summaryContainer.style.display = 'block';
    } else {
      summaryContainer.style.display = 'none';
    }
  }
}

function renderRecentCustomers(entries){
  const container = el('recentCustomers');
  if (!container) return;
  const counts = new Map();
  for (const e of entries || []) {
    if (!e.customer_name) continue;
    const key = e.customer_name;
    counts.set(key, (counts.get(key) || 0) + 1);
  }
  const sorted = [...counts.entries()].sort((a,b) => b[1] - a[1]).slice(0, 5);
  if (!sorted.length) { container.textContent = ''; return; }
  container.innerHTML = 'Recent: ' + sorted.map(([name]) => `<button type="button" class="small" onclick="quickSelectCustomer('${name.replace(/'/g, "\\'")}')">${name}</button>`).join(' ');
}

function quickSelectCustomer(name){
  if (el('customerName')) el('customerName').value = name;
  renderCustomerConfirm(name);
  const existing = findCustomerByName(name);
  if (existing && el('customerSelect')) el('customerSelect').value = existing.id;
}

function editEntry(entryId){
  const entry = window.__entriesById && window.__entriesById.get(entryId);
  if (!entry) return;
  window.__editingEntryId = entryId;
  try { window.scrollTo({ top: 0, behavior: 'smooth' }); } catch {}
  if (el('day')) el('day').value = entry.work_date;
  if (el('startTime')) el('startTime').value = entry.start_time || '';
  if (el('endTime')) el('endTime').value = entry.end_time || '';
  if (el('notes')) el('notes').value = entry.notes || '';
  if (el('customerSelect')) {
    const opt = [...el('customerSelect').options].find(o => o.value === entry.customer_id);
    if (opt) el('customerSelect').value = opt.value;
  }
  if (el('customerName')) el('customerName').value = entry.customer_name || '';
  if (el('totalHours')) el('totalHours').value = '';
  updateCalcHours();
  customerLocked = false;
  setCustomerEnabled(true);
}

async function deleteEntry(teId){
  if (!EMPLOYEE) { alert('Select your name first'); return; }
  if (!confirm('Delete this DRAFT entry? This cannot be undone.')) return;
  try {
    await api(`/api/time-entries/${teId}`, {
      method: 'DELETE',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ employee_id: EMPLOYEE.id })
    });
    await refresh();
  } catch (err) {
    alert('Delete failed: ' + err.message);
  }
}

async function refresh(){
  await loadWeek();
  CUSTOMERS = await api('/api/customers');
  el('customerList').innerHTML = CUSTOMERS.map(c => {
    const label = c.address ? `${c.name} \u2014 ${c.address}` : c.name;
    return `<option value="${c.name}" data-id="${c.id}" data-address="${c.address || ''}">${label}</option>`;
  }).join('');

  // Mirror into hidden select for compatibility
  el('customerSelect').innerHTML = '<option value="">-- Select customer --</option>' + CUSTOMERS.map(c => {
    const label = c.address ? `${c.name} \u2014 ${c.address}` : c.name;
    return `<option value="${c.id}" data-name="${c.name}" data-address="${c.address || ''}">${label}</option>`;
  }).join('');
}

function findCustomerByName(name) {
  if (!name) return null;
  const lower = name.toLowerCase().trim();
  return CUSTOMERS.find(c => c.name.toLowerCase() === lower);
}

function renderCustomerConfirm(name) {
  const c = findCustomerByName(name);
  const div = el('customerConfirm');
  if (!name || !name.trim()) { div.textContent = ''; return; }
  if (c) {
    div.textContent = c.address ? `Confirm address: ${c.address}` : 'No address on file.';
    el('customerAddress').textContent = c.address ? `\uD83D\uDCCD ${c.address}` : '';
  } else {
    div.textContent = 'New client will be created (address optional).';
    el('customerAddress').textContent = '';
  }
}

// Debounce helper for draft saves
let _draftTimer = null;
function saveDraftDebounced(timeout=400) {
  if (_draftTimer) clearTimeout(_draftTimer);
  _draftTimer = setTimeout(()=>{ saveDraft(); _draftTimer = null; }, timeout);
}

// Debounced auto-save to server when inputs are complete
let _entryTimer = null;
function saveEntryDebounced(timeout=800) {
  if (_entryTimer) clearTimeout(_entryTimer);
  setCustomerEnabled(canSelectCustomer() && !customerLocked);
  const selectedOption = el('customerSelect')?.options[el('customerSelect')?.selectedIndex];
  const customer_id = selectedOption && selectedOption.value ? selectedOption.value : null;
  const customerName = (el('customerName') && el('customerName').value || '').trim();
  const work_date = el('day')?.value;
  const startInput = el('startTime');
  const endInput = el('endTime');
  let start_time = (startInput && startInput.value) || '';
  let end_time = (endInput && endInput.value) || '';
  const manualHours = getManualHours();
  const isLunch = (selectedOption?.dataset?.name || '').toLowerCase() === 'lunch' || customerName.toLowerCase() === 'lunch';
  if (isLunch && !start_time && !end_time) {
    start_time = '12:00';
    end_time = '12:30';
    if (startInput) startInput.value = start_time;
    if (endInput) endInput.value = end_time;
  }
  let hours = calcHours(start_time, end_time);
  if (Number.isFinite(manualHours)) {
    hours = manualHours;
    if (!start_time && !end_time) {
      start_time = '07:30';
      end_time = '16:00';
    }
  }
  // If not enough data to create an entry, just save a draft locally
  if ((!customer_id && !customerName) || !work_date || !isFinite(hours)) {
    saveDraftDebounced();
    return;
  }
  saveDraftDebounced();
}

function updateCustomerAddress() {
  const select = el('customerSelect');
  const selectedOption = select.options[select.selectedIndex];
  if (selectedOption && selectedOption.value) {
    const address = selectedOption.dataset.address;
    if (address) {
      el('customerAddress').textContent = `\uD83D\uDCCD ${address}`;
    } else {
      el('customerAddress').textContent = '';
    }
  } else {
    el('customerAddress').textContent = '';
  }

  // No auto-save on customer change; use Save button for each block
}

async function saveEntry(){
  if (!EMPLOYEE) { alert('Please select your name first'); return; }
  
  // Prefer selected customer from dropdown; fallback to free-text input
  let customer_id = null;
  const selectedOption = el('customerSelect')?.options[el('customerSelect')?.selectedIndex];
  const customerName = (el('customerName') && el('customerName').value || '').trim();
  if (selectedOption && selectedOption.value) {
    customer_id = selectedOption.value;
  }
  const work_date = el('day').value;
  let start_time = (el('startTime') && el('startTime').value) || '';
  let end_time = (el('endTime') && el('endTime').value) || '';
  const manualHours = getManualHours();
  let hours = calcHours(start_time, end_time);
  if (Number.isFinite(manualHours)) {
    hours = manualHours;
    if (!start_time && !end_time) {
      start_time = '07:30';
      end_time = '16:00';
    }
  }
  const notes = (el('notes') && el('notes').value || '').trim();
  
  if ((!customer_id && !customerName) || !work_date || !isFinite(hours)) {
    return;
  }

  // If no selected id, try to find by name or create
  if (!customer_id) {
    const existing = findCustomerByName(customerName);
    if (existing) {
      customer_id = existing.id;
    } else {
      const res = await api('/api/customers/find-or-create', {
        method: 'POST', headers: {'Content-Type':'application/json'},
        body: JSON.stringify({ name: customerName, address: '' })
      });
      customer_id = res.customer.id;
      await refresh();
    }
  }
  
  await api('/api/time-entries', {
    method:'POST',
    headers:{'Content-Type':'application/json'},
    body: JSON.stringify({ id: window.__editingEntryId || undefined, employee_id: EMPLOYEE.id, customer_id, work_date, hours, start_time, end_time, notes })
  });
  el('customerName').value = '';
  if (el('notes')) el('notes').value = '';
  el('customerConfirm').textContent = '';
  clearDraft();
  customerLocked = true;
  setCustomerEnabled(false);
  if (el('customerSelect')) el('customerSelect').value = '';
  if (el('startTime')) el('startTime').value = '';
  if (el('endTime')) el('endTime').value = '';
  if (el('calcHours')) el('calcHours').value = '';
  if (el('totalHours')) el('totalHours').value = '';
  window.__editingEntryId = null;
  el('customerAddress').textContent = '';
  
  // Save the currently selected day to restore it after refresh
  const savedDay = el('day') ? el('day').value : null;
  
  await refresh();
  
  // Restore the selected day so the user doesn't have to scroll up and change it
  if (savedDay && el('day')) {
    const optionExists = Array.from(el('day').options).some(opt => opt.value === savedDay);
    if (optionExists) {
      el('day').value = savedDay;
      handleTimingChange();
    }
  }
}

async function submitWeek(){
  if (!EMPLOYEE) { alert('Please select your name first'); return; }
  const comment = (el('weeklyComment') && el('weeklyComment').value || '').trim();
  await api('/api/submit-week', {
    method:'POST',
    headers:{'Content-Type':'application/json'},
    body: JSON.stringify({ employee_id: EMPLOYEE.id, week_start: WEEK.week_start, comment })
  });
  saveWeekCommentDraft(comment);
  const status = el('submitStatus');
  if (status) {
    status.textContent = 'Submitted!';
    status.style.display = 'block';
    setTimeout(() => { status.style.display = 'none'; }, 2000);
  }
  await refresh();
}

async function reopenWeek(){
  if (!EMPLOYEE || !WEEK) return;
  if (!confirm('Reopen this week for editing? Submitted entries will go back to draft.')) return;
  await api('/api/unsubmit-week', {
    method:'POST',
    headers:{'Content-Type':'application/json'},
    body: JSON.stringify({ employee_id: EMPLOYEE.id, week_start: WEEK.week_start })
  });
  await refresh();
}

async function clearDrafts(){
  if (!EMPLOYEE || !WEEK) return;
  if (!confirm('Delete ALL draft entries for this week?')) return;
  try {
    await api('/api/time-entries/clear-drafts', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ employee_id: EMPLOYEE.id, week_start: WEEK.week_start })
    });
    await refresh();
  } catch (err) {
    alert('Failed to clear drafts: ' + err.message);
  }
}

function commentKey(){
  if (!EMPLOYEE || !WEEK) return COMMENT_KEY;
  return `${COMMENT_KEY}_${EMPLOYEE.id}_${WEEK.week_start}`;
}

function saveWeekCommentDraft(comment){
  try {
    localStorage.setItem(commentKey(), comment || '');
  } catch {}
}

function loadWeekCommentDraft(){
  try {
    return localStorage.getItem(commentKey()) || '';
  } catch {
    return '';
  }
}

async function loadWeekComment(){
  if (!EMPLOYEE || !WEEK) return;
  try {
    const res = await api(`/api/weekly-comment?employee_id=${EMPLOYEE.id}&week_start=${encodeURIComponent(WEEK.week_start)}`);
    const comment = (res && typeof res.comment === 'string') ? res.comment : '';
    if (el('weeklyComment')) el('weeklyComment').value = comment || loadWeekCommentDraft();
  } catch {
    if (el('weeklyComment')) el('weeklyComment').value = loadWeekCommentDraft();
  }
}

async function setupRecorder(){
  const recBtn = el('recBtn');
  const applyBtn = el('applyVoiceBtn');
  const clearBtn = el('clearParsedBtn');

  applyBtn.onclick = applyParsed;
  if (clearBtn) clearBtn.onclick = clearParsed;

  try{
    const stream = await navigator.mediaDevices.getUserMedia({ audio:true });
    
    // Detect supported MIME type (Safari doesn't support webm)
    let mimeType = 'audio/webm';
    if (!MediaRecorder.isTypeSupported('audio/webm')) {
      if (MediaRecorder.isTypeSupported('audio/mp4')) {
        mimeType = 'audio/mp4';
      } else if (MediaRecorder.isTypeSupported('audio/aac')) {
        mimeType = 'audio/aac';
      } else if (MediaRecorder.isTypeSupported('audio/ogg')) {
        mimeType = 'audio/ogg';
      } else {
        // Fallback - let browser choose
        mimeType = undefined;
      }
    }
    
    const recorderOptions = mimeType ? { mimeType } : {};
    mediaRecorder = new MediaRecorder(stream, recorderOptions);
    const actualMime = mediaRecorder.mimeType || 'audio/webm';

    mediaRecorder.ondataavailable = e => { if (e.data.size) chunks.push(e.data); };

    mediaRecorder.onstop = async () => {
      try{
        el('voiceStatus').textContent = 'Processing...';
        const blob = new Blob(chunks, { type: actualMime });
        const ext = actualMime.includes('mp4') ? 'mp4' : actualMime.includes('ogg') ? 'ogg' : 'webm';
        const fd = new FormData();
        fd.append('audio', blob, `command.${ext}`);
        const result = await api('/api/voice/command', { method:'POST', body: fd });
        showVoiceResult(result);
      } catch(err){
        el('voiceStatus').textContent = err.message;
      }
    };

    recBtn.onclick = () => {
      if (mediaRecorder.state === 'inactive'){
        chunks = [];
        mediaRecorder.start();
        recBtn.textContent = 'Stop Recording';
        el('voiceStatus').textContent = 'Recording...';
        applyBtn.disabled = true;
        if (clearBtn) clearBtn.disabled = true;
        lastParsed = null;
      } else {
        mediaRecorder.stop();
        recBtn.textContent = 'Start Recording';
      }
    };
  } catch(e){
    el('voiceStatus').textContent = 'Microphone permission denied or unsupported browser.';
    recBtn.disabled = true;
  }
}

function showVoiceResult(result){
  el('voiceStatus').textContent = '';
  el('voiceBox').style.display = 'block';
  el('transcript').textContent = result.transcript || '';
  const entries = result.parsed?.entries || [];
  lastParsed = entries;
  appliedParsed.clear();

  const customerOptions = CUSTOMERS.map(c => `<option value="${c.id}">${c.name}</option>`).join('');
  el('parsed').innerHTML = entries.map((e, idx)=>{
    const warn = e.customer_id
      ? ''
      : ' <span class="badge" style="border-color:rgba(255,107,107,.4); color:#ffb3b3;">needs customer match</span>';
    const isLunch = String(e.customer_name || e.customer || '').toLowerCase().includes('lunch');
    return `<div class="card" style="margin:8px 0; padding:8px;">
      <div style="display:flex; gap:8px; align-items:center; flex-wrap:wrap;">
        <input type="checkbox" class="voice-cb" data-idx="${idx}" checked />
        <select class="voice-customer" data-idx="${idx}">
          <option value="">-- Select customer --</option>
          ${customerOptions}
        </select>
        <input class="voice-customer-name" data-idx="${idx}" placeholder="Customer name" style="min-width:140px;" />
        <select class="voice-day" data-idx="${idx}">
          ${(WEEK?.days || []).map(d => `<option value="${d.ymd}">${d.dow} (${d.ymd})</option>`).join('')}
        </select>
        <input class="voice-start" data-idx="${idx}" type="time" step="60" placeholder="${isLunch ? 'Lunch start' : 'Start'}" style="max-width:120px;" />
        <input class="voice-end" data-idx="${idx}" type="time" step="60" placeholder="${isLunch ? 'Lunch end' : 'End'}" style="max-width:120px;" />
        <input class="voice-hours" data-idx="${idx}" placeholder="Hours" inputmode="decimal" style="max-width:90px;" />
        <input class="voice-notes" data-idx="${idx}" placeholder="Notes" style="flex:1; min-width:140px;" />
        ${warn}
      </div>
      <div class="small muted voice-status" data-idx="${idx}" style="margin-top:4px;"></div>
    </div>`;
  }).join('') || '<div class="muted">No entries parsed.</div>';

  // Pre-fill values
  entries.forEach((e, idx) => {
    const custSel = document.querySelector(`.voice-customer[data-idx="${idx}"]`);
    if (custSel && e.customer_id) custSel.value = e.customer_id;
    const daySel = document.querySelector(`.voice-day[data-idx="${idx}"]`);
    if (daySel && e.work_date) daySel.value = e.work_date;
    const hoursInput = document.querySelector(`.voice-hours[data-idx="${idx}"]`);
    if (hoursInput) hoursInput.value = e.hours ?? '';
    const notesInput = document.querySelector(`.voice-notes[data-idx="${idx}"]`);
    if (notesInput) notesInput.value = e.notes || '';
    const nameInput = document.querySelector(`.voice-customer-name[data-idx="${idx}"]`);
    if (nameInput) nameInput.value = e.customer_name || e.customer || '';
    const startInput = document.querySelector(`.voice-start[data-idx="${idx}"]`);
    if (startInput) startInput.value = e.start_time || '';
    const endInput = document.querySelector(`.voice-end[data-idx="${idx}"]`);
    if (endInput) endInput.value = e.end_time || '';
    if (hoursInput) hoursInput.dataset.auto = '1';
    if (hoursInput) {
      hoursInput.addEventListener('input', () => { hoursInput.dataset.auto = '0'; });
    }
    const updateParsedHours = () => {
      if (!hoursInput || hoursInput.dataset.auto !== '1') return;
      const startVal = startInput ? startInput.value : '';
      const endVal = endInput ? endInput.value : '';
      const calc = calcHours(startVal, endVal);
      if (calc != null) hoursInput.value = calc.toString();
    };
    if (startInput) startInput.addEventListener('change', updateParsedHours);
    if (endInput) endInput.addEventListener('change', updateParsedHours);
    updateParsedHours();
    const maybeApply = () => { maybeApplyParsedEntry(idx); };
    [custSel, daySel, startInput, endInput, hoursInput, notesInput, nameInput].forEach(input => {
      if (input) input.addEventListener('change', maybeApply);
      if (input) input.addEventListener('input', maybeApply);
    });
    maybeApplyParsedEntry(idx);
  });

  el('applyVoiceBtn').disabled = entries.length === 0;
  if (el('clearParsedBtn')) el('clearParsedBtn').disabled = entries.length === 0;
}

function clearParsed(){
  lastParsed = null;
  el('parsed').innerHTML = '<div class="muted">No entries parsed.</div>';
  el('applyVoiceBtn').disabled = true;
  if (el('clearParsedBtn')) el('clearParsedBtn').disabled = true;
}

async function applyParsed(){
  if (!EMPLOYEE) { alert('Please select your name first'); return; }
  if (!lastParsed?.length) return;
  const selected = [...document.querySelectorAll('.voice-cb:checked')].map(cb => Number(cb.dataset.idx));
  for (const idx of selected){
    await applyParsedEntry(idx);
  }
  alert('Applied!');
  await refresh();
}

async function applyParsedEntry(idx){
  if (!EMPLOYEE) return;
  if (appliedParsed.has(idx)) return;
  const e = lastParsed ? lastParsed[idx] : null;
  if (!e) return;
  const custSel = document.querySelector(`.voice-customer[data-idx="${idx}"]`);
  const daySel = document.querySelector(`.voice-day[data-idx="${idx}"]`);
  const hoursInput = document.querySelector(`.voice-hours[data-idx="${idx}"]`);
  const notesInput = document.querySelector(`.voice-notes[data-idx="${idx}"]`);
  const startInput = document.querySelector(`.voice-start[data-idx="${idx}"]`);
  const endInput = document.querySelector(`.voice-end[data-idx="${idx}"]`);
  let customer_id = custSel && custSel.value ? custSel.value : e.customer_id;
  const work_date = daySel && daySel.value ? daySel.value : e.work_date;
  const start_time = startInput && startInput.value ? startInput.value : (e.start_time || '');
  const end_time = endInput && endInput.value ? endInput.value : (e.end_time || '');
  let hours = hoursInput && hoursInput.value ? Number(hoursInput.value) : e.hours;
  if ((!Number.isFinite(hours) || hours == null) && start_time && end_time) {
    const calc = calcHours(start_time, end_time);
    if (calc != null) hours = calc;
  }
  const notes = notesInput && notesInput.value ? notesInput.value : (e.notes || '');
  const statusEl = document.querySelector(`.voice-status[data-idx="${idx}"]`);
  try {
    if (!customer_id) {
      const nameInput = document.querySelector(`.voice-customer-name[data-idx="${idx}"]`);
      const typedName = nameInput && nameInput.value ? nameInput.value.trim() : '';
      const name = typedName || e.customer_name || e.customer;
      if (name) {
        const res = await api('/api/customers/find-or-create', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ name: name, address: '' })
        });
        customer_id = res.customer.id;
        await refresh();
      }
    }
    if (!customer_id || !work_date || !Number.isFinite(Number(hours)) || Number(hours) <= 0) {
      if (statusEl) statusEl.textContent = 'Waiting for valid customer, day, and time.';
      return;
    }
    await api('/api/time-entries', {
      method:'POST',
      headers:{'Content-Type':'application/json'},
      body: JSON.stringify({
        employee_id: EMPLOYEE.id,
        customer_id,
        work_date,
        hours,
        start_time,
        end_time,
        notes
      })
    });
    appliedParsed.add(idx);
    if (statusEl) statusEl.textContent = 'Auto-applied.';
    const cb = document.querySelector(`.voice-cb[data-idx="${idx}"]`);
    if (cb) cb.checked = false;
    await loadWeek();
  } catch (err) {
    if (statusEl) statusEl.textContent = `Auto-apply failed: ${err.message || 'error'}`;
  }
}

function maybeApplyParsedEntry(idx){
  if (appliedParsed.has(idx)) return;
  const cb = document.querySelector(`.voice-cb[data-idx="${idx}"]`);
  if (cb && !cb.checked) return;
  applyParsedEntry(idx).catch(()=>{});
}

init().catch(e=>{
  console.error(e);
  alert(e.message || 'Failed to load');
});

// Register service worker for PWA
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(() => console.log('SW registered'))
    .catch(err => console.warn('SW registration failed:', err));
}
</script>

</body>
</html>