// role-accounting.jsx — Accounting hub. Tabs into: Timecard review (2nd-step
// approval), Multi-state tax, Railroad Retirement, Payroll integrations.

function RoleAccounting() {  const [tab, setTab] = useState('review');
  const { timecards, setPayrollWizard, rrbEnabled } = useAdmin();
  const pendingAcct = timecards.filter(t => t.status === 'pending-acct').length;

  const tabs = [
    { id: 'review',       label: 'Timecard review', icon: <IconClipboard size={14} />, badge: pendingAcct },
    { id: 'tax',          label: 'Multi-state tax',  icon: <IconTax size={14} /> },
    ...(rrbEnabled ? [{ id: 'rrb', label: 'Railroad Retirement', icon: <IconRRB size={14} /> }] : []),
    { id: 'billing',      label: 'Client billing',   icon: <IconDollar size={14} /> },
    { id: 'integrations', label: 'Payroll & exports', icon: <IconPlug size={14} /> },
  ];

  return (
    <>
      <PageHeader
        eyebrow="ACCOUNTING & PAYROLL"
        title="Pay period 05-18 → 05-31"
        subtitle="Second-step approver. Multi-state allocation, RRTA, and export to any payroll platform."
        right={
          <>
            <Button variant="secondary" size="md" icon={<IconDownload size={14} />}>Period summary</Button>
            <Button variant="primary" size="md" icon={<IconUpload size={14} />} onClick={() => setPayrollWizard(true)}>Run payroll</Button>
          </>
        }
      />
      <div style={{ padding: '14px 32px 0', borderBottom: '1px solid var(--line)', background: 'var(--panel)', display: 'flex', gap: 4 }}>
        {tabs.map(t => {
          const on = tab === t.id;
          return (
            <button key={t.id} onClick={() => setTab(t.id)} style={{
              padding: '10px 14px', background: 'transparent', border: 'none',
              borderBottom: on ? '2px solid var(--accent)' : '2px solid transparent',
              marginBottom: -1, display: 'inline-flex', alignItems: 'center', gap: 7,
              color: on ? 'var(--text)' : 'var(--muted)',
              fontWeight: on ? 600 : 500, fontSize: 13.5,
            }}>
              {t.icon}{t.label}
              {t.badge > 0 && (
                <span style={{
                  background: 'var(--accent)', color: '#fff',
                  fontSize: 10.5, fontWeight: 700, fontFamily: 'var(--font-mono)',
                  padding: '0 6px', borderRadius: 8, marginLeft: 2,
                }}>{t.badge}</span>
              )}
            </button>
          );
        })}
      </div>
      <PageBody>
        {tab === 'review'       && <TimecardReview />}
        {tab === 'tax'          && <TaxView />}
        {tab === 'rrb'          && <RRBView />}
        {tab === 'billing'      && <BillingView />}
        {tab === 'integrations' && <IntegrationsView />}
      </PageBody>
    </>
  );
}

Object.assign(window, { RoleAccounting });