// doc-templates.jsx — Printable document templates (React). Rendered inside
// <DocViewer>. Formal IRS/RRB-style layouts for tax forms; branded layouts
// for pay stub / operational records. Depends on D_money/D_num/D_date from
// shared-docs.jsx.

// ── Shared bits ──────────────────────────────────────────────
const DocHeader = ({ company, title, sub, right }) => (
  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', padding: '24px 28px 16px', borderBottom: '2px solid #111' }}>
    <div>
      <div style={{ fontWeight: 800, fontSize: 20, letterSpacing: -0.4 }}>{company || 'RailFlagsPro'}</div>
      <div style={{ fontSize: 11, color: '#555', marginTop: 2 }}>RWIC Field Operations · 1200 Rail Yard Rd, Bozeman MT 59715 · EIN 84-2207715</div>
    </div>
    <div style={{ textAlign: 'right' }}>
      <div style={{ fontSize: 9, letterSpacing: 1.5, textTransform: 'uppercase', color: '#888', fontWeight: 700 }}>{title}</div>
      {right}
    </div>
  </div>
);

const Box = ({ label, children, style, w }) => (
  <div className="rfp-form-box" style={{ flex: w || 1, ...style }}>
    <div className="rfp-form-label">{label}</div>
    <div className="rfp-form-val rfp-doc-mono">{children}</div>
  </div>
);

// ── 1) PAY STUB (branded) ────────────────────────────────────
function PayStubDoc({ data }) {
  // data: { company, employee:{name,badge,address,resident,ssnMasked}, period, payDate,
  //   lines:[{code,desc,hrs,rate,amount}], taxes:[{label,amount}], gross, net,
  //   ytd:{gross,net,tax}, employer:[{label,amount}] }
  const d = data;
  return (
    <div>
      <DocHeader company={d.company} title="Earnings Statement"
        right={<>
          <div style={{ fontSize: 13, fontWeight: 700, marginTop: 2 }} className="rfp-doc-mono">Pay date {D_date(d.payDate)}</div>
          <div style={{ fontSize: 11, color: '#555' }}>Period {d.period}</div>
        </>} />

      {/* Employee strip */}
      <div style={{ display: 'flex', padding: '14px 28px', gap: 28, borderBottom: '1px solid #ddd' }}>
        <div style={{ flex: 1 }}>
          <div className="rfp-form-label">Employee</div>
          <div style={{ fontWeight: 700, fontSize: 15 }}>{d.employee.name}</div>
          <div style={{ fontSize: 11.5, color: '#555', marginTop: 2 }}>{d.employee.address}</div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div className="rfp-form-label">Badge / SSN</div>
          <div className="rfp-doc-mono" style={{ fontSize: 13, fontWeight: 600 }}>{d.employee.badge}</div>
          <div className="rfp-doc-mono" style={{ fontSize: 12, color: '#555' }}>{d.employee.ssnMasked || '•••-••-4821'}</div>
        </div>
      </div>

      {/* Earnings table */}
      <div style={{ padding: '16px 28px' }}>
        <table style={{ width: '100%', fontSize: 12, borderCollapse: 'collapse' }}>
          <thead>
            <tr style={{ borderBottom: '1.5px solid #111', textAlign: 'left' }}>
              <th style={{ padding: '6px 4px', fontSize: 9.5, textTransform: 'uppercase', letterSpacing: 0.4, color: '#555' }}>Earnings</th>
              <th style={{ padding: '6px 4px', fontSize: 9.5, textTransform: 'uppercase', letterSpacing: 0.4, color: '#555', textAlign: 'right' }}>Hours</th>
              <th style={{ padding: '6px 4px', fontSize: 9.5, textTransform: 'uppercase', letterSpacing: 0.4, color: '#555', textAlign: 'right' }}>Rate</th>
              <th style={{ padding: '6px 4px', fontSize: 9.5, textTransform: 'uppercase', letterSpacing: 0.4, color: '#555', textAlign: 'right' }}>Amount</th>
            </tr>
          </thead>
          <tbody>
            {d.lines.map((l, i) => (
              <tr key={i} style={{ borderBottom: '1px solid #eee' }}>
                <td style={{ padding: '7px 4px' }}>
                  <span className="rfp-doc-mono" style={{ fontWeight: 700, marginRight: 8 }}>{l.code}</span>{l.desc}
                </td>
                <td style={{ padding: '7px 4px', textAlign: 'right' }} className="rfp-doc-mono">{l.hrs != null ? D_num(l.hrs, 2) : '—'}</td>
                <td style={{ padding: '7px 4px', textAlign: 'right' }} className="rfp-doc-mono">{l.rate != null ? D_money(l.rate) : '—'}</td>
                <td style={{ padding: '7px 4px', textAlign: 'right', fontWeight: 600 }} className="rfp-doc-mono">{D_money(l.amount)}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* Two-column: deductions + employer */}
      <div style={{ display: 'flex', gap: 0, padding: '0 28px 16px' }}>
        <div style={{ flex: 1, paddingRight: 20 }}>
          <div className="rfp-form-label" style={{ marginBottom: 6 }}>Taxes & deductions</div>
          {d.taxes.map((t, i) => (
            <div key={i} style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, padding: '4px 0', borderBottom: '1px solid #f0f0f0' }}>
              <span>{t.label}</span><span className="rfp-doc-mono" style={{ fontWeight: 600 }}>{D_money(-Math.abs(t.amount))}</span>
            </div>
          ))}
        </div>
        <div style={{ flex: 1, paddingLeft: 20, borderLeft: '1px solid #ddd' }}>
          <div className="rfp-form-label" style={{ marginBottom: 6 }}>Employer contributions</div>
          {d.employer.map((t, i) => (
            <div key={i} style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, padding: '4px 0', borderBottom: '1px solid #f0f0f0' }}>
              <span>{t.label}</span><span className="rfp-doc-mono" style={{ fontWeight: 600 }}>{D_money(t.amount)}</span>
            </div>
          ))}
        </div>
      </div>

      {/* Totals bar */}
      <div style={{ display: 'flex', borderTop: '2px solid #111', background: '#f7f7f5' }}>
        {[['Gross', d.gross], ['Taxes', -d.taxes.reduce((s, t) => s + Math.abs(t.amount), 0)], ['Net pay', d.net]].map(([k, v], i) => (
          <div key={k} style={{ flex: 1, padding: '12px 28px', borderRight: i < 2 ? '1px solid #ddd' : 'none' }}>
            <div className="rfp-form-label">{k} this period</div>
            <div className="rfp-doc-mono" style={{ fontSize: i === 2 ? 20 : 16, fontWeight: 700, marginTop: 2 }}>{D_money(v)}</div>
          </div>
        ))}
      </div>

      {/* YTD */}
      <div style={{ display: 'flex', padding: '10px 28px 20px', gap: 28 }}>
        <div className="rfp-form-label">Year to date:</div>
        <div style={{ fontSize: 11.5 }}>Gross <span className="rfp-doc-mono" style={{ fontWeight: 700 }}>{D_money(d.ytd.gross)}</span></div>
        <div style={{ fontSize: 11.5 }}>Taxes <span className="rfp-doc-mono" style={{ fontWeight: 700 }}>{D_money(d.ytd.tax)}</span></div>
        <div style={{ fontSize: 11.5 }}>Net <span className="rfp-doc-mono" style={{ fontWeight: 700 }}>{D_money(d.ytd.net)}</span></div>
      </div>
    </div>
  );
}

// ── 2) FORM W-2 (IRS-style boxed layout) ─────────────────────
function W2Doc({ data }) {
  const d = data; // { year, employee, employer, boxes:{1..20}, box14:[{code,amount}], state }
  const cell = (num, label, value, style) => (
    <div className="rfp-form-box" style={{ position: 'relative', ...style }}>
      <span style={{ position: 'absolute', top: 3, left: 5, fontSize: 8, fontWeight: 700, color: '#666' }}>{num}</span>
      <div className="rfp-form-label" style={{ marginLeft: num ? 14 : 0, fontSize: 8 }}>{label}</div>
      <div className="rfp-doc-mono" style={{ fontSize: 13, fontWeight: 700, marginTop: 1 }}>{value}</div>
    </div>
  );
  return (
    <div style={{ padding: 20 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 8 }}>
        <div style={{ fontSize: 11, color: '#555' }}>22222 · <span className="rfp-doc-mono">VOID □</span></div>
        <div style={{ textAlign: 'center' }}>
          <div style={{ fontWeight: 800, fontSize: 17 }}>Form W-2 Wage and Tax Statement</div>
          <div style={{ fontSize: 11, color: '#555' }}>Department of the Treasury — Internal Revenue Service</div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div style={{ fontWeight: 800, fontSize: 22 }} className="rfp-doc-mono">{d.year}</div>
          <div style={{ fontSize: 9, color: '#888' }}>OMB No. 1545-0008</div>
        </div>
      </div>

      <div className="rfp-form-grid">
        {/* Row: a) SSN */}
        <div style={{ display: 'flex' }}>
          {cell('a', 'Employee\u2019s social security number', d.employee.ssn, { flex: 2 })}
          {cell('1', 'Wages, tips, other comp.', D_money(d.boxes[1]), { flex: 1.4 })}
          {cell('2', 'Federal income tax withheld', D_money(d.boxes[2]), { flex: 1.4 })}
        </div>
        <div style={{ display: 'flex' }}>
          {cell('b', 'Employer ID number (EIN)', d.employer.ein, { flex: 2 })}
          {cell('3', 'Social security wages', D_money(d.boxes[3]), { flex: 1.4 })}
          {cell('4', 'Social security tax withheld', D_money(d.boxes[4]), { flex: 1.4 })}
        </div>
        <div style={{ display: 'flex' }}>
          {cell('c', 'Employer name, address, ZIP', `${d.employer.name} · ${d.employer.address}`, { flex: 2 })}
          {cell('5', 'Medicare wages and tips', D_money(d.boxes[5]), { flex: 1.4 })}
          {cell('6', 'Medicare tax withheld', D_money(d.boxes[6]), { flex: 1.4 })}
        </div>
        <div style={{ display: 'flex' }}>
          {cell('d', 'Control number', d.control, { flex: 2 })}
          {cell('7', 'Social security tips', D_money(d.boxes[7] || 0), { flex: 1.4 })}
          {cell('8', 'Allocated tips', D_money(d.boxes[8] || 0), { flex: 1.4 })}
        </div>
        <div style={{ display: 'flex' }}>
          {cell('e', 'Employee name', d.employee.name, { flex: 2 })}
          {cell('9', '', '', { flex: 1.4 })}
          {cell('10', 'Dependent care benefits', D_money(d.boxes[10] || 0), { flex: 1.4 })}
        </div>
        <div style={{ display: 'flex' }}>
          {cell('f', 'Employee address and ZIP', d.employee.address, { flex: 2 })}
          {cell('12a', 'See instructions', (d.box14 && d.box14[0]) ? `${d.box14[0].code} ${D_money(d.box14[0].amount)}` : '', { flex: 1.4 })}
          <div className="rfp-form-box" style={{ flex: 1.4 }}>
            <div className="rfp-form-label" style={{ fontSize: 8 }}>13 Stat. emp. / Ret. plan</div>
            <div className="rfp-doc-mono" style={{ fontSize: 12, marginTop: 2 }}>☐  ☑ RRTA</div>
          </div>
        </div>
        {/* Box 14 — Other (RRTA codes) */}
        <div style={{ display: 'flex' }}>
          <div className="rfp-form-box" style={{ flex: 2 }}>
            <div className="rfp-form-label" style={{ fontSize: 8 }}>14 Other (Railroad Retirement)</div>
            <div className="rfp-doc-mono" style={{ fontSize: 11.5, marginTop: 2, lineHeight: 1.5 }}>
              {(d.box14 || []).map((b, i) => <div key={i}>{b.code} {D_money(b.amount)}</div>)}
            </div>
          </div>
          <div style={{ flex: 2.8, display: 'flex', flexDirection: 'column' }}>
            <div style={{ display: 'flex', flex: 1 }}>
              {cell('15', 'State / Employer state ID', `${d.state.code}  ${d.state.id}`, { flex: 1 })}
              {cell('16', 'State wages, tips', D_money(d.state.wages), { flex: 1 })}
              {cell('17', 'State income tax', D_money(d.state.tax), { flex: 1 })}
            </div>
            <div style={{ display: 'flex', flex: 1 }}>
              {cell('18', 'Local wages', D_money(d.state.localWages || 0), { flex: 1 })}
              {cell('19', 'Local income tax', D_money(d.state.localTax || 0), { flex: 1 })}
              {cell('20', 'Locality name', d.state.locality || '—', { flex: 1 })}
            </div>
          </div>
        </div>
      </div>
      <div style={{ fontSize: 9.5, color: '#666', marginTop: 8, display: 'flex', justifyContent: 'space-between' }}>
        <span>Copy C — For EMPLOYEE'S RECORDS</span>
        <span>This information is being furnished to the Internal Revenue Service.</span>
      </div>
    </div>
  );
}

Object.assign(window, { DocHeader, Box, PayStubDoc, W2Doc });