// Employees / HR directory — staff records: designation, department, salary,
// join date, status. Owner/Admin can add/edit/remove; others view.
(() => {
const { Card, Badge, Avatar } = window.TechyFuelOSDesignSystem_be0222;

const STATUS_TONE = { active: 'success', on_leave: 'warning', terminated: 'danger' };
const STATUS_LABEL = { active: 'Active', on_leave: 'On leave', terminated: 'Terminated' };
const TYPE_LABEL = { 'full-time': 'Full-time', 'part-time': 'Part-time', contract: 'Contract', intern: 'Intern' };
const WORK_MODE_LABEL = { office: 'Office', remote: 'Remote', hybrid: 'Hybrid', freelance: 'Freelance' };

function fmtMoney(n, cur) {
  if (n === null || n === undefined || n === '') return '—';
  const v = Number(n);
  if (isNaN(v)) return '—';
  const sym = { PKR: 'Rs', INR: '₹', USD: '$', EUR: '€', GBP: '£', AED: 'AED ' };
  const c = cur || 'PKR';
  return (sym[c] || (c + ' ')) + v.toLocaleString();
}
function fmtDate(d) {
  if (!d) return '—';
  const dt = new Date(String(d).replace(' ', 'T'));
  return isNaN(dt) ? '—' : dt.toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' });
}

const EMPTY = { name: '', email: '', phone: '', designation: '', department: '', employment_type: 'full-time', work_mode: 'office', salary_type: 'monthly', salary: '', currency: 'PKR', project_rates: [], join_date: '', status: 'active', address: '', notes: '', cnic_number: '', cnic_front_url: '', cnic_back_url: '', employee_code: '', profile_photo_url: '', id_type: 'CNIC', date_of_birth: '', gender: '', emergency_contact: '', shift_start: '', shift_end: '', shift_grace_minutes: '', default_output_unit: '', default_output_target: '', output_work_days: '1,2,3,4,5' };

// Attachable HR documents (multiple files, stored in employee_documents).
const DOC_TYPES = [
  ['cv', 'CV / Resume'],
  ['offer_letter', 'Offer Letter'],
  ['contract', 'Contract'],
  ['certificate', 'Certificates'],
  ['experience_letter', 'Experience Letter'],
  ['other', 'Other Files'],
];
const DOC_LABEL = Object.fromEntries(DOC_TYPES);

// Capitalize the first letter of each word as the user types a name.
// Only the leading letter of each word is forced up — the rest is left as
// typed, so mid-word caps (e.g. "McD") aren't clobbered.
function titleCase(s) {
  return String(s).replace(/(^|\s)([a-z])/g, (m, p, c) => p + c.toUpperCase());
}

function Employees() {
  useLucide();
  const [rows, setRows] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [search, setSearch] = React.useState('');
  const [statusFilter, setStatusFilter] = React.useState('all');
  const [modalOpen, setModalOpen] = React.useState(false);
  const [editing, setEditing] = React.useState(null);
  const [form, setForm] = React.useState(EMPTY);
  const [saving, setSaving] = React.useState(false);
  // The active sub-tab lives in the URL hash, not just component state: a reload
  // (or a PWA relaunch) on Payroll used to drop the user back on Directory.
  // Hash also makes a tab linkable — #hr=payroll opens straight there.
  const HR_TABS = ['directory', 'payroll', 'attendance', 'leave', 'output'];
  function readHrTab() {
    try {
      const m = /(?:^|[#&])hr=([a-z]+)/.exec(window.location.hash || '');
      if (m && HR_TABS.includes(m[1])) return m[1];
    } catch (e) {}
    return 'directory';
  }
  const [hrTab, _setHrTab] = React.useState(readHrTab);
  function setHrTab(t) {
    _setHrTab(t);
    // replaceState, not push: switching tabs shouldn't stack up Back-button steps.
    try { window.history.replaceState(null, '', t === 'directory' ? window.location.pathname : '#hr=' + t); } catch (e) {}
  }
  // Keep up with the Back button / a pasted link.
  React.useEffect(() => {
    const onHash = () => _setHrTab(readHrTab());
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  const canManage = ['owner', 'admin'].includes(window.TFMyRole);
  // Day-to-day people ops a manager runs too: attendance, leave and output.
  // Money (payroll/salary) stays owner/admin via canManage.
  const canManageStaffOps = ['owner', 'admin', 'manager'].includes(window.TFMyRole);

  const load = React.useCallback(() => {
    if (!window.API || !window.API.getEmployees) { setLoading(false); return; }
    setLoading(true);
    window.API.getEmployees().then(r => { if (r.data) setRows(r.data); }).catch(() => {}).finally(() => setLoading(false));
  }, []);
  React.useEffect(() => { load(); }, [load]);

  function set(k, v) { setForm(f => ({ ...f, [k]: v })); }

  const [cnicUploading, setCnicUploading] = React.useState(null); // 'front' | 'back' | null
  async function uploadCnic(side, file) {
    if (!file || !window.API || !window.API.uploadFile) return;
    if (!file.type.startsWith('image')) { alert('Please pick an image (JPG/PNG).'); return; }
    setCnicUploading(side);
    try {
      const rec = await window.API.uploadFile('files', `cnic/${side}_${Date.now()}`, file);
      const url = rec && (rec.url || rec.file_url);
      if (url) set(side === 'front' ? 'cnic_front_url' : 'cnic_back_url', url);
      else alert('Upload failed. Please try again.');
    } catch (e) { alert('Could not upload the ID card image. Please try again.'); }
    setCnicUploading(null);
  }

  // Profile photo upload
  const [photoUploading, setPhotoUploading] = React.useState(false);
  async function uploadPhoto(file) {
    if (!file || !window.API || !window.API.uploadFile) return;
    if (!file.type.startsWith('image')) { alert('Please pick an image (JPG/PNG).'); return; }
    setPhotoUploading(true);
    try {
      const rec = await window.API.uploadFile('files', `employee-photo/${Date.now()}`, file);
      const url = rec && (rec.url || rec.file_url);
      if (url) set('profile_photo_url', url); else alert('Upload failed. Please try again.');
    } catch (e) { alert('Could not upload the photo. Please try again.'); }
    setPhotoUploading(false);
  }

  // Employee documents (only when editing an existing employee)
  const [docs, setDocs] = React.useState([]);
  const [docUploading, setDocUploading] = React.useState(null); // doc_type being uploaded

  async function uploadDoc(docType, file) {
    if (!file || !window.API || !editing) return;
    setDocUploading(docType);
    try {
      const rec = await window.API.uploadFile('files', `employee-doc/${docType}_${Date.now()}`, file);
      const url = rec && (rec.url || rec.file_url);
      if (!url) { alert('Upload failed.'); setDocUploading(null); return; }
      const { data } = await window.API.addEmployeeDocument(editing.id, { doc_type: docType, name: file.name, file_url: url, file_type: file.type });
      if (data) setDocs(prev => [...prev, data]);
    } catch (e) { alert('Could not attach the document. Please try again.'); }
    setDocUploading(null);
  }
  async function removeDoc(doc) {
    if (!window.confirm('Remove this document?')) return;
    setDocs(prev => prev.filter(d => d.id !== doc.id));
    try { await window.API.deleteEmployeeDocument(doc.id); } catch {}
  }

  // Next employee code = highest trailing number + 1, keeping prefix + padding
  // (TF-011 -> TF-012). Defaults to TF-001 when none exist yet.
  function nextEmployeeCode() {
    let best = null;
    (rows || []).forEach(r => {
      const s = String(r.employee_code || '');
      const m = s.match(/^(.*?)(\d+)\s*$/);
      if (!m) return;
      const num = parseInt(m[2], 10);
      if (best === null || num > best.num) best = { prefix: m[1], num, width: m[2].length };
    });
    if (!best) return 'TF-001';
    return best.prefix + String(best.num + 1).padStart(best.width, '0');
  }

  function openAdd() { setEditing(null); setForm({ ...EMPTY, employee_code: nextEmployeeCode() }); setDocs([]); setModalOpen(true); }
  function openEdit(e) {
    setEditing(e);
    setForm({ ...EMPTY, ...e, salary: e.salary ?? '', project_rates: Array.isArray(e.project_rates) ? e.project_rates : [], join_date: e.join_date ? String(e.join_date).slice(0, 10) : '', date_of_birth: e.date_of_birth ? String(e.date_of_birth).slice(0, 10) : '' });
    setDocs(e.documents || []);
    setModalOpen(true);
  }

  async function save() {
    if (!form.name.trim() || !window.API) return;
    setSaving(true);
    const payload = { ...form, salary: form.salary === '' ? null : Number(form.salary) };
    // Empty inputs must go over as null, not '' — the backend validates these as
    // integers / HH:MM strings and a blank string fails the rule.
    payload.shift_start           = form.shift_start || null;
    payload.shift_end             = form.shift_end || null;
    payload.shift_grace_minutes   = form.shift_grace_minutes === '' || form.shift_grace_minutes == null ? null : Number(form.shift_grace_minutes);
    payload.default_output_unit   = form.default_output_unit || null;
    payload.default_output_target = form.default_output_target === '' || form.default_output_target == null ? null : Number(form.default_output_target);
    payload.output_work_days      = form.output_work_days || null;
    // Only keep per-project rates for project/task pay types; drop empty rows.
    if (form.salary_type === 'project' || form.salary_type === 'task') {
      payload.project_rates = (form.project_rates || [])
        .filter(r => (r.label || '').trim() || r.rate !== '' && r.rate != null)
        .map(r => ({ label: (r.label || '').trim(), rate: r.rate === '' || r.rate == null ? null : Number(r.rate) }));
    } else {
      payload.project_rates = null;
    }
    try {
      if (editing) {
        const { data } = await window.API.updateEmployee(editing.id, payload);
        if (data) setRows(prev => prev.map(r => r.id === editing.id ? data : r));
        setModalOpen(false);
      } else {
        const { data } = await window.API.createEmployee(payload);
        if (data) {
          setRows(prev => [...prev, data]);
          // Switch into edit mode on the new record so documents can be attached
          // without leaving the modal.
          setEditing(data);
          setDocs(data.documents || []);
        } else {
          setModalOpen(false);
        }
      }
    } catch (e) { alert('Could not save employee. Please try again.'); }
    setSaving(false);
  }

  async function remove(e) {
    if (!window.confirm(`Remove ${e.name} from employees? This cannot be undone.`)) return;
    setRows(prev => prev.filter(r => r.id !== e.id));
    try { await window.API.deleteEmployee(e.id); } catch {}
  }

  const filtered = rows.filter(r => {
    if (statusFilter !== 'all' && (r.status || 'active') !== statusFilter) return false;
    if (!search) return true;
    const q = search.toLowerCase();
    return [r.name, r.email, r.designation, r.department].some(v => (v || '').toLowerCase().includes(q));
  });

  const activeCount = rows.filter(r => r.status === 'active').length;
  const onLeave = rows.filter(r => r.status === 'on_leave').length;
  const payroll = rows.filter(r => r.status !== 'terminated').reduce((s, r) => s + (Number(r.salary) || 0), 0);

  const stats = [
    { label: 'Employees', val: rows.length, tone: 'var(--text-strong)' },
    { label: 'Active', val: activeCount, tone: 'var(--green-600)' },
    { label: 'On leave', val: onLeave, tone: 'var(--amber-600)' },
    // Total salary is payroll data — owner/admin only (hidden from managers).
    ...(canManage ? [{ label: 'Monthly payroll', val: fmtMoney(payroll, 'PKR'), tone: 'var(--blue-600)' }] : []),
  ];

  return (
    <div style={{ padding: 24, maxWidth: 1280, margin: '0 auto', width: '100%', boxSizing: 'border-box', overflowX: 'hidden' }}>
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 18, flexWrap: 'wrap', gap: 12 }}>
        <div>
          <h1 style={{ fontSize: 'var(--text-3xl)', fontWeight: 'var(--fw-extrabold)', letterSpacing: '-0.02em' }}>Employees</h1>
          <p style={{ fontSize: 'var(--text-sm)', color: 'var(--text-muted)', marginTop: 2 }}>Your team's HR directory — roles, departments, salary & status.</p>
        </div>
        {canManage && hrTab === 'directory' && (
          <button onClick={openAdd} style={{ display: 'inline-flex', alignItems: 'center', gap: 7, height: 38, padding: '0 16px', background: 'var(--blue-600)', color: '#fff', border: 'none', borderRadius: 'var(--radius-md)', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', fontWeight: 'var(--fw-semibold)', cursor: 'pointer' }}>
            <Icon name="user-plus" size={16} /> Add employee
          </button>
        )}
      </div>

      {/* HR tabs — scroll sideways on mobile so tabs never get cut off */}
      <div style={{ display: 'flex', gap: 4, marginBottom: 16, borderBottom: '1px solid var(--border-subtle)', overflowX: 'auto', WebkitOverflowScrolling: 'touch' }}>
        {[['directory', 'Directory', 'users'], ['payroll', 'Payroll', 'wallet'], ['attendance', 'Attendance', 'clock'], ['leave', 'Leave', 'plane'], ['output', 'Output', 'target']]
          // Payroll is salary data — owner/admin only. A manager sees the rest.
          .filter(([id]) => id !== 'payroll' || canManage)
          .map(([id, label, icon]) => (
          <button key={id} onClick={() => setHrTab(id)}
            style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '9px 14px', background: 'none', border: 'none', borderBottom: hrTab === id ? '2px solid var(--blue-600)' : '2px solid transparent', cursor: 'pointer', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', fontWeight: 'var(--fw-semibold)', color: hrTab === id ? 'var(--blue-700)' : 'var(--text-muted)', marginBottom: -1, whiteSpace: 'nowrap', flexShrink: 0 }}>
            <Icon name={icon} size={15} /> {label}
          </button>
        ))}
      </div>

      {/* Terminated staff are excluded from day-to-day HR tabs (attendance,
          payroll, output). Leave keeps everyone for historical records. */}
      {hrTab === 'payroll' && canManage && <PayrollTab employees={rows.filter(r => r.status !== 'terminated')} canManage={canManage} />}
      {hrTab === 'attendance' && <AttendanceTab employees={rows.filter(r => r.status !== 'terminated')} canManage={canManageStaffOps} />}
      {hrTab === 'leave' && <LeaveTab employees={rows} canManage={canManageStaffOps} />}
      {/* Output is delivery/performance data, not salary — managers enter it day
          to day, same as attendance. (Employee DEFAULTS still need owner/admin,
          since those live on the employee record.) */}
      {hrTab === 'output' && <OutputTab employees={rows.filter(r => r.status !== 'terminated')} canManage={canManageStaffOps} />}

      {hrTab === 'directory' && <>
      {/* Stat cards */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginBottom: 16 }}>
        {stats.map(s => (
          <Card key={s.label} padding="md">
            <div style={{ fontSize: 'var(--text-2xs)', color: 'var(--text-muted)', fontWeight: 'var(--fw-semibold)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>{s.label}</div>
            <div style={{ fontSize: 'var(--text-2xl)', fontWeight: 'var(--fw-extrabold)', color: s.tone, marginTop: 2 }}>{s.val}</div>
          </Card>
        ))}
      </div>

      {/* Search + status filter */}
      <div style={{ marginBottom: 12, display: 'flex', gap: 10, flexWrap: 'wrap', alignItems: 'center' }}>
        <input value={search} onChange={e => setSearch(e.target.value)} placeholder="Search name / email / designation / department…"
          style={{ flex: 1, minWidth: 200, maxWidth: 360, height: 36, padding: '0 12px', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-md)', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', outline: 'none', boxSizing: 'border-box' }} />
        <select value={statusFilter} onChange={e => setStatusFilter(e.target.value)}
          style={{ height: 36, padding: '0 10px', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-md)', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', outline: 'none', cursor: 'pointer', background: 'var(--slate-0)', color: 'var(--text-body)' }}>
          <option value="all">All statuses</option>
          <option value="active">Active</option>
          <option value="on_leave">On leave</option>
          <option value="terminated">Terminated</option>
        </select>
      </div>

      <Card padding="none">
        <div className="tf-scroll-x" style={{ overflowX: 'auto' }}>
          <table style={{ width: '100%', minWidth: 680, borderCollapse: 'collapse' }}>
            <thead>
              <tr style={{ borderBottom: '1px solid var(--border-subtle)' }}>
                {['Name', 'Designation', 'Department', 'Type', ...(canManage ? ['Salary'] : []), 'Joined', 'Status', ''].map((h, i) => (
                  <th key={i} style={{ textAlign: h === 'Salary' ? 'right' : 'left', padding: '11px 14px', fontSize: 'var(--text-2xs)', fontWeight: 'var(--fw-bold)', letterSpacing: '0.05em', textTransform: 'uppercase', color: 'var(--text-subtle)', whiteSpace: 'nowrap' }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {loading && <tr><td colSpan={canManage ? 8 : 7} style={{ padding: 28, textAlign: 'center', color: 'var(--text-muted)', fontSize: 'var(--text-sm)' }}>Loading…</td></tr>}
              {!loading && filtered.length === 0 && (
                <tr><td colSpan={canManage ? 8 : 7} style={{ padding: '40px 20px', textAlign: 'center', color: 'var(--text-muted)', fontSize: 'var(--text-sm)' }}>
                  {search ? 'No employees match your search.' : 'No employees yet. Add your first one.'}
                </td></tr>
              )}
              {!loading && filtered.map(e => (
                <tr key={e.id} style={{ borderBottom: '1px solid var(--border-subtle)' }}>
                  <td style={{ padding: '10px 14px' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                      <Avatar name={e.name} src={e.profile_photo_url || e.avatar_url} size="sm" />
                      <div style={{ minWidth: 0 }}>
                        <div style={{ fontSize: 'var(--text-sm)', fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)', whiteSpace: 'nowrap' }}>{e.name}</div>
                        {e.email && <div style={{ fontSize: 'var(--text-2xs)', color: 'var(--text-muted)', whiteSpace: 'nowrap' }}>{e.email}</div>}
                      </div>
                    </div>
                  </td>
                  <td style={{ padding: '10px 14px', fontSize: 'var(--text-sm)', color: 'var(--text-body)', whiteSpace: 'nowrap' }}>{e.designation || '—'}</td>
                  <td style={{ padding: '10px 14px', fontSize: 'var(--text-sm)', color: 'var(--text-body)', whiteSpace: 'nowrap' }}>{e.department || '—'}</td>
                  <td style={{ padding: '10px 14px', fontSize: 'var(--text-xs)', color: 'var(--text-muted)', whiteSpace: 'nowrap' }}>
                    {TYPE_LABEL[e.employment_type] || '—'}
                    {e.work_mode && <span style={{ color: 'var(--text-subtle)' }}> · {WORK_MODE_LABEL[e.work_mode] || e.work_mode}</span>}
                  </td>
                  {canManage && (
                  <td style={{ padding: '10px 14px', fontSize: 'var(--text-sm)', fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)', textAlign: 'right', whiteSpace: 'nowrap' }}>
                    {e.salary_type && e.salary_type !== 'monthly'
                      ? (e.salary ? fmtMoney(e.salary, e.currency) + (e.salary_type === 'project' ? ' /project' : ' /task') : (e.salary_type === 'project' ? 'Project-based' : 'Per task'))
                      : fmtMoney(e.salary, e.currency)}
                  </td>
                  )}
                  <td style={{ padding: '10px 14px', fontSize: 'var(--text-xs)', color: 'var(--text-muted)', whiteSpace: 'nowrap' }}>{fmtDate(e.join_date)}</td>
                  <td style={{ padding: '10px 14px' }}><Badge tone={STATUS_TONE[e.status] || 'neutral'} size="sm">{STATUS_LABEL[e.status] || e.status}</Badge></td>
                  <td style={{ padding: '10px 14px', whiteSpace: 'nowrap', textAlign: 'right' }}>
                    {canManage && (
                      <div style={{ display: 'inline-flex', gap: 4 }}>
                        <button onClick={() => openEdit(e)} title="Edit" style={{ width: 28, height: 28, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: 'transparent', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-sm)', cursor: 'pointer', color: 'var(--text-muted)' }}><Icon name="pencil" size={13} /></button>
                        <button onClick={() => remove(e)} title="Remove" style={{ width: 28, height: 28, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: 'transparent', border: '1px solid var(--red-200)', borderRadius: 'var(--radius-sm)', cursor: 'pointer', color: 'var(--red-600)' }}><Icon name="trash-2" size={13} /></button>
                      </div>
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Card>
      </>}

      {/* Add / Edit modal */}
      <Modal open={modalOpen} onClose={() => setModalOpen(false)} title={editing ? 'Edit employee' : 'Add employee'} onSubmit={save} loading={saving} submitLabel={editing ? 'Save changes' : 'Add employee'}>
        {/* Profile photo */}
        <FormRow label="Profile photo">
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            {form.profile_photo_url ? (
              <div style={{ position: 'relative' }}>
                <img src={form.profile_photo_url} alt="Profile" style={{ width: 64, height: 64, borderRadius: '50%', objectFit: 'cover', border: '1px solid var(--border-subtle)' }} />
                <button type="button" onClick={() => set('profile_photo_url', '')} title="Remove" style={{ position: 'absolute', top: -4, right: -4, width: 20, height: 20, borderRadius: '50%', background: 'rgba(0,0,0,0.65)', color: '#fff', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="x" size={12} /></button>
              </div>
            ) : (
              <div style={{ width: 64, height: 64, borderRadius: '50%', background: 'var(--slate-100)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--text-subtle)' }}><Icon name="user" size={26} /></div>
            )}
            <label style={{ display: 'inline-flex', alignItems: 'center', gap: 7, height: 34, padding: '0 12px', background: 'var(--slate-0)', border: '1px dashed var(--border-default)', borderRadius: 'var(--radius-md)', cursor: photoUploading ? 'wait' : 'pointer', fontSize: 'var(--text-sm)', color: 'var(--text-body)' }}>
              <Icon name={photoUploading ? 'loader' : 'upload'} size={14} />{photoUploading ? 'Uploading…' : 'Upload photo'}
              <input type="file" accept="image/*" style={{ display: 'none' }} disabled={photoUploading} onChange={e => { const f = (e.target.files || [])[0]; if (f) uploadPhoto(f); e.target.value = ''; }} />
            </label>
          </div>
        </FormRow>

        <div style={FF.row2}>
          <FormRow label="Full name" required><input style={FF.input} value={form.name} onChange={e => set('name', titleCase(e.target.value))} placeholder="Name…" /></FormRow>
          <FormRow label="Employee ID"><input style={FF.input} value={form.employee_code} onChange={e => set('employee_code', e.target.value)} placeholder="e.g. TF-001" /></FormRow>
        </div>
        <div style={FF.row2}>
          <FormRow label="Email"><input style={FF.input} type="email" value={form.email} onChange={e => set('email', e.target.value)} placeholder="email@agency.com" /></FormRow>
          <FormRow label="Phone"><input style={FF.input} value={form.phone} onChange={e => set('phone', e.target.value)} placeholder="+92…" /></FormRow>
        </div>
        <div style={FF.row2}>
          <FormRow label="Date of birth"><input style={FF.input} type="date" value={form.date_of_birth} onChange={e => set('date_of_birth', e.target.value)} /></FormRow>
          <FormRow label="Gender">
            <select style={FF.input} value={form.gender} onChange={e => set('gender', e.target.value)}>
              <option value="">—</option><option value="male">Male</option><option value="female">Female</option><option value="other">Other</option>
            </select>
          </FormRow>
        </div>
        <div style={FF.row2}>
          <FormRow label="Emergency contact"><input style={FF.input} value={form.emergency_contact} onChange={e => set('emergency_contact', e.target.value)} placeholder="Name & phone" /></FormRow>
          <FormRow label="Identity document">
            <select style={FF.input} value={form.id_type} onChange={e => set('id_type', e.target.value)}>
              <option value="CNIC">CNIC</option><option value="Passport">Passport</option><option value="ID Card">ID Card</option>
            </select>
          </FormRow>
        </div>
        <div style={FF.row2}>
          <FormRow label="Designation"><input style={FF.input} value={form.designation} onChange={e => set('designation', e.target.value)} placeholder="Designer, Developer…" /></FormRow>
          <FormRow label="Department"><input style={FF.input} value={form.department} onChange={e => set('department', e.target.value)} placeholder="Design, Marketing…" /></FormRow>
        </div>
        <div style={FF.row2}>
          <FormRow label="Employment type">
            <select style={FF.input} value={form.employment_type} onChange={e => set('employment_type', e.target.value)}>
              <option value="full-time">Full-time</option><option value="part-time">Part-time</option>
              <option value="contract">Contract</option><option value="intern">Intern</option>
            </select>
          </FormRow>
          <FormRow label="Work mode">
            <select style={FF.input} value={form.work_mode} onChange={e => set('work_mode', e.target.value)}>
              <option value="office">Office (on-site)</option>
              <option value="remote">Remote (work from home)</option>
              <option value="hybrid">Hybrid</option>
              <option value="freelance">Freelance</option>
            </select>
          </FormRow>
        </div>
        <div style={FF.row2}>
          <FormRow label="Pay type">
            <select style={FF.input} value={form.salary_type} onChange={e => set('salary_type', e.target.value)}>
              <option value="monthly">Fixed monthly salary</option>
              <option value="project">Project-based</option>
              <option value="task">Per task / output</option>
            </select>
          </FormRow>
          <FormRow label="Currency">
            <select style={FF.input} value={form.currency} onChange={e => set('currency', e.target.value)}>
              <option value="PKR">PKR</option><option value="INR">INR</option><option value="USD">USD</option><option value="EUR">EUR</option><option value="GBP">GBP</option><option value="AED">AED</option>
            </select>
          </FormRow>
        </div>
        <div style={FF.row2}>
          <FormRow label={form.salary_type === 'monthly' ? 'Salary (monthly)' : form.salary_type === 'project' ? 'Default rate (per project)' : 'Default rate (per task/output)'}>
            <input style={FF.input} type="number" value={form.salary} onChange={e => set('salary', e.target.value)} placeholder={form.salary_type === 'monthly' ? '50000' : 'Optional — har project ka rate neeche alag daalo'} />
          </FormRow>
        </div>
        {/* Per-project / per-task rates — each project can have its own rate. */}
        {(form.salary_type === 'project' || form.salary_type === 'task') && (
          <FormRow label={form.salary_type === 'project' ? 'Project rates (har project ka alag rate)' : 'Task rates (har task ka alag rate)'}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {(form.project_rates || []).map((r, i) => (
                <div key={i} style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
                  <input style={{ ...FF.input, flex: 1 }} placeholder={form.salary_type === 'project' ? 'Project name (e.g. Logo design)' : 'Task (e.g. Instagram post)'}
                    value={r.label || ''} onChange={e => set('project_rates', form.project_rates.map((x, xi) => xi === i ? { ...x, label: e.target.value } : x))} />
                  <input style={{ ...FF.input, flex: '0 0 110px' }} type="number" placeholder="Rate"
                    value={r.rate ?? ''} onChange={e => set('project_rates', form.project_rates.map((x, xi) => xi === i ? { ...x, rate: e.target.value } : x))} />
                  <button type="button" title="Remove" onClick={() => set('project_rates', form.project_rates.filter((_, xi) => xi !== i))}
                    style={{ width: 34, height: 34, flex: 'none', border: '1px solid var(--red-200)', background: 'var(--red-50)', color: 'var(--red-600)', borderRadius: 'var(--radius-md)', cursor: 'pointer' }}>
                    <Icon name="x" size={14} />
                  </button>
                </div>
              ))}
              <button type="button" onClick={() => set('project_rates', [...(form.project_rates || []), { label: '', rate: '' }])}
                style={{ alignSelf: 'flex-start', display: 'inline-flex', alignItems: 'center', gap: 6, height: 34, padding: '0 12px', border: '1px dashed var(--border-default)', background: 'var(--slate-0)', borderRadius: 'var(--radius-md)', cursor: 'pointer', fontSize: 'var(--text-sm)', color: 'var(--text-body)' }}>
                <Icon name="plus" size={14} /> Add {form.salary_type === 'project' ? 'project' : 'task'} rate
              </button>
            </div>
          </FormRow>
        )}
        <div style={FF.row2}>
          <FormRow label="Join date"><input style={FF.input} type="date" value={form.join_date} onChange={e => set('join_date', e.target.value)} /></FormRow>
          <FormRow label="Status">
            <select style={FF.input} value={form.status} onChange={e => set('status', e.target.value)}>
              <option value="active">Active</option><option value="on_leave">On leave</option><option value="terminated">Terminated</option>
            </select>
          </FormRow>
        </div>
        {/* Shift — expected in/out time. Blank inherits the workspace default,
            so only staff whose hours differ need anything filled in here. */}
        <div style={{ marginTop: 6, marginBottom: 2, fontSize: 'var(--text-xs)', fontWeight: 'var(--fw-bold)', textTransform: 'uppercase', letterSpacing: '0.05em', color: 'var(--text-subtle)' }}>Shift &amp; timing</div>
        <div style={FF.row2}>
          <FormRow label="Shift start"><input style={FF.input} type="time" value={form.shift_start || ''} onChange={e => set('shift_start', e.target.value)} /></FormRow>
          <FormRow label="Shift end"><input style={FF.input} type="time" value={form.shift_end || ''} onChange={e => set('shift_end', e.target.value)} /></FormRow>
        </div>
        <FormRow label="Grace minutes (late ke baad count hoga)">
          <input style={FF.input} type="number" min="0" max="240" value={form.shift_grace_minutes} onChange={e => set('shift_grace_minutes', e.target.value)} placeholder="Khali chhodo to workspace ka default (15 min)" />
        </FormRow>

        {/* Recurring output — pre-fills the Output tab so a fixed daily target
            is not retyped every day. Any single day can still be changed. */}
        <div style={{ marginTop: 10, marginBottom: 2, fontSize: 'var(--text-xs)', fontWeight: 'var(--fw-bold)', textTransform: 'uppercase', letterSpacing: '0.05em', color: 'var(--text-subtle)' }}>Daily output target</div>
        <div style={FF.row2}>
          <FormRow label="Kya banata hai">
            <select style={FF.input} value={form.default_output_unit || ''} onChange={e => set('default_output_unit', e.target.value)}>
              <option value="">— None —</option>
              <option value="posts">Posts</option><option value="videos">Videos</option>
              <option value="designs">Designs</option><option value="reels">Reels</option>
              <option value="tasks">Tasks</option>
            </select>
          </FormRow>
          <FormRow label="Rozana target"><input style={FF.input} type="number" min="0" value={form.default_output_target} onChange={e => set('default_output_target', e.target.value)} placeholder="e.g. 4" /></FormRow>
        </div>
        <FormRow label="Working days">
          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
            {[['1','Mon'],['2','Tue'],['3','Wed'],['4','Thu'],['5','Fri'],['6','Sat'],['7','Sun']].map(([num,lbl]) => {
              const days = String(form.output_work_days || '').split(',').filter(Boolean);
              const on = days.includes(num);
              return (
                <button key={num} type="button" onClick={() => {
                  const next = on ? days.filter(d => d !== num) : [...days, num].sort();
                  set('output_work_days', next.join(','));
                }} style={{ height: 30, padding: '0 11px', border: `1px solid ${on ? 'var(--blue-600)' : 'var(--border-default)'}`, background: on ? 'var(--blue-50)' : 'var(--slate-0)', color: on ? 'var(--blue-700)' : 'var(--text-muted)', borderRadius: 'var(--radius-md)', cursor: 'pointer', fontSize: 'var(--text-xs)', fontWeight: 'var(--fw-semibold)', fontFamily: 'var(--font-sans)' }}>{lbl}</button>
              );
            })}
          </div>
        </FormRow>

        <FormRow label="Address"><input style={FF.input} value={form.address} onChange={e => set('address', e.target.value)} placeholder="Optional" /></FormRow>
        <FormRow label="Notes"><textarea style={{ ...FF.input, minHeight: 60, resize: 'vertical' }} value={form.notes} onChange={e => set('notes', e.target.value)} placeholder="Optional" /></FormRow>

        {/* ID Card / CNIC — label follows the chosen identity document type */}
        <FormRow label={`${form.id_type || 'CNIC'} number`}><input style={FF.input} value={form.cnic_number} onChange={e => set('cnic_number', e.target.value)} placeholder={form.id_type === 'Passport' ? 'e.g. AB1234567' : 'e.g. 42101-1234567-8'} /></FormRow>
        <div style={FF.row2}>
          {[['front', 'cnic_front_url', 'ID card — Front'], ['back', 'cnic_back_url', 'ID card — Back']].map(([side, key, label]) => (
            <FormRow key={side} label={label}>
              <div>
                {form[key] ? (
                  <div style={{ position: 'relative', display: 'inline-block' }}>
                    <a href={form[key]} target="_blank" rel="noreferrer">
                      <img src={form[key]} alt={label} style={{ width: '100%', maxWidth: 200, height: 110, objectFit: 'cover', borderRadius: 'var(--radius-md)', border: '1px solid var(--border-subtle)' }} />
                    </a>
                    <button type="button" onClick={() => set(key, '')} title="Remove" style={{ position: 'absolute', top: 4, right: 4, width: 22, height: 22, borderRadius: '50%', background: 'rgba(0,0,0,0.6)', color: '#fff', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                      <Icon name="x" size={13} />
                    </button>
                  </div>
                ) : (
                  <label style={{ display: 'inline-flex', alignItems: 'center', gap: 7, height: 38, padding: '0 14px', background: 'var(--slate-0)', border: '1px dashed var(--border-default)', borderRadius: 'var(--radius-md)', cursor: cnicUploading === side ? 'wait' : 'pointer', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', color: 'var(--text-body)' }}>
                    <Icon name={cnicUploading === side ? 'loader' : 'upload'} size={15} />
                    {cnicUploading === side ? 'Uploading…' : 'Upload image'}
                    <input type="file" accept="image/*" style={{ display: 'none' }} disabled={cnicUploading === side} onChange={e => { const f = (e.target.files || [])[0]; if (f) uploadCnic(side, f); e.target.value = ''; }} />
                  </label>
                )}
              </div>
            </FormRow>
          ))}
        </div>

        {/* Documents — CV, Offer Letter, Contract, CNIC, Certificates, Experience Letter, Other */}
        <div style={{ marginTop: 16, paddingTop: 14, borderTop: '1px solid var(--border-subtle)' }}>
          <div style={{ fontSize: 'var(--text-sm)', fontWeight: 'var(--fw-bold)', color: 'var(--text-strong)', marginBottom: 2 }}>Documents</div>
          {!editing ? (
            <p style={{ fontSize: 'var(--text-xs)', color: 'var(--text-muted)', margin: '4px 0 0' }}>Save the employee first, then re-open to attach CV, contract, certificates and more.</p>
          ) : (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 8 }}>
              {DOC_TYPES.map(([type, label]) => {
                const items = docs.filter(d => d.doc_type === type);
                return (
                  <div key={type}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ fontSize: 'var(--text-xs)', fontWeight: 'var(--fw-semibold)', color: 'var(--text-body)' }}>{label}</span>
                      <label style={{ display: 'inline-flex', alignItems: 'center', gap: 6, height: 30, padding: '0 10px', background: 'var(--slate-0)', border: '1px dashed var(--border-default)', borderRadius: 'var(--radius-sm)', cursor: docUploading === type ? 'wait' : 'pointer', fontSize: 'var(--text-xs)', color: 'var(--text-body)' }}>
                        <Icon name={docUploading === type ? 'loader' : 'upload'} size={13} />{docUploading === type ? 'Uploading…' : 'Attach'}
                        <input type="file" style={{ display: 'none' }} disabled={docUploading === type} onChange={e => { const f = (e.target.files || [])[0]; if (f) uploadDoc(type, f); e.target.value = ''; }} />
                      </label>
                    </div>
                    {items.length > 0 && (
                      <div style={{ display: 'flex', flexDirection: 'column', gap: 4, marginTop: 6 }}>
                        {items.map(d => (
                          <div key={d.id} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 10px', background: 'var(--slate-50)', borderRadius: 'var(--radius-sm)', fontSize: 'var(--text-xs)' }}>
                            <Icon name="file-text" size={14} />
                            <a href={d.file_url} target="_blank" rel="noreferrer" style={{ flex: 1, minWidth: 0, color: 'var(--blue-600)', textDecoration: 'none', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{d.name || 'Download'}</a>
                            <a href={d.file_url} download title="Download" style={{ color: 'var(--text-muted)', display: 'inline-flex' }}><Icon name="download" size={13} /></a>
                            <button type="button" onClick={() => removeDoc(d)} title="Remove" style={{ background: 'transparent', border: 'none', cursor: 'pointer', color: 'var(--red-600)', display: 'inline-flex' }}><Icon name="trash-2" size={13} /></button>
                          </div>
                        ))}
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          )}
        </div>
      </Modal>
    </div>
  );
}
// ── Payroll tab ──────────────────────────────────────────────────────────────
function currentPeriod() {
  const d = new Date();
  return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0');
}
// Every earning and deduction is its own field: the payslip has to show a real
// breakdown, so the components are stored, not just the final net.
const PS_EARNINGS = [
  ['basic', 'Basic salary'], ['house_rent_allowance', 'House rent'], ['medical_allowance', 'Medical'],
  ['transport_allowance', 'Transport'], ['other_allowances', 'Other allowances'],
  ['overtime', 'Overtime'], ['bonus', 'Bonus / commission'], ['arrears', 'Arrears'],
];
const PS_DEDUCTIONS = [
  ['income_tax', 'Income tax'], ['eobi', 'EOBI / social security'], ['provident_fund', 'Provident fund'],
  ['salary_advance', 'Advance / loan'], ['leave_deduction', 'Leave / absence'], ['other_deductions', 'Other deductions'],
];
const PS_MONEY = [...PS_EARNINGS, ...PS_DEDUCTIONS].map(([k]) => k);
const PS_EMPTY = {
  employee_id: '', period: currentPeriod(), status: 'unpaid', notes: '',
  pay_date: '', payment_status: 'unpaid', payment_date: '', payment_method: '', payment_reference: '',
  ...Object.fromEntries(PS_MONEY.map(k => [k, ''])),
};

function PayrollTab({ employees, canManage }) {
  const [period, setPeriod] = React.useState(currentPeriod());
  const [slips, setSlips] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [modalOpen, setModalOpen] = React.useState(false);
  const [editing, setEditing] = React.useState(null);
  const [form, setForm] = React.useState(PS_EMPTY);
  const [saving, setSaving] = React.useState(false);

  const load = React.useCallback(() => {
    if (!window.API || !window.API.getPayslips) { setLoading(false); return; }
    setLoading(true);
    window.API.getPayslips({ period }).then(r => { if (r.data) setSlips(r.data); }).catch(() => {}).finally(() => setLoading(false));
  }, [period]);
  React.useEffect(() => { load(); }, [load]);

  function set(k, v) { setForm(f => ({ ...f, [k]: v })); }
  const num = v => v === '' || v == null ? 0 : Number(v);
  // Mirrors the server's arithmetic exactly — the server still recomputes on save,
  // so this is a preview, never the source of truth.
  const grossPay = PS_EARNINGS.reduce((t, [k]) => t + num(form[k]), 0);
  const totalDeductions = PS_DEDUCTIONS.reduce((t, [k]) => t + num(form[k]), 0);
  const previewNet = grossPay - totalDeductions;
  const selectedEmp = employees.find(x => x.id === form.employee_id);

  function openAdd() { setEditing(null); setForm({ ...PS_EMPTY, period }); setModalOpen(true); }
  function openEdit(s) {
    setEditing(s);
    setForm({
      ...PS_EMPTY,
      employee_id: s.employee_id, period: s.period, status: s.status || 'unpaid', notes: s.notes || '',
      pay_date: s.pay_date ? String(s.pay_date).slice(0,10) : '',
      payment_status: s.payment_status || 'unpaid',
      payment_date: s.payment_date ? String(s.payment_date).slice(0,10) : '',
      payment_method: s.payment_method || '', payment_reference: s.payment_reference || '',
      ...Object.fromEntries(PS_MONEY.map(k => [k, s[k] ?? ''])),
      // A payslip written before the component columns existed keeps its total in
      // the legacy `deductions` field; surface it as "other" so it stays visible.
      other_deductions: (PS_DEDUCTIONS.every(([k]) => !Number(s[k])) && Number(s.deductions))
        ? s.deductions : (s.other_deductions ?? ''),
    });
    setModalOpen(true);
  }

  async function save() {
    if (!form.employee_id || !form.period || !window.API) return;
    setSaving(true);
    const payload = { ...form, ...Object.fromEntries(PS_MONEY.map(k => [k, num(form[k])])) };
    // Optional dates must be omitted rather than sent empty — '' fails date validation.
    ['pay_date', 'payment_date'].forEach(k => { if (!payload[k]) delete payload[k]; });
    if (!payload.payment_method) delete payload.payment_method;
    try {
      if (editing) {
        const { data } = await window.API.updatePayslip(editing.id, payload);
        if (data) setSlips(prev => prev.map(x => x.id === editing.id ? data : x));
      } else {
        const { data } = await window.API.createPayslip(payload);
        if (data) setSlips(prev => [data, ...prev]);
      }
      setModalOpen(false);
    } catch (e) { alert('Could not save payslip. Please try again.'); }
    setSaving(false);
  }
  async function togglePaid(s) {
    const next = s.status === 'paid' ? 'unpaid' : 'paid';
    setSlips(prev => prev.map(x => x.id === s.id ? { ...x, status: next } : x));
    try { await window.API.updatePayslip(s.id, { status: next }); } catch {}
  }
  async function remove(s) {
    if (!window.confirm('Delete this payslip?')) return;
    setSlips(prev => prev.filter(x => x.id !== s.id));
    try { await window.API.deletePayslip(s.id); } catch {}
  }

  const totalNet = slips.reduce((a, s) => a + Number(s.net || 0), 0);
  const paidNet = slips.filter(s => s.status === 'paid').reduce((a, s) => a + Number(s.net || 0), 0);
  const cur = slips[0]?.currency || 'PKR';

  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14, flexWrap: 'wrap' }}>
        <FormRow label="" >
          <input type="month" value={period} onChange={e => setPeriod(e.target.value)} style={{ ...FF.input, width: 170 }} />
        </FormRow>
        <div style={{ flex: 1 }} />
        {canManage && <button onClick={openAdd} style={{ display: 'inline-flex', alignItems: 'center', gap: 7, height: 38, padding: '0 16px', background: 'var(--blue-600)', color: '#fff', border: 'none', borderRadius: 'var(--radius-md)', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', fontWeight: 'var(--fw-semibold)', cursor: 'pointer' }}>
          <Icon name="plus" size={15} /> Generate payslip
        </button>}
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, marginBottom: 16 }}>
        <Card padding="md"><div style={{ fontSize: 'var(--text-2xs)', color: 'var(--text-muted)', fontWeight: 'var(--fw-semibold)', textTransform: 'uppercase' }}>Payslips</div><div style={{ fontSize: 'var(--text-2xl)', fontWeight: 'var(--fw-extrabold)', marginTop: 2 }}>{slips.length}</div></Card>
        <Card padding="md"><div style={{ fontSize: 'var(--text-2xs)', color: 'var(--text-muted)', fontWeight: 'var(--fw-semibold)', textTransform: 'uppercase' }}>Total net</div><div style={{ fontSize: 'var(--text-2xl)', fontWeight: 'var(--fw-extrabold)', color: 'var(--blue-600)', marginTop: 2 }}>{fmtMoney(totalNet, cur)}</div></Card>
        <Card padding="md"><div style={{ fontSize: 'var(--text-2xs)', color: 'var(--text-muted)', fontWeight: 'var(--fw-semibold)', textTransform: 'uppercase' }}>Paid</div><div style={{ fontSize: 'var(--text-2xl)', fontWeight: 'var(--fw-extrabold)', color: 'var(--green-600)', marginTop: 2 }}>{fmtMoney(paidNet, cur)}</div></Card>
      </div>

      <Card padding="none">
        <div style={{ overflowX: 'auto' }} data-scroll-x>
          <table style={{ width: '100%', minWidth: 720, borderCollapse: 'collapse' }}>
            <thead>
              <tr style={{ borderBottom: '1px solid var(--border-subtle)' }}>
                {['Employee', 'Basic', 'Allowances', 'Bonus', 'Deductions', 'Net', 'Status', ''].map((h, i) => (
                  <th key={i} style={{ textAlign: i >= 1 && i <= 5 ? 'right' : 'left', padding: '11px 14px', fontSize: 'var(--text-2xs)', fontWeight: 'var(--fw-bold)', letterSpacing: '0.05em', textTransform: 'uppercase', color: 'var(--text-subtle)', whiteSpace: 'nowrap' }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {loading && <tr><td colSpan={8} style={{ padding: 28, textAlign: 'center', color: 'var(--text-muted)', fontSize: 'var(--text-sm)' }}>Loading…</td></tr>}
              {!loading && slips.length === 0 && <tr><td colSpan={8} style={{ padding: '40px 20px', textAlign: 'center', color: 'var(--text-muted)', fontSize: 'var(--text-sm)' }}>No payslips for this month yet.</td></tr>}
              {!loading && slips.map(s => (
                <tr key={s.id} style={{ borderBottom: '1px solid var(--border-subtle)' }}>
                  <td style={{ padding: '10px 14px', fontSize: 'var(--text-sm)', fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)', whiteSpace: 'nowrap' }}>{s.employee_name || '—'}</td>
                  <td style={{ padding: '10px 14px', fontSize: 'var(--text-sm)', textAlign: 'right', whiteSpace: 'nowrap' }}>{fmtMoney(s.basic, s.currency)}</td>
                  <td style={{ padding: '10px 14px', fontSize: 'var(--text-sm)', textAlign: 'right', whiteSpace: 'nowrap' }}>{fmtMoney(s.allowances, s.currency)}</td>
                  <td style={{ padding: '10px 14px', fontSize: 'var(--text-sm)', textAlign: 'right', whiteSpace: 'nowrap' }}>{fmtMoney(s.bonus, s.currency)}</td>
                  <td style={{ padding: '10px 14px', fontSize: 'var(--text-sm)', textAlign: 'right', color: 'var(--red-600)', whiteSpace: 'nowrap' }}>{fmtMoney(s.deductions, s.currency)}</td>
                  <td style={{ padding: '10px 14px', fontSize: 'var(--text-sm)', fontWeight: 'var(--fw-bold)', color: 'var(--text-strong)', textAlign: 'right', whiteSpace: 'nowrap' }}>{fmtMoney(s.net, s.currency)}</td>
                  <td style={{ padding: '10px 14px' }}>
                    <button onClick={() => canManage && togglePaid(s)} disabled={!canManage} style={{ cursor: canManage ? 'pointer' : 'default', border: 'none', background: 'none', padding: 0 }}>
                      <Badge tone={s.status === 'paid' ? 'success' : 'warning'} size="sm">{s.status === 'paid' ? 'Paid' : 'Unpaid'}</Badge>
                    </button>
                  </td>
                  <td style={{ padding: '10px 14px', whiteSpace: 'nowrap', textAlign: 'right' }}>
                    {canManage && (
                      <div style={{ display: 'inline-flex', gap: 4 }}>
                        <button onClick={() => openEdit(s)} title="Edit" style={{ width: 28, height: 28, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: 'transparent', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-sm)', cursor: 'pointer', color: 'var(--text-muted)' }}><Icon name="pencil" size={13} /></button>
                        <button onClick={() => remove(s)} title="Delete" style={{ width: 28, height: 28, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: 'transparent', border: '1px solid var(--red-200)', borderRadius: 'var(--radius-sm)', cursor: 'pointer', color: 'var(--red-600)' }}><Icon name="trash-2" size={13} /></button>
                      </div>
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Card>

      <Modal open={modalOpen} onClose={() => setModalOpen(false)} title={editing ? 'Edit payslip' : 'Generate payslip'} onSubmit={save} loading={saving} submitLabel={editing ? 'Save changes' : 'Generate'}>
        <div style={FF.row2}>
          <FormRow label="Employee" required>
            <select style={FF.input} value={form.employee_id} onChange={e => { const emp = employees.find(x => x.id === e.target.value); set('employee_id', e.target.value); if (emp && !form.basic) set('basic', emp.salary ?? ''); }}>
              <option value="">— Select —</option>
              {employees.map(emp => <option key={emp.id} value={emp.id}>{emp.name}</option>)}
            </select>
          </FormRow>
          <FormRow label="Period" required><input type="month" style={FF.input} value={form.period} onChange={e => set('period', e.target.value)} /></FormRow>
        </div>
        <div style={FF.row2}>
          <FormRow label="Employee ID">
            {/* Read-only: it identifies the employee, it is not a payroll input. */}
            <input style={{ ...FF.input, background: 'var(--slate-50)', color: 'var(--text-muted)' }} value={(selectedEmp && (selectedEmp.employee_code || (selectedEmp.id || '').slice(0, 8))) || ''} readOnly placeholder="-" />
          </FormRow>
          <FormRow label="Pay date"><input type="date" style={FF.input} value={form.pay_date} onChange={e => set('pay_date', e.target.value)} /></FormRow>
        </div>

        <PsSection title="Earnings" />
        {PS_EARNINGS.reduce((rows, item, i, arr) => (i % 2 ? rows : [...rows, arr.slice(i, i + 2)]), []).map((pair, i) => (
          <div key={'e' + i} style={FF.row2}>
            {pair.map(([k, label]) => (
              <FormRow key={k} label={label}>
                <input type="number" min="0" step="0.01" style={FF.input} value={form[k]} onChange={e => set(k, e.target.value)} placeholder="0" />
              </FormRow>
            ))}
          </div>
        ))}
        <PsTotalRow label="Gross pay" value={grossPay} />

        <PsSection title="Deductions" />
        {PS_DEDUCTIONS.reduce((rows, item, i, arr) => (i % 2 ? rows : [...rows, arr.slice(i, i + 2)]), []).map((pair, i) => (
          <div key={'d' + i} style={FF.row2}>
            {pair.map(([k, label]) => (
              <FormRow key={k} label={label}>
                <input type="number" min="0" step="0.01" style={FF.input} value={form[k]} onChange={e => set(k, e.target.value)} placeholder="0" />
              </FormRow>
            ))}
          </div>
        ))}
        <PsTotalRow label="Total deductions" value={totalDeductions} />

        {/* Payroll summary - the three figures that matter, in order. */}
        <div style={{ padding: '12px 14px', background: 'var(--slate-50)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', margin: '4px 0 14px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 'var(--text-sm)', color: 'var(--text-muted)', marginBottom: 4 }}>
            <span>Gross pay</span><span style={{ fontWeight: 'var(--fw-semibold)', color: 'var(--text-body)' }}>{grossPay.toLocaleString()}</span>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 'var(--text-sm)', color: 'var(--text-muted)', paddingBottom: 8, borderBottom: '1px solid var(--border-subtle)' }}>
            <span>Total deductions</span><span style={{ fontWeight: 'var(--fw-semibold)', color: 'var(--text-body)' }}>-{totalDeductions.toLocaleString()}</span>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', paddingTop: 8 }}>
            <span style={{ fontSize: 'var(--text-sm)', fontWeight: 'var(--fw-bold)', color: 'var(--text-strong)' }}>Net pay</span>
            <span style={{ fontSize: 'var(--text-xl)', fontWeight: 'var(--fw-extrabold)', color: previewNet < 0 ? 'var(--red-600)' : 'var(--blue-600)' }}>{previewNet.toLocaleString()}</span>
          </div>
          {previewNet < 0 && <div style={{ fontSize: 'var(--text-2xs)', color: 'var(--red-600)', marginTop: 6 }}>Net pay cannot be negative - deductions exceed gross pay.</div>}
        </div>

        <PsSection title="Payment details" />
        <div style={FF.row2}>
          <FormRow label="Payment status">
            <select style={FF.input} value={form.payment_status} onChange={e => { set('payment_status', e.target.value); set('status', e.target.value === 'paid' ? 'paid' : 'unpaid'); }}>
              <option value="unpaid">Unpaid</option><option value="partial">Partially paid</option><option value="paid">Paid</option>
            </select>
          </FormRow>
          <FormRow label={form.payment_status === 'paid' ? 'Payment date *' : 'Payment date'}>
            <input type="date" style={FF.input} value={form.payment_date} onChange={e => set('payment_date', e.target.value)} />
          </FormRow>
        </div>
        <div style={FF.row2}>
          <FormRow label={form.payment_status === 'paid' ? 'Payment method *' : 'Payment method'}>
            <select style={FF.input} value={form.payment_method} onChange={e => set('payment_method', e.target.value)}>
              <option value="">- Select -</option>
              <option value="bank_transfer">Bank transfer</option><option value="cash">Cash</option><option value="cheque">Cheque</option>
            </select>
          </FormRow>
          <FormRow label="Reference / transaction ID">
            <input style={FF.input} value={form.payment_reference} onChange={e => set('payment_reference', e.target.value)} placeholder="Optional" />
          </FormRow>
        </div>

        <FormRow label="Notes"><textarea style={{ ...FF.input, minHeight: 50, resize: 'vertical' }} value={form.notes} onChange={e => set('notes', e.target.value)} placeholder="Optional" /></FormRow>
      </Modal>
    </div>
  );
}

// Section divider inside the payslip modal - keeps a long form readable without
// making the modal itself any bigger.
function PsSection({ title }) {
  return (
    <div style={{ fontSize: 'var(--text-2xs)', fontWeight: 'var(--fw-bold)', color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.05em', margin: '14px 0 8px', paddingBottom: 5, borderBottom: '1px solid var(--border-subtle)' }}>{title}</div>
  );
}

function PsTotalRow({ label, value }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 2px 2px', fontSize: 'var(--text-xs)', color: 'var(--text-muted)' }}>
      <span>{label}</span>
      <span style={{ fontWeight: 'var(--fw-bold)', color: 'var(--text-strong)' }}>{Number(value || 0).toLocaleString()}</span>
    </div>
  );
}

// ── Attendance tab ───────────────────────────────────────────────────────────
function todayStr() { const d = new Date(); return d.getFullYear() + '-' + String(d.getMonth()+1).padStart(2,'0') + '-' + String(d.getDate()).padStart(2,'0'); }
// Minutes as a human duration: 42 -> "42m", 95 -> "1h 35m".
function mins(n) {
  const m = Math.max(0, Math.round(Number(n) || 0));
  if (!m) return '0m';
  return m < 60 ? m + 'm' : Math.floor(m / 60) + 'h' + (m % 60 ? ' ' + (m % 60) + 'm' : '');
}
// "09:00" -> "9:00 AM" for display; the stored value stays 24h.
function hm12(hm) {
  if (!hm) return '';
  const [h, m] = String(hm).split(':').map(Number);
  if (isNaN(h)) return hm;
  const ap = h >= 12 ? 'PM' : 'AM';
  const h12 = h % 12 === 0 ? 12 : h % 12;
  return h12 + ':' + String(m || 0).padStart(2, '0') + ' ' + ap;
}
function hhmm(ts) { if (!ts) return '—'; const d = new Date(String(ts).replace(' ','T') + (String(ts).endsWith('Z')?'':'Z')); return isNaN(d) ? '—' : d.toLocaleTimeString('en-US',{hour:'numeric',minute:'2-digit',hour12:true}); }

function AttendanceTab({ employees, canManage }) {
  const [view, setView] = React.useState('today'); // 'today' | 'month'
  const [month, setMonth] = React.useState(currentPeriod());
  const [today, setToday] = React.useState([]);
  const [summary, setSummary] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [busy, setBusy] = React.useState(null); // employee_id being checked in/out
  // Workspace-wide default office hours. Every employee inherits these unless
  // their own row overrides them, so "what time is he supposed to come in?"
  // finally has an answer stored somewhere.
  const [shiftOpen, setShiftOpen] = React.useState(false);
  const [wsShift, setWsShift] = React.useState({ shift_start: '', shift_end: '', shift_grace_minutes: '' });
  const [shiftSaving, setShiftSaving] = React.useState(false);

  React.useEffect(() => {
    if (!window.API || !window.API.getWorkspaces) return;
    window.API.getWorkspaces().then(r => {
      const list = r && r.data ? r.data : [];
      const active = list.find(w => w.id === window.TFActiveWorkspaceId) || list[0];
      if (active) setWsShift({
        shift_start: active.shift_start || '',
        shift_end: active.shift_end || '',
        shift_grace_minutes: active.shift_grace_minutes == null ? '' : String(active.shift_grace_minutes),
      });
    }).catch(()=>{});
  }, []);

  async function saveWsShift() {
    if (!window.API || !window.API.updateWorkspace) return;
    setShiftSaving(true);
    try {
      await window.API.updateWorkspace(null, {
        shift_start: wsShift.shift_start || null,
        shift_end: wsShift.shift_end || null,
        shift_grace_minutes: wsShift.shift_grace_minutes === '' ? null : Number(wsShift.shift_grace_minutes),
      });
      setShiftOpen(false);
    } catch { alert('Could not save the shift timings.'); }
    setShiftSaving(false);
  }

  const loadToday = React.useCallback(() => {
    if (!window.API || !window.API.getAttendance) { setLoading(false); return; }
    setLoading(true);
    window.API.getAttendance({ date: todayStr() }).then(r => { if (r.data) setToday(r.data); }).catch(()=>{}).finally(()=>setLoading(false));
  }, []);
  const loadMonth = React.useCallback(() => {
    if (!window.API || !window.API.getAttendanceSummary) { setLoading(false); return; }
    setLoading(true);
    window.API.getAttendanceSummary(month).then(r => { if (r.data) setSummary(r.data); }).catch(()=>{}).finally(()=>setLoading(false));
  }, [month]);
  React.useEffect(() => { view === 'today' ? loadToday() : loadMonth(); }, [view, loadToday, loadMonth]);

  const byEmp = {}; today.forEach(a => { byEmp[a.employee_id] = a; });

  async function checkIn(emp) {
    setBusy(emp.id);
    try { const { data } = await window.API.attendanceCheckIn({ employee_id: emp.id }); if (data) setToday(prev => [...prev.filter(x=>x.employee_id!==emp.id), data]); } catch(e){ alert('Check-in failed.'); }
    setBusy(null);
  }
  async function checkOut(emp) {
    setBusy(emp.id);
    try { const { data } = await window.API.attendanceCheckOut({ employee_id: emp.id }); if (data) setToday(prev => prev.map(x=>x.employee_id===emp.id?data:x)); } catch(e){ alert('Check-out failed — is there a check-in today?'); }
    setBusy(null);
  }
  async function breakIn(emp) {
    setBusy(emp.id);
    try { const { data, error } = await window.API.attendanceBreakIn(emp.id); if (data) setToday(prev => prev.map(x=>x.employee_id===emp.id?data:x)); else if (error) alert(error.message || 'Could not start break.'); } catch(e){ alert('Could not start break.'); }
    setBusy(null);
  }
  async function breakOut(emp) {
    setBusy(emp.id);
    try { const { data, error } = await window.API.attendanceBreakOut(emp.id); if (data) setToday(prev => prev.map(x=>x.employee_id===emp.id?data:x)); else if (error) alert(error.message || 'Could not end break.'); } catch(e){ alert('Could not end break.'); }
    setBusy(null);
  }

  // Manual add / edit — set custom check-in/out times, break, status.
  const [modalOpen, setModalOpen] = React.useState(false);
  const [mForm, setMForm] = React.useState(null); // { id?, employee_id, date, check_in, check_out, break_minutes, status }
  const [mSaving, setMSaving] = React.useState(false);
  function toLocal(ts) { if (!ts) return ''; const d = new Date(String(ts).replace(' ','T') + (String(ts).endsWith('Z')?'':'Z')); return isNaN(d) ? '' : new Date(d.getTime() - d.getTimezoneOffset()*60000).toISOString().slice(0,16); }
  function openManual(emp, existing) {
    setMForm({
      id: existing?.id || null,
      employee_id: (existing?.employee_id) || emp?.id || '',
      date: existing?.date ? String(existing.date).slice(0,10) : todayStr(),
      check_in: toLocal(existing?.check_in),
      check_out: toLocal(existing?.check_out),
      break_minutes: existing?.break_minutes ?? 0,
      status: existing?.status || 'present',
    });
    setModalOpen(true);
  }
  function setM(k,v){ setMForm(f=>({ ...f, [k]:v })); }
  async function saveManual() {
    if (!mForm.employee_id || !mForm.date || !window.API) return;
    setMSaving(true);
    // Send times as full ISO (server parses); empty stays null.
    const payload = {
      employee_id: mForm.employee_id, date: mForm.date,
      check_in: mForm.check_in ? new Date(mForm.check_in).toISOString() : null,
      check_out: mForm.check_out ? new Date(mForm.check_out).toISOString() : null,
      break_minutes: Number(mForm.break_minutes) || 0,
      status: mForm.status,
    };
    try {
      if (mForm.id) { const { data } = await window.API.updateAttendance(mForm.id, payload); if (data) setToday(prev => prev.map(x=>x.id===mForm.id?data:x)); }
      else { const { data } = await window.API.createAttendance(payload); if (data) setToday(prev => [...prev.filter(x=>x.employee_id!==mForm.employee_id || String(x.date).slice(0,10)!==mForm.date), data]); }
      setModalOpen(false);
    } catch(e){ alert('Could not save attendance. Check the times.'); }
    setMSaving(false);
  }
  async function delAttendance(a) {
    if (!window.confirm('Delete this attendance record?')) return;
    setToday(prev => prev.filter(x=>x.id!==a.id));
    try { await window.API.deleteAttendance(a.id); } catch {}
  }

  return (
    <div>
      {/* Office hours — the reference point every late/early figure is measured
          against. Without this there was no stored expected in/out time at all. */}
      {canManage && (
        <div style={{ marginBottom: 14, border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', background: 'var(--slate-50)', padding: shiftOpen ? '14px 16px' : '10px 14px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
            <Icon name="clock" size={15} style={{ color: 'var(--text-muted)' }} />
            <span style={{ fontSize: 'var(--text-sm)', fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)' }}>Office hours</span>
            <span style={{ fontSize: 'var(--text-xs)', color: 'var(--text-muted)' }}>
              {wsShift.shift_start && wsShift.shift_end
                ? `${hm12(wsShift.shift_start)} – ${hm12(wsShift.shift_end)} · ${wsShift.shift_grace_minutes === '' ? 15 : wsShift.shift_grace_minutes} min grace`
                : 'Not set — 9:00 AM – 6:00 PM (15 min grace) use ho raha hai'}
            </span>
            <div style={{ flex: 1 }} />
            <button onClick={() => setShiftOpen(o => !o)} style={{ height: 30, padding: '0 12px', background: 'var(--slate-0)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-md)', cursor: 'pointer', fontSize: 'var(--text-xs)', fontWeight: 'var(--fw-semibold)', fontFamily: 'var(--font-sans)', color: 'var(--text-body)' }}>{shiftOpen ? 'Cancel' : 'Change'}</button>
          </div>
          {shiftOpen && (
            <div style={{ display: 'flex', gap: 12, alignItems: 'flex-end', flexWrap: 'wrap', marginTop: 12 }}>
              <label style={{ fontSize: 'var(--text-2xs)', fontWeight: 'var(--fw-bold)', textTransform: 'uppercase', letterSpacing: '0.05em', color: 'var(--text-subtle)' }}>Start<br />
                <input type="time" value={wsShift.shift_start} onChange={e => setWsShift(w => ({ ...w, shift_start: e.target.value }))} style={{ ...FF.input, width: 130, marginTop: 4 }} /></label>
              <label style={{ fontSize: 'var(--text-2xs)', fontWeight: 'var(--fw-bold)', textTransform: 'uppercase', letterSpacing: '0.05em', color: 'var(--text-subtle)' }}>End<br />
                <input type="time" value={wsShift.shift_end} onChange={e => setWsShift(w => ({ ...w, shift_end: e.target.value }))} style={{ ...FF.input, width: 130, marginTop: 4 }} /></label>
              <label style={{ fontSize: 'var(--text-2xs)', fontWeight: 'var(--fw-bold)', textTransform: 'uppercase', letterSpacing: '0.05em', color: 'var(--text-subtle)' }}>Grace (min)<br />
                <input type="number" min="0" max="240" value={wsShift.shift_grace_minutes} onChange={e => setWsShift(w => ({ ...w, shift_grace_minutes: e.target.value }))} placeholder="15" style={{ ...FF.input, width: 100, marginTop: 4 }} /></label>
              <button disabled={shiftSaving} onClick={saveWsShift} style={{ height: 36, padding: '0 16px', background: 'var(--blue-600)', color: '#fff', border: 'none', borderRadius: 'var(--radius-md)', cursor: 'pointer', fontSize: 'var(--text-sm)', fontWeight: 'var(--fw-semibold)', fontFamily: 'var(--font-sans)' }}>{shiftSaving ? 'Saving…' : 'Save'}</button>
              <span style={{ fontSize: 'var(--text-2xs)', color: 'var(--text-muted)', maxWidth: 320 }}>Kisi employee ka time alag hai to uske profile mein alag shift set kar sakte ho — wo ye default override kar dega.</span>
            </div>
          )}
        </div>
      )}
      <div style={{ display: 'flex', gap: 8, marginBottom: 14, alignItems: 'center', flexWrap: 'wrap' }}>
        {[['today','Today'],['month','Monthly report']].map(([id,label]) => (
          <button key={id} onClick={() => setView(id)} style={{ height: 34, padding: '0 14px', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', background: view===id?'var(--blue-50)':'var(--slate-0)', color: view===id?'var(--blue-700)':'var(--text-muted)', cursor: 'pointer', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', fontWeight: 'var(--fw-semibold)' }}>{label}</button>
        ))}
        {view === 'month' && <input type="month" value={month} onChange={e => setMonth(e.target.value)} style={{ ...FF.input, width: 160 }} />}
        <div style={{ flex: 1 }} />
        {canManage && view === 'today' && <button onClick={() => openManual(null, null)} style={{ display:'inline-flex', alignItems:'center', gap:6, height: 34, padding: '0 14px', background: 'var(--slate-100)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-md)', cursor: 'pointer', fontSize: 'var(--text-xs)', fontWeight: 'var(--fw-semibold)', fontFamily:'var(--font-sans)', color:'var(--text-body)' }}><Icon name="plus" size={14} /> Manual entry</button>}
      </div>

      {view === 'today' && (
        <Card padding="none">
          <div style={{ overflowX: 'auto' }} data-scroll-x>
            <table style={{ width: '100%', minWidth: 640, borderCollapse: 'collapse' }}>
              <thead><tr style={{ borderBottom: '1px solid var(--border-subtle)' }}>
                {['Employee','Check in','Check out','Late','Early leave','Break','Hours','Status',''].map((h,i)=>(<th key={i} style={{ textAlign: (i===3||i===4||i===5||i===6)?'right':'left', padding: '11px 14px', fontSize: 'var(--text-2xs)', fontWeight: 'var(--fw-bold)', textTransform: 'uppercase', letterSpacing:'0.05em', color: 'var(--text-subtle)', whiteSpace:'nowrap' }}>{h}</th>))}
              </tr></thead>
              <tbody>
                {loading && <tr><td colSpan={9} style={{ padding: 28, textAlign:'center', color:'var(--text-muted)', fontSize:'var(--text-sm)' }}>Loading…</td></tr>}
                {!loading && employees.length === 0 && <tr><td colSpan={7} style={{ padding: 36, textAlign:'center', color:'var(--text-muted)', fontSize:'var(--text-sm)' }}>No employees yet.</td></tr>}
                {!loading && employees.map(emp => {
                  const a = byEmp[emp.id];
                  return (
                    <tr key={emp.id} style={{ borderBottom: '1px solid var(--border-subtle)' }}>
                      <td style={{ padding: '10px 14px', fontSize: 'var(--text-sm)', fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)', whiteSpace:'nowrap' }}>{emp.name}{a?.is_late && <Badge tone="warning" size="sm" style={{ marginLeft: 8 }}>Late</Badge>}</td>
                      <td style={{ padding: '10px 14px', fontSize: 'var(--text-sm)', color: 'var(--text-body)' }}>{hhmm(a?.check_in)}</td>
                      <td style={{ padding: '10px 14px', fontSize: 'var(--text-sm)', color: 'var(--text-body)' }}>{hhmm(a?.check_out)}</td>
                      {/* Minutes against the employee's expected shift, not a bare late flag. */}
                      <td style={{ padding: '10px 14px', fontSize: 'var(--text-sm)', textAlign:'right', fontWeight: a?.late_minutes ? 'var(--fw-bold)' : 'var(--fw-regular)', color: a?.late_minutes ? 'var(--red-600)' : 'var(--text-subtle)' }}>{a?.late_minutes ? mins(a.late_minutes) : (a?.check_in ? 'On time' : '—')}</td>
                      <td style={{ padding: '10px 14px', fontSize: 'var(--text-sm)', textAlign:'right', fontWeight: a?.early_leave_minutes ? 'var(--fw-bold)' : 'var(--fw-regular)', color: a?.early_leave_minutes ? 'var(--amber-600)' : 'var(--text-subtle)' }}>{a?.early_leave_minutes ? mins(a.early_leave_minutes) : (a?.check_out ? 'Full day' : '—')}</td>
                      <td style={{ padding: '10px 14px', fontSize: 'var(--text-sm)', textAlign:'right', color: 'var(--text-muted)' }}>{a?.break_minutes ? a.break_minutes + 'm' : '—'}</td>
                      <td style={{ padding: '10px 14px', fontSize: 'var(--text-sm)', textAlign:'right', color: 'var(--text-body)' }}>{a?.worked_hours ? Number(a.worked_hours) + 'h' + (Number(a.overtime_hours) ? ' (+' + Number(a.overtime_hours) + ' OT)' : '') : '—'}</td>
                      <td style={{ padding: '10px 14px' }}>{a ? <Badge tone={a.status==='present'?'success':a.status==='on_break'?'warning':'neutral'} size="sm">{a.status==='on_break'?'on break':a.status}</Badge> : <span style={{ color: 'var(--text-subtle)', fontSize: 'var(--text-xs)' }}>Not marked</span>}</td>
                      <td style={{ padding: '10px 14px', textAlign:'right', whiteSpace:'nowrap' }}>
                        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
                          {canManage && (() => {
                            const onBreak = a && !a.check_out && Array.isArray(a.breaks) && a.breaks.some(b => b && b.in && !b.out);
                            const mkBtn = (label, bg, fn) => <button disabled={busy===emp.id} onClick={fn} style={{ height: 30, padding: '0 10px', background: bg, color: '#fff', border: 'none', borderRadius: 'var(--radius-sm)', cursor: 'pointer', fontSize: 'var(--text-xs)', fontWeight: 'var(--fw-semibold)', fontFamily:'var(--font-sans)' }}>{busy===emp.id?'…':label}</button>;
                            if (!a || !a.check_in) return mkBtn('Check in', 'var(--green-600)', ()=>checkIn(emp));
                            if (a.check_out) return <span style={{ color: 'var(--green-600)', fontSize: 'var(--text-xs)', fontWeight:'var(--fw-semibold)' }}>✓ Done</span>;
                            return <>
                              {onBreak ? mkBtn('End break', 'var(--amber-600)', ()=>breakOut(emp)) : mkBtn('Break', 'var(--amber-600)', ()=>breakIn(emp))}
                              {mkBtn('Check out', 'var(--blue-600)', ()=>checkOut(emp))}
                            </>;
                          })()}
                          {canManage && a && (
                            <>
                              <button onClick={()=>openManual(emp, a)} title="Edit" style={{ width: 28, height: 28, display:'inline-flex', alignItems:'center', justifyContent:'center', background:'transparent', border:'1px solid var(--border-subtle)', borderRadius:'var(--radius-sm)', cursor:'pointer', color:'var(--text-muted)' }}><Icon name="pencil" size={13} /></button>
                              <button onClick={()=>delAttendance(a)} title="Delete" style={{ width: 28, height: 28, display:'inline-flex', alignItems:'center', justifyContent:'center', background:'transparent', border:'1px solid var(--red-200)', borderRadius:'var(--radius-sm)', cursor:'pointer', color:'var(--red-600)' }}><Icon name="trash-2" size={13} /></button>
                            </>
                          )}
                        </div>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </Card>
      )}

      {view === 'month' && (
        <Card padding="none">
          <div style={{ overflowX: 'auto' }} data-scroll-x>
            <table style={{ width: '100%', minWidth: 640, borderCollapse: 'collapse' }}>
              <thead><tr style={{ borderBottom: '1px solid var(--border-subtle)' }}>
                {['Employee','Present','Absent','Leave','Late','Late mins','Early mins','Total hours','Overtime'].map((h,i)=>(<th key={i} style={{ textAlign: i===0?'left':'right', padding: '11px 14px', fontSize: 'var(--text-2xs)', fontWeight: 'var(--fw-bold)', textTransform: 'uppercase', letterSpacing:'0.05em', color: 'var(--text-subtle)', whiteSpace:'nowrap' }}>{h}</th>))}
              </tr></thead>
              <tbody>
                {loading && <tr><td colSpan={9} style={{ padding: 28, textAlign:'center', color:'var(--text-muted)', fontSize:'var(--text-sm)' }}>Loading…</td></tr>}
                {!loading && summary.length === 0 && <tr><td colSpan={9} style={{ padding: 36, textAlign:'center', color:'var(--text-muted)', fontSize:'var(--text-sm)' }}>No attendance recorded this month.</td></tr>}
                {!loading && summary.map(s => (
                  <tr key={s.employee_id} style={{ borderBottom: '1px solid var(--border-subtle)' }}>
                    <td style={{ padding: '10px 14px', fontSize: 'var(--text-sm)', fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)', whiteSpace:'nowrap' }}>{s.employee_name}</td>
                    <td style={{ padding: '10px 14px', fontSize: 'var(--text-sm)', textAlign:'right', color: 'var(--green-600)', fontWeight:'var(--fw-semibold)' }}>{s.present}</td>
                    <td style={{ padding: '10px 14px', fontSize: 'var(--text-sm)', textAlign:'right', color: 'var(--red-600)' }}>{s.absent}</td>
                    <td style={{ padding: '10px 14px', fontSize: 'var(--text-sm)', textAlign:'right', color: 'var(--text-body)' }}>{s.leave}</td>
                    <td style={{ padding: '10px 14px', fontSize: 'var(--text-sm)', textAlign:'right', color: 'var(--amber-600)' }}>{s.late}</td>
                    {/* Totals in minutes so payroll sees the size of the lateness, not just how often. */}
                    <td style={{ padding: '10px 14px', fontSize: 'var(--text-sm)', textAlign:'right', color: s.late_minutes ? 'var(--red-600)' : 'var(--text-subtle)', fontWeight: s.late_minutes ? 'var(--fw-semibold)' : 'var(--fw-regular)' }}>{s.late_minutes ? mins(s.late_minutes) : '—'}</td>
                    <td style={{ padding: '10px 14px', fontSize: 'var(--text-sm)', textAlign:'right', color: s.early_leave_minutes ? 'var(--amber-600)' : 'var(--text-subtle)', fontWeight: s.early_leave_minutes ? 'var(--fw-semibold)' : 'var(--fw-regular)' }}>{s.early_leave_minutes ? mins(s.early_leave_minutes) : '—'}</td>
                    <td style={{ padding: '10px 14px', fontSize: 'var(--text-sm)', textAlign:'right', fontWeight:'var(--fw-semibold)', color:'var(--text-strong)' }}>{Number(s.hours).toFixed(1)}h</td>
                    <td style={{ padding: '10px 14px', fontSize: 'var(--text-sm)', textAlign:'right', color: 'var(--blue-600)' }}>{Number(s.overtime).toFixed(1)}h</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </Card>
      )}

      {mForm && (
        <Modal open={modalOpen} onClose={()=>setModalOpen(false)} title={mForm.id ? 'Edit attendance' : 'Manual attendance'} onSubmit={saveManual} loading={mSaving} submitLabel={mForm.id ? 'Save changes' : 'Add'}>
          <FormRow label="Employee" required>
            <select style={FF.input} value={mForm.employee_id} onChange={e=>setM('employee_id', e.target.value)} disabled={!!mForm.id}>
              <option value="">— Select —</option>
              {employees.map(emp => <option key={emp.id} value={emp.id}>{emp.name}</option>)}
            </select>
          </FormRow>
          <FormRow label="Date" required><input type="date" style={FF.input} value={mForm.date} onChange={e=>setM('date', e.target.value)} /></FormRow>
          <div style={FF.row2}>
            <FormRow label="Check in"><input type="datetime-local" style={FF.input} value={mForm.check_in} onChange={e=>setM('check_in', e.target.value)} /></FormRow>
            <FormRow label="Check out"><input type="datetime-local" style={FF.input} value={mForm.check_out} onChange={e=>setM('check_out', e.target.value)} /></FormRow>
          </div>
          <div style={FF.row2}>
            <FormRow label="Break (minutes)"><input type="number" min="0" style={FF.input} value={mForm.break_minutes} onChange={e=>setM('break_minutes', e.target.value)} placeholder="0" /></FormRow>
            <FormRow label="Status">
              <select style={FF.input} value={mForm.status} onChange={e=>setM('status', e.target.value)}>
                <option value="present">Present</option><option value="absent">Absent</option><option value="leave">Leave</option><option value="half_day">Half day</option>
              </select>
            </FormRow>
          </div>
          <div style={{ fontSize: 'var(--text-2xs)', color: 'var(--text-muted)' }}>Hours &amp; overtime are auto-calculated from check-in/out minus break.</div>
        </Modal>
      )}
    </div>
  );
}

// ── Leave tab ────────────────────────────────────────────────────────────────
const LEAVE_TYPES = [['annual','Annual'],['sick','Sick'],['casual','Casual'],['unpaid','Unpaid']];
const LEAVE_TYPE_LABEL = Object.fromEntries(LEAVE_TYPES);
function fmtD(d) { if (!d) return '—'; const dt = new Date(String(d).replace(' ','T')); return isNaN(dt) ? '—' : dt.toLocaleDateString('en-GB',{day:'2-digit',month:'short'}); }
const LV_EMPTY = { employee_id: '', type: 'annual', from_date: '', to_date: '', reason: '' };

function LeaveTab({ employees, canManage }) {
  const [view, setView] = React.useState('requests'); // 'requests' | 'balances'
  const [requests, setRequests] = React.useState([]);
  const [balances, setBalances] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [modalOpen, setModalOpen] = React.useState(false);
  const [form, setForm] = React.useState(LV_EMPTY);
  const [saving, setSaving] = React.useState(false);

  const load = React.useCallback(() => {
    if (!window.API) { setLoading(false); return; }
    setLoading(true);
    if (view === 'requests') window.API.getLeave().then(r => { if (r.data) setRequests(r.data); }).catch(()=>{}).finally(()=>setLoading(false));
    else window.API.getLeaveBalances().then(r => { if (r.data) setBalances(r.data); }).catch(()=>{}).finally(()=>setLoading(false));
  }, [view]);
  React.useEffect(() => { load(); }, [load]);

  function set(k,v){ setForm(f=>({ ...f, [k]:v })); }
  function openApply(){ setForm(LV_EMPTY); setModalOpen(true); }

  async function apply() {
    if (!form.employee_id || !form.from_date || !form.to_date || !window.API) return;
    setSaving(true);
    try { const { data } = await window.API.applyLeave(form); if (data) setRequests(prev => [data, ...prev]); setModalOpen(false); }
    catch(e){ alert('Could not submit leave. Check the dates.'); }
    setSaving(false);
  }
  async function review(lv, status) {
    setRequests(prev => prev.map(x => x.id===lv.id ? { ...x, status } : x));
    try { await window.API.reviewLeave(lv.id, { status }); } catch { load(); }
  }
  async function remove(lv) {
    if (!window.confirm('Delete this leave request?')) return;
    setRequests(prev => prev.filter(x => x.id !== lv.id));
    try { await window.API.deleteLeave(lv.id); } catch {}
  }

  const pending = requests.filter(r => r.status === 'pending').length;

  return (
    <div>
      <div style={{ display: 'flex', gap: 8, marginBottom: 14, alignItems: 'center', flexWrap: 'wrap' }}>
        {[['requests', 'Requests' + (pending?` (${pending})`:'')],['balances','Balances']].map(([id,label]) => (
          <button key={id} onClick={()=>setView(id)} style={{ height: 34, padding: '0 14px', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', background: view===id?'var(--blue-50)':'var(--slate-0)', color: view===id?'var(--blue-700)':'var(--text-muted)', cursor: 'pointer', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', fontWeight: 'var(--fw-semibold)' }}>{label}</button>
        ))}
        <div style={{ flex: 1 }} />
        {canManage && <button onClick={openApply} style={{ display: 'inline-flex', alignItems: 'center', gap: 7, height: 38, padding: '0 16px', background: 'var(--blue-600)', color: '#fff', border: 'none', borderRadius: 'var(--radius-md)', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', fontWeight: 'var(--fw-semibold)', cursor: 'pointer' }}><Icon name="plus" size={15} /> Apply leave</button>}
      </div>

      {view === 'requests' && (
        <Card padding="none">
          <div style={{ overflowX: 'auto' }} data-scroll-x>
            <table style={{ width: '100%', minWidth: 720, borderCollapse: 'collapse' }}>
              <thead><tr style={{ borderBottom: '1px solid var(--border-subtle)' }}>
                {['Employee','Type','From','To','Days','Reason','Status',''].map((h,i)=>(<th key={i} style={{ textAlign: i===4?'right':'left', padding: '11px 14px', fontSize: 'var(--text-2xs)', fontWeight: 'var(--fw-bold)', textTransform: 'uppercase', letterSpacing:'0.05em', color: 'var(--text-subtle)', whiteSpace:'nowrap' }}>{h}</th>))}
              </tr></thead>
              <tbody>
                {loading && <tr><td colSpan={8} style={{ padding: 28, textAlign:'center', color:'var(--text-muted)', fontSize:'var(--text-sm)' }}>Loading…</td></tr>}
                {!loading && requests.length===0 && <tr><td colSpan={8} style={{ padding: 36, textAlign:'center', color:'var(--text-muted)', fontSize:'var(--text-sm)' }}>No leave requests yet.</td></tr>}
                {!loading && requests.map(lv => (
                  <tr key={lv.id} style={{ borderBottom: '1px solid var(--border-subtle)' }}>
                    <td style={{ padding: '10px 14px', fontSize: 'var(--text-sm)', fontWeight:'var(--fw-semibold)', color: 'var(--text-strong)', whiteSpace:'nowrap' }}>{lv.employee_name}</td>
                    <td style={{ padding: '10px 14px', fontSize: 'var(--text-sm)', color: 'var(--text-body)' }}>{LEAVE_TYPE_LABEL[lv.type]||lv.type}</td>
                    <td style={{ padding: '10px 14px', fontSize: 'var(--text-sm)', color: 'var(--text-body)', whiteSpace:'nowrap' }}>{fmtD(lv.from_date)}</td>
                    <td style={{ padding: '10px 14px', fontSize: 'var(--text-sm)', color: 'var(--text-body)', whiteSpace:'nowrap' }}>{fmtD(lv.to_date)}</td>
                    <td style={{ padding: '10px 14px', fontSize: 'var(--text-sm)', textAlign:'right', color: 'var(--text-body)' }}>{lv.days}</td>
                    <td style={{ padding: '10px 14px', fontSize: 'var(--text-xs)', color: 'var(--text-muted)', maxWidth: 180, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }} title={lv.reason}>{lv.reason || '—'}</td>
                    <td style={{ padding: '10px 14px' }}><Badge tone={lv.status==='approved'?'success':lv.status==='rejected'?'danger':'warning'} size="sm">{lv.status}</Badge></td>
                    <td style={{ padding: '10px 14px', textAlign:'right', whiteSpace:'nowrap' }}>
                      {canManage && lv.status==='pending' && (
                        <div style={{ display:'inline-flex', gap:4 }}>
                          <button onClick={()=>review(lv,'approved')} title="Approve" style={{ height: 28, padding: '0 10px', background: 'var(--green-600)', color:'#fff', border:'none', borderRadius:'var(--radius-sm)', cursor:'pointer', fontSize:'var(--text-xs)', fontWeight:'var(--fw-semibold)', fontFamily:'var(--font-sans)' }}>Approve</button>
                          <button onClick={()=>review(lv,'rejected')} title="Reject" style={{ height: 28, padding: '0 10px', background: 'transparent', color:'var(--red-600)', border:'1px solid var(--red-200)', borderRadius:'var(--radius-sm)', cursor:'pointer', fontSize:'var(--text-xs)', fontWeight:'var(--fw-semibold)', fontFamily:'var(--font-sans)' }}>Reject</button>
                        </div>
                      )}
                      {canManage && lv.status!=='pending' && <button onClick={()=>remove(lv)} title="Delete" style={{ width: 28, height: 28, display:'inline-flex', alignItems:'center', justifyContent:'center', background:'transparent', border:'1px solid var(--red-200)', borderRadius:'var(--radius-sm)', cursor:'pointer', color:'var(--red-600)' }}><Icon name="trash-2" size={13} /></button>}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </Card>
      )}

      {view === 'balances' && (
        <Card padding="none">
          <div style={{ overflowX: 'auto' }} data-scroll-x>
            <table style={{ width: '100%', minWidth: 560, borderCollapse: 'collapse' }}>
              <thead><tr style={{ borderBottom: '1px solid var(--border-subtle)' }}>
                {['Employee','Type','Quota','Used','Remaining'].map((h,i)=>(<th key={i} style={{ textAlign: i>=2?'right':'left', padding: '11px 14px', fontSize: 'var(--text-2xs)', fontWeight: 'var(--fw-bold)', textTransform: 'uppercase', letterSpacing:'0.05em', color: 'var(--text-subtle)', whiteSpace:'nowrap' }}>{h}</th>))}
              </tr></thead>
              <tbody>
                {loading && <tr><td colSpan={5} style={{ padding: 28, textAlign:'center', color:'var(--text-muted)', fontSize:'var(--text-sm)' }}>Loading…</td></tr>}
                {!loading && balances.length===0 && <tr><td colSpan={5} style={{ padding: 36, textAlign:'center', color:'var(--text-muted)', fontSize:'var(--text-sm)' }}>No employees yet.</td></tr>}
                {!loading && balances.map((b,i) => (
                  <tr key={b.employee_id+b.type} style={{ borderBottom: '1px solid var(--border-subtle)' }}>
                    <td style={{ padding: '9px 14px', fontSize: 'var(--text-sm)', fontWeight:'var(--fw-semibold)', color: 'var(--text-strong)', whiteSpace:'nowrap' }}>{b.employee_name}</td>
                    <td style={{ padding: '9px 14px', fontSize: 'var(--text-sm)', color: 'var(--text-body)' }}>{LEAVE_TYPE_LABEL[b.type]||b.type}</td>
                    <td style={{ padding: '9px 14px', fontSize: 'var(--text-sm)', textAlign:'right', color: 'var(--text-body)' }}>{b.quota}</td>
                    <td style={{ padding: '9px 14px', fontSize: 'var(--text-sm)', textAlign:'right', color: 'var(--amber-600)' }}>{b.used}</td>
                    <td style={{ padding: '9px 14px', fontSize: 'var(--text-sm)', textAlign:'right', fontWeight:'var(--fw-bold)', color: b.remaining>0?'var(--green-600)':'var(--red-600)' }}>{b.remaining}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </Card>
      )}

      <Modal open={modalOpen} onClose={()=>setModalOpen(false)} title="Apply for leave" onSubmit={apply} loading={saving} submitLabel="Submit">
        <div style={FF.row2}>
          <FormRow label="Employee" required>
            <select style={FF.input} value={form.employee_id} onChange={e=>set('employee_id', e.target.value)}>
              <option value="">— Select —</option>
              {employees.map(emp => <option key={emp.id} value={emp.id}>{emp.name}</option>)}
            </select>
          </FormRow>
          <FormRow label="Type" required>
            <select style={FF.input} value={form.type} onChange={e=>set('type', e.target.value)}>
              {LEAVE_TYPES.map(([v,l]) => <option key={v} value={v}>{l}</option>)}
            </select>
          </FormRow>
        </div>
        <div style={FF.row2}>
          <FormRow label="From" required><input type="date" style={FF.input} value={form.from_date} onChange={e=>set('from_date', e.target.value)} /></FormRow>
          <FormRow label="To" required><input type="date" style={FF.input} value={form.to_date} onChange={e=>set('to_date', e.target.value)} /></FormRow>
        </div>
        <FormRow label="Reason"><textarea style={{ ...FF.input, minHeight: 60, resize: 'vertical' }} value={form.reason} onChange={e=>set('reason', e.target.value)} placeholder="Optional" /></FormRow>
      </Modal>
    </div>
  );
}

// ── Output tab — daily deliverable tracking for task-based members ───────────
const OUTPUT_UNITS = [['posts','Posts'],['videos','Videos'],['designs','Designs'],['reels','Reels'],['tasks','Tasks']];
// Date helpers for the Output report presets (all local-date YYYY-MM-DD).
function isoDate(d) { return d.getFullYear() + '-' + String(d.getMonth()+1).padStart(2,'0') + '-' + String(d.getDate()).padStart(2,'0'); }
function rangeFor(preset) {
  const now = new Date(); const end = isoDate(now); let start = new Date(now);
  if (preset === 'week')      start.setDate(now.getDate() - 6);
  else if (preset === 'month') start = new Date(now.getFullYear(), now.getMonth(), 1);
  else if (preset === '6month') start.setMonth(now.getMonth() - 6);
  else if (preset === 'year')  start = new Date(now.getFullYear(), 0, 1);
  return { from: isoDate(start), to: end };
}

function OutputTab({ employees, canManage }) {
  const [view, setView] = React.useState('daily'); // 'daily' | 'report'
  const [date, setDate] = React.useState(todayStr());
  const [rows, setRows] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [draft, setDraft] = React.useState({}); // employee_id -> {unit,target,done}
  const [savingId, setSavingId] = React.useState(null);
  // Report state
  const [preset, setPreset] = React.useState('month');
  const [range, setRange] = React.useState(rangeFor('month'));
  const [repRows, setRepRows] = React.useState([]);
  const [repLoading, setRepLoading] = React.useState(false);
  // Zain's ask: "kis din kitna output dia" — the per-person totals alone could
  // not answer that, so the report also has a day-by-day mode.
  const [repMode, setRepMode] = React.useState('day'); // 'day' | 'person'
  const [repEmp, setRepEmp] = React.useState('');      // '' = everyone

  const load = React.useCallback(() => {
    if (!window.API || !window.API.getWorkOutputs) { setLoading(false); return; }
    setLoading(true);
    window.API.getWorkOutputs({ date }).then(r => { if (r.data) setRows(r.data); }).catch(()=>{}).finally(()=>setLoading(false));
  }, [date]);
  React.useEffect(() => { if (view === 'daily') { load(); setDraft({}); } }, [load, view]);

  // Load the report whenever the range changes (in report view).
  React.useEffect(() => {
    if (view !== 'report' || !window.API || !window.API.getWorkOutputs) return;
    setRepLoading(true);
    window.API.getWorkOutputs({ from: range.from, to: range.to }).then(r => { if (r.data) setRepRows(r.data); }).catch(()=>{}).finally(()=>setRepLoading(false));
  }, [view, range.from, range.to]);

  function applyPreset(p) { setPreset(p); if (p !== 'custom') setRange(rangeFor(p)); }

  // Aggregate report rows per employee: total target, total done, entries, %.
  const report = React.useMemo(() => {
    const map = {};
    repRows.forEach(r => {
      const k = r.employee_id;
      if (!map[k]) map[k] = { name: r.employee_name || (employees.find(e=>e.id===k)||{}).name || 'Employee', target: 0, done: 0, days: 0 };
      map[k].target += Number(r.target)||0; map[k].done += Number(r.done)||0; map[k].days += 1;
    });
    return Object.values(map).sort((a,b)=> b.done - a.done);
  }, [repRows, employees]);

  // Day-by-day rows for the report: one line per date (per employee), newest
  // first, so a month of entries can actually be read back.
  const byDay = React.useMemo(() => {
    return repRows
      .filter(r => !repEmp || r.employee_id === repEmp)
      .slice()
      .sort((a, b) => String(b.date).localeCompare(String(a.date)) || String(a.employee_name||'').localeCompare(String(b.employee_name||'')));
  }, [repRows, repEmp]);

  const byEmp = {}; rows.forEach(r => { byEmp[r.employee_id] = r; });

  // Is this employee expected to deliver on the selected date? output_work_days
  // is a CSV of ISO weekday numbers (Mon=1 … Sun=7); blank means every day.
  function worksOn(emp, iso) {
    const days = String(emp.output_work_days || '').split(',').filter(Boolean);
    if (!days.length) return true;
    const d = new Date(iso + 'T00:00:00').getDay(); // 0=Sun
    return days.includes(String(d === 0 ? 7 : d));
  }

  // Value precedence: what the user is typing → what is already saved for this
  // date → the employee's recurring default → the bare fallback. The default is
  // only ever a PRE-FILL: it is shown so a fixed daily target need not be
  // retyped, and any single day can still be edited to something else.
  function field(emp, key, fallback) {
    const d = draft[emp.id]; if (d && d[key] !== undefined) return d[key];
    const r = byEmp[emp.id];
    if (r && r[key] !== undefined && r[key] !== null) return r[key];
    if (!r) {
      if (key === 'unit'   && emp.default_output_unit)   return emp.default_output_unit;
      if (key === 'target' && emp.default_output_target != null && worksOn(emp, date)) return emp.default_output_target;
    }
    return r ? r[key] : fallback;
  }
  // A row already stored for this date — used to show "Saved" instead of
  // silently overwriting it (the old behaviour hid that a row existed at all).
  function savedRow(emp) { return byEmp[emp.id]; }
  function setField(emp, key, val) { setDraft(prev => ({ ...prev, [emp.id]: { ...prev[emp.id], [key]: val } })); }

  async function save(emp) {
    setSavingId(emp.id);
    const payload = { employee_id: emp.id, date, unit: field(emp,'unit','posts'), target: Number(field(emp,'target',0))||0, done: Number(field(emp,'done',0))||0 };
    try { const { data } = await window.API.saveWorkOutput(payload); if (data) { setRows(prev => [...prev.filter(x=>x.id!==data.id && !(x.employee_id===emp.id && x.unit===data.unit)), data]); setDraft(prev => { const n={...prev}; delete n[emp.id]; return n; }); } }
    catch { alert('Could not save output.'); }
    setSavingId(null);
  }

  const PRESETS = [['week','This week'],['month','This month'],['6month','Last 6 months'],['year','This year'],['custom','Custom']];

  return (
    <div>
      {/* Daily entry vs Report toggle */}
      <div style={{ display: 'inline-flex', gap: 4, marginBottom: 14, background: 'var(--slate-100)', padding: 3, borderRadius: 'var(--radius-md)' }}>
        {[['daily','Daily entry'],['report','Report']].map(([id,label]) => (
          <button key={id} onClick={() => setView(id)} style={{ height: 30, padding: '0 14px', border: 'none', borderRadius: 'var(--radius-sm)', cursor: 'pointer', fontSize: 'var(--text-xs)', fontWeight: 'var(--fw-semibold)', fontFamily: 'var(--font-sans)', background: view===id?'#fff':'transparent', color: view===id?'var(--blue-700)':'var(--text-muted)', boxShadow: view===id?'var(--shadow-sm)':'none' }}>{label}</button>
        ))}
      </div>

      {view === 'report' ? (
        <div>
          <div style={{ display: 'flex', gap: 8, marginBottom: 12, alignItems: 'center', flexWrap: 'wrap' }}>
            {PRESETS.map(([id,label]) => (
              <button key={id} onClick={() => applyPreset(id)} style={{ height: 32, padding: '0 12px', border: `1px solid ${preset===id?'var(--blue-600)':'var(--border-default)'}`, background: preset===id?'var(--blue-50)':'var(--slate-0)', color: preset===id?'var(--blue-700)':'var(--text-body)', borderRadius: 'var(--radius-md)', cursor: 'pointer', fontSize: 'var(--text-xs)', fontWeight: 'var(--fw-semibold)', fontFamily: 'var(--font-sans)' }}>{label}</button>
            ))}
          </div>
          {preset === 'custom' && (
            <div style={{ display: 'flex', gap: 10, marginBottom: 12, alignItems: 'center', flexWrap: 'wrap' }}>
              <label style={{ fontSize: 'var(--text-xs)', color: 'var(--text-muted)' }}>From <input type="date" value={range.from} onChange={e=>setRange(r=>({...r, from:e.target.value}))} style={{ ...FF.input, width: 160, height: 32, marginLeft: 6 }} /></label>
              <label style={{ fontSize: 'var(--text-xs)', color: 'var(--text-muted)' }}>To <input type="date" value={range.to} onChange={e=>setRange(r=>({...r, to:e.target.value}))} style={{ ...FF.input, width: 160, height: 32, marginLeft: 6 }} /></label>
            </div>
          )}
          {/* By day vs By person. "By day" answers "kis din kitna output dia". */}
          <div style={{ display: 'flex', gap: 10, marginBottom: 12, alignItems: 'center', flexWrap: 'wrap' }}>
            <div style={{ display: 'inline-flex', gap: 4, background: 'var(--slate-100)', padding: 3, borderRadius: 'var(--radius-md)' }}>
              {[['day','By day'],['person','By person']].map(([id,label]) => (
                <button key={id} onClick={() => setRepMode(id)} style={{ height: 28, padding: '0 12px', border: 'none', borderRadius: 'var(--radius-sm)', cursor: 'pointer', fontSize: 'var(--text-xs)', fontWeight: 'var(--fw-semibold)', fontFamily: 'var(--font-sans)', background: repMode===id?'#fff':'transparent', color: repMode===id?'var(--blue-700)':'var(--text-muted)', boxShadow: repMode===id?'var(--shadow-sm)':'none' }}>{label}</button>
              ))}
            </div>
            <select value={repEmp} onChange={e => setRepEmp(e.target.value)} style={{ ...FF.input, height: 32, width: 200 }}>
              <option value="">All employees</option>
              {employees.map(e => <option key={e.id} value={e.id}>{e.name}</option>)}
            </select>
          </div>
          <div style={{ fontSize: 'var(--text-xs)', color: 'var(--text-muted)', marginBottom: 10 }}>Showing {range.from} → {range.to}</div>
          {repMode === 'day' ? (
          <Card padding="none">
            <div style={{ overflowX: 'auto' }} data-scroll-x>
              <table style={{ width: '100%', minWidth: 620, borderCollapse: 'collapse' }}>
                <thead><tr style={{ borderBottom: '1px solid var(--border-subtle)' }}>
                  {['Date','Employee','Unit','Target','Done','Achieved'].map((h,i)=>(<th key={i} style={{ textAlign: (i>=3)?'right':'left', padding: '11px 14px', fontSize: 'var(--text-2xs)', fontWeight: 'var(--fw-bold)', textTransform: 'uppercase', letterSpacing:'0.05em', color: 'var(--text-subtle)', whiteSpace:'nowrap' }}>{h}</th>))}
                </tr></thead>
                <tbody>
                  {repLoading && <tr><td colSpan={6} style={{ padding: 28, textAlign:'center', color:'var(--text-muted)', fontSize:'var(--text-sm)' }}>Loading…</td></tr>}
                  {!repLoading && byDay.length===0 && <tr><td colSpan={6} style={{ padding: 36, textAlign:'center', color:'var(--text-muted)', fontSize:'var(--text-sm)' }}>No output recorded in this period.</td></tr>}
                  {!repLoading && byDay.map(r => {
                    const t = Number(r.target)||0, dn = Number(r.done)||0;
                    const pct = t>0 ? Math.round(dn/t*100) : 0;
                    const tone = pct>=100?'var(--green-600)':pct>=50?'var(--amber-600)':'var(--red-600)';
                    const dt = new Date(String(r.date).slice(0,10) + 'T00:00:00');
                    return (
                      <tr key={r.id} style={{ borderBottom: '1px solid var(--border-subtle)' }}>
                        <td style={{ padding: '11px 14px', fontSize: 'var(--text-sm)', color:'var(--text-body)', whiteSpace:'nowrap' }}>
                          {dt.toLocaleDateString('en-GB', { day:'2-digit', month:'short' })}
                          <span style={{ color:'var(--text-subtle)', fontSize:'var(--text-2xs)', marginLeft:6 }}>{dt.toLocaleDateString('en-GB',{weekday:'short'})}</span>
                        </td>
                        <td style={{ padding: '11px 14px', fontSize: 'var(--text-sm)', fontWeight:'var(--fw-semibold)', color:'var(--text-strong)', whiteSpace:'nowrap' }}>{r.employee_name || '—'}</td>
                        <td style={{ padding: '11px 14px', fontSize: 'var(--text-sm)', color:'var(--text-muted)', whiteSpace:'nowrap' }}>{(OUTPUT_UNITS.find(u=>u[0]===r.unit)||[null,r.unit||'—'])[1]}</td>
                        <td style={{ padding: '11px 14px', textAlign:'right', fontSize:'var(--text-sm)', color:'var(--text-body)' }}>{t}</td>
                        <td style={{ padding: '11px 14px', textAlign:'right', fontSize:'var(--text-sm)', fontWeight:'var(--fw-bold)', color:'var(--text-strong)' }}>{dn}</td>
                        <td style={{ padding: '11px 14px', textAlign:'right', fontSize:'var(--text-sm)', fontWeight:'var(--fw-bold)', color: tone }}>{pct}%</td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          </Card>
          ) : (
          <Card padding="none">
            <div style={{ overflowX: 'auto' }} data-scroll-x>
              <table style={{ width: '100%', minWidth: 560, borderCollapse: 'collapse' }}>
                <thead><tr style={{ borderBottom: '1px solid var(--border-subtle)' }}>
                  {['Employee','Days','Target','Done','Achieved'].map((h,i)=>(<th key={i} style={{ textAlign: i===0?'left':'right', padding: '11px 14px', fontSize: 'var(--text-2xs)', fontWeight: 'var(--fw-bold)', textTransform: 'uppercase', letterSpacing:'0.05em', color: 'var(--text-subtle)', whiteSpace:'nowrap' }}>{h}</th>))}
                </tr></thead>
                <tbody>
                  {repLoading && <tr><td colSpan={5} style={{ padding: 28, textAlign:'center', color:'var(--text-muted)', fontSize:'var(--text-sm)' }}>Loading…</td></tr>}
                  {!repLoading && report.length===0 && <tr><td colSpan={5} style={{ padding: 36, textAlign:'center', color:'var(--text-muted)', fontSize:'var(--text-sm)' }}>No output recorded in this period.</td></tr>}
                  {!repLoading && report.map((r,i) => {
                    const pct = r.target>0 ? Math.round(r.done/r.target*100) : 0;
                    const tone = pct>=100?'var(--green-600)':pct>=50?'var(--amber-600)':'var(--red-600)';
                    return (
                      <tr key={i} style={{ borderBottom: '1px solid var(--border-subtle)' }}>
                        <td style={{ padding: '11px 14px', fontSize: 'var(--text-sm)', fontWeight:'var(--fw-semibold)', color:'var(--text-strong)', whiteSpace:'nowrap' }}>{r.name}</td>
                        <td style={{ padding: '11px 14px', textAlign:'right', fontSize:'var(--text-sm)', color:'var(--text-muted)' }}>{r.days}</td>
                        <td style={{ padding: '11px 14px', textAlign:'right', fontSize:'var(--text-sm)', color:'var(--text-body)' }}>{r.target}</td>
                        <td style={{ padding: '11px 14px', textAlign:'right', fontSize:'var(--text-sm)', fontWeight:'var(--fw-bold)', color:'var(--text-strong)' }}>{r.done}</td>
                        <td style={{ padding: '11px 14px', textAlign:'right', fontSize:'var(--text-sm)', fontWeight:'var(--fw-bold)', color: tone }}>{pct}%</td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          </Card>
          )}
        </div>
      ) : (
      <div>
      <div style={{ display: 'flex', gap: 10, marginBottom: 14, alignItems: 'center', flexWrap: 'wrap' }}>
        <input type="date" value={date} onChange={e => setDate(e.target.value)} style={{ ...FF.input, width: 170 }} />
        <span style={{ fontSize: 'var(--text-xs)', color: 'var(--text-muted)' }}>Set each task-based member's daily target &amp; how many they delivered.</span>
      </div>
      <Card padding="none">
        <div style={{ overflowX: 'auto' }} data-scroll-x>
          <table style={{ width: '100%', minWidth: 640, borderCollapse: 'collapse' }}>
            <thead><tr style={{ borderBottom: '1px solid var(--border-subtle)' }}>
              {['Employee','Unit','Target','Done','Progress',''].map((h,i)=>(<th key={i} style={{ textAlign: (i===2||i===3)?'right':'left', padding: '11px 14px', fontSize: 'var(--text-2xs)', fontWeight: 'var(--fw-bold)', textTransform: 'uppercase', letterSpacing:'0.05em', color: 'var(--text-subtle)', whiteSpace:'nowrap' }}>{h}</th>))}
            </tr></thead>
            <tbody>
              {loading && <tr><td colSpan={6} style={{ padding: 28, textAlign:'center', color:'var(--text-muted)', fontSize:'var(--text-sm)' }}>Loading…</td></tr>}
              {!loading && employees.length===0 && <tr><td colSpan={6} style={{ padding: 36, textAlign:'center', color:'var(--text-muted)', fontSize:'var(--text-sm)' }}>No employees yet.</td></tr>}
              {!loading && employees.map(emp => {
                const target = Number(field(emp,'target',0))||0, done = Number(field(emp,'done',0))||0;
                const pct = target > 0 ? Math.min(100, Math.round(done/target*100)) : 0;
                const dirty = !!draft[emp.id];
                const saved = savedRow(emp);
                const prefilled = !saved && emp.default_output_target != null && worksOn(emp, date);
                const tone = pct>=100?'var(--green-600)':pct>=50?'var(--amber-600)':'var(--red-600)';
                return (
                  <tr key={emp.id} style={{ borderBottom: '1px solid var(--border-subtle)' }}>
                    <td style={{ padding: '10px 14px', fontSize: 'var(--text-sm)', fontWeight:'var(--fw-semibold)', color: 'var(--text-strong)', whiteSpace:'nowrap' }}>
                      {emp.name}
                      {/* Make an existing entry visible. Saving used to silently
                          overwrite the stored row with no sign it was ever there. */}
                      {saved
                        ? <span title={`Saved: ${saved.done}/${saved.target} ${saved.unit||''}`} style={{ marginLeft: 8, fontSize:'var(--text-2xs)', fontWeight:'var(--fw-bold)', color:'var(--green-700)', background:'var(--green-50)', border:'1px solid var(--green-200)', borderRadius: 999, padding:'1px 7px' }}>Saved</span>
                        : prefilled
                          ? <span title="Yeh iska rozana ka default target hai — chaho to badal lo" style={{ marginLeft: 8, fontSize:'var(--text-2xs)', fontWeight:'var(--fw-semibold)', color:'var(--text-muted)', background:'var(--slate-100)', borderRadius: 999, padding:'1px 7px' }}>Default</span>
                          : null}
                    </td>
                    <td style={{ padding: '8px 14px' }}>
                      <select disabled={!canManage} value={field(emp,'unit','posts')} onChange={e=>setField(emp,'unit',e.target.value)} style={{ ...FF.input, height: 32, width: 110 }}>
                        {OUTPUT_UNITS.map(([v,l])=><option key={v} value={v}>{l}</option>)}
                      </select>
                    </td>
                    <td style={{ padding: '8px 14px', textAlign:'right' }}><input type="number" min="0" disabled={!canManage} value={field(emp,'target',0)} onChange={e=>setField(emp,'target',e.target.value)} style={{ ...FF.input, height: 32, width: 70, textAlign:'right' }} /></td>
                    <td style={{ padding: '8px 14px', textAlign:'right' }}><input type="number" min="0" disabled={!canManage} value={field(emp,'done',0)} onChange={e=>setField(emp,'done',e.target.value)} style={{ ...FF.input, height: 32, width: 70, textAlign:'right' }} /></td>
                    <td style={{ padding: '10px 14px', minWidth: 120 }}>
                      <div style={{ display:'flex', alignItems:'center', gap:8 }}>
                        <div style={{ flex:1, height:6, background:'var(--slate-100)', borderRadius:3, overflow:'hidden' }}><div style={{ height:'100%', width:pct+'%', background:tone, borderRadius:3 }} /></div>
                        <span style={{ fontSize:'var(--text-xs)', fontWeight:'var(--fw-bold)', color:tone }}>{done}/{target}</span>
                      </div>
                    </td>
                    <td style={{ padding: '10px 14px', textAlign:'right', whiteSpace:'nowrap' }}>
                      {canManage && <button disabled={!dirty || savingId===emp.id} onClick={()=>save(emp)} style={{ height: 30, padding: '0 12px', background: dirty?'var(--blue-600)':'var(--slate-200)', color:'#fff', border:'none', borderRadius:'var(--radius-sm)', cursor: dirty?'pointer':'default', fontSize:'var(--text-xs)', fontWeight:'var(--fw-semibold)', fontFamily:'var(--font-sans)' }}>{savingId===emp.id?'…':(saved?'Update':'Save')}</button>}
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </Card>
      </div>
      )}
    </div>
  );
}

Object.assign(window, { Employees });
})();