// doc-templates-2.jsx — RRB compliance forms (BA-3 / BA-4) and operational
// record PDFs (Job Briefing, Daily Field Report). Formal/official look.

// ── 3) FORM BA-3 — Annual Report of Creditable Compensation ──
function BA3Doc({ data }) {
  const d = data; // { year, employer, baNumber, employees:[{name, ssn, tier1, tier2, medicare, comp}], totals }
  return (
    <div style={{ padding: 22 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', borderBottom: '2px solid #111', paddingBottom: 10, marginBottom: 12, gap: 20 }}>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 10, fontWeight: 700, color: '#444' }}>U.S. RAILROAD RETIREMENT BOARD</div>
          <div style={{ fontWeight: 800, fontSize: 17, marginTop: 2, lineHeight: 1.2 }}>Form BA-3 · Annual Report of Creditable Compensation</div>
          <div style={{ fontSize: 11, color: '#555', marginTop: 2 }}>Tax year {d.year} · Filed under the Railroad Retirement Act & RUIA</div>
        </div>
        <div style={{ textAlign: 'right', fontSize: 10, color: '#555', flexShrink: 0 }}>
          <div className="rfp-doc-mono" style={{ fontSize: 13, fontWeight: 700, color: '#111' }}>{d.baNumber}</div>
          <div>BA No. (employer)</div>
          <div style={{ marginTop: 4 }}>OMB 3220-0008</div>
        </div>
      </div>

      <div style={{ display: 'flex', gap: 12, marginBottom: 12 }}>
        <Box label="Employer" w={2}>{d.employer.name}</Box>
        <Box label="EIN">{d.employer.ein}</Box>
        <Box label="RRB BA No.">{d.baNumber}</Box>
      </div>

      <table style={{ width: '100%', fontSize: 11, borderCollapse: 'collapse', border: '1.5px solid #111' }}>
        <thead>
          <tr style={{ background: '#eee', borderBottom: '1.5px solid #111' }}>
            <th style={{ padding: '6px 8px', textAlign: 'left', fontSize: 9, textTransform: 'uppercase', letterSpacing: 0.4 }}>Employee</th>
            <th style={{ padding: '6px 8px', textAlign: 'left', fontSize: 9, textTransform: 'uppercase' }}>SSN</th>
            <th style={{ padding: '6px 8px', textAlign: 'right', fontSize: 9, textTransform: 'uppercase' }}>Tier I Comp.</th>
            <th style={{ padding: '6px 8px', textAlign: 'right', fontSize: 9, textTransform: 'uppercase' }}>Tier II Comp.</th>
            <th style={{ padding: '6px 8px', textAlign: 'right', fontSize: 9, textTransform: 'uppercase' }}>Medicare Comp.</th>
          </tr>
        </thead>
        <tbody>
          {d.employees.map((e, i) => (
            <tr key={i} style={{ borderBottom: '1px solid #ddd' }}>
              <td style={{ padding: '6px 8px', fontWeight: 600 }}>{e.name}</td>
              <td style={{ padding: '6px 8px' }} className="rfp-doc-mono">{e.ssn}</td>
              <td style={{ padding: '6px 8px', textAlign: 'right' }} className="rfp-doc-mono">{D_money(e.tier1)}</td>
              <td style={{ padding: '6px 8px', textAlign: 'right' }} className="rfp-doc-mono">{D_money(e.tier2)}</td>
              <td style={{ padding: '6px 8px', textAlign: 'right' }} className="rfp-doc-mono">{D_money(e.medicare)}</td>
            </tr>
          ))}
        </tbody>
        <tfoot>
          <tr style={{ borderTop: '2px solid #111', background: '#f7f7f5', fontWeight: 700 }}>
            <td style={{ padding: '8px' }} colSpan={2}>Totals — {d.employees.length} employees</td>
            <td style={{ padding: '8px', textAlign: 'right' }} className="rfp-doc-mono">{D_money(d.totals.tier1)}</td>
            <td style={{ padding: '8px', textAlign: 'right' }} className="rfp-doc-mono">{D_money(d.totals.tier2)}</td>
            <td style={{ padding: '8px', textAlign: 'right' }} className="rfp-doc-mono">{D_money(d.totals.medicare)}</td>
          </tr>
        </tfoot>
      </table>

      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 20, fontSize: 10.5, color: '#444' }}>
        <div>
          <div style={{ borderTop: '1px solid #111', width: 220, paddingTop: 4 }}>Authorized official signature</div>
        </div>
        <div>
          <div style={{ borderTop: '1px solid #111', width: 140, paddingTop: 4 }}>Date</div>
        </div>
      </div>
      <div style={{ fontSize: 9, color: '#888', marginTop: 14 }}>
        Under penalties of perjury, I certify the compensation reported is true, correct, and complete. Due on or before the last day of February following the report year.
      </div>
    </div>
  );
}

// ── 4) FORM BA-4 — Report of Creditable Compensation Adjustments
function BA4Doc({ data }) {
  const d = data; // { year, employer, baNumber, adjustments:[{name, ssn, type, fromAmt, toAmt, reason}] }
  return (
    <div style={{ padding: 22 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', borderBottom: '2px solid #111', paddingBottom: 10, marginBottom: 12 }}>
        <div>
          <div style={{ fontSize: 10, fontWeight: 700, color: '#444' }}>U.S. RAILROAD RETIREMENT BOARD</div>
          <div style={{ fontWeight: 800, fontSize: 18, marginTop: 2 }}>Form BA-4 · Report of Creditable Compensation Adjustments</div>
          <div style={{ fontSize: 11, color: '#555', marginTop: 2 }}>Adjustments to prior BA-3 filings · Tax year {d.year}</div>
        </div>
        <div style={{ textAlign: 'right', fontSize: 10, color: '#555' }}>
          <div className="rfp-doc-mono" style={{ fontSize: 13, fontWeight: 700, color: '#111' }}>{d.baNumber}</div>
          <div>OMB 3220-0008</div>
        </div>
      </div>

      <div style={{ display: 'flex', gap: 12, marginBottom: 12 }}>
        <Box label="Employer" w={2}>{d.employer.name}</Box>
        <Box label="EIN">{d.employer.ein}</Box>
      </div>

      <table style={{ width: '100%', fontSize: 10.5, borderCollapse: 'collapse', border: '1.5px solid #111' }}>
        <thead>
          <tr style={{ background: '#eee', borderBottom: '1.5px solid #111' }}>
            <th style={{ padding: '6px', textAlign: 'left', fontSize: 9, textTransform: 'uppercase' }}>Employee / SSN</th>
            <th style={{ padding: '6px', textAlign: 'left', fontSize: 9, textTransform: 'uppercase' }}>Type</th>
            <th style={{ padding: '6px', textAlign: 'right', fontSize: 9, textTransform: 'uppercase' }}>Reported</th>
            <th style={{ padding: '6px', textAlign: 'right', fontSize: 9, textTransform: 'uppercase' }}>Corrected</th>
            <th style={{ padding: '6px', textAlign: 'right', fontSize: 9, textTransform: 'uppercase' }}>Difference</th>
            <th style={{ padding: '6px', textAlign: 'left', fontSize: 9, textTransform: 'uppercase' }}>Reason</th>
          </tr>
        </thead>
        <tbody>
          {d.adjustments.map((a, i) => (
            <tr key={i} style={{ borderBottom: '1px solid #ddd' }}>
              <td style={{ padding: '6px' }}><div style={{ fontWeight: 600 }}>{a.name}</div><span className="rfp-doc-mono" style={{ fontSize: 9.5, color: '#666' }}>{a.ssn}</span></td>
              <td style={{ padding: '6px' }}>{a.type}</td>
              <td style={{ padding: '6px', textAlign: 'right' }} className="rfp-doc-mono">{D_money(a.fromAmt)}</td>
              <td style={{ padding: '6px', textAlign: 'right' }} className="rfp-doc-mono">{D_money(a.toAmt)}</td>
              <td style={{ padding: '6px', textAlign: 'right', fontWeight: 700, color: a.toAmt - a.fromAmt < 0 ? '#b42318' : '#137c50' }} className="rfp-doc-mono">{D_money(a.toAmt - a.fromAmt)}</td>
              <td style={{ padding: '6px', fontSize: 10 }}>{a.reason}</td>
            </tr>
          ))}
        </tbody>
      </table>
      <div style={{ fontSize: 9, color: '#888', marginTop: 14 }}>
        File as soon as an error in previously reported compensation is discovered. Attach supporting documentation for each adjustment.
      </div>
    </div>
  );
}

// ── 5) JOB BRIEFING RECORD ───────────────────────────────────
function BriefingDoc({ data }) {
  const d = data;
  return (
    <div>
      <DocHeader company={d.company} title="Job Briefing Record · FRA 49 CFR 214"
        right={<div className="rfp-doc-mono" style={{ fontSize: 12, marginTop: 2 }}>{D_date(d.date)} · {d.time}</div>} />
      <div style={{ padding: '16px 28px' }}>
        <div style={{ display: 'flex', gap: 10, marginBottom: 12 }}>
          <Box label="Project #">{d.projectNumber}</Box>
          <Box label="Railroad / Sub" w={2}>{d.railroad} · {d.subdivision}</Box>
          <Box label="Milepost">{d.milepost}</Box>
        </div>
        <div style={{ display: 'flex', gap: 10, marginBottom: 12 }}>
          <Box label="RWIC">{d.rwic}</Box>
          <Box label="Contractor foreman">{d.foreman}</Box>
          <Box label="People / Equip">{d.people} / {d.equip}</Box>
        </div>

        <SectionTitle>On-track safety</SectionTitle>
        <div style={{ fontSize: 12, marginBottom: 4 }}><b>Protection:</b> {(d.otsTypes || []).join(', ') || 'None recorded'}</div>
        <div style={{ fontSize: 12, marginBottom: 12 }}><b>PPOS:</b> {d.ppos || '—'}</div>

        <SectionTitle>Red-zone risks identified</SectionTitle>
        <div style={{ fontSize: 12, marginBottom: 12 }}>
          {(d.riskFlags && d.riskFlags.length) ? d.riskFlags.join(' · ') : 'None identified'}
          {d.riskPlan && <div style={{ marginTop: 4 }}><b>Mitigation:</b> {d.riskPlan}</div>}
        </div>

        <SectionTitle>Crew acknowledgement</SectionTitle>
        <table style={{ width: '100%', fontSize: 11, borderCollapse: 'collapse', border: '1px solid #bbb' }}>
          <thead><tr style={{ background: '#eee' }}>
            <th style={{ padding: '5px 8px', textAlign: 'left', fontSize: 9, textTransform: 'uppercase' }}>Worker</th>
            <th style={{ padding: '5px 8px', textAlign: 'left', fontSize: 9, textTransform: 'uppercase' }}>Company</th>
            <th style={{ padding: '5px 8px', textAlign: 'left', fontSize: 9, textTransform: 'uppercase' }}>Training exp.</th>
            <th style={{ padding: '5px 8px', textAlign: 'center', fontSize: 9, textTransform: 'uppercase' }}>Signed</th>
          </tr></thead>
          <tbody>
            {(d.crew || []).map((c, i) => (
              <tr key={i} style={{ borderTop: '1px solid #ddd' }}>
                <td style={{ padding: '5px 8px' }}>{c.name}</td>
                <td style={{ padding: '5px 8px' }}>{c.company}</td>
                <td style={{ padding: '5px 8px' }} className="rfp-doc-mono">{c.exp}</td>
                <td style={{ padding: '5px 8px', textAlign: 'center', fontWeight: 700 }}>{c.signed ? '✓' : '—'}</td>
              </tr>
            ))}
          </tbody>
        </table>

        <div style={{ marginTop: 18, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
          <div>
            <div style={{ fontFamily: 'cursive', fontSize: 22, borderBottom: '1px solid #111', paddingBottom: 2, width: 240 }}>{d.rwic}</div>
            <div className="rfp-form-label" style={{ marginTop: 3 }}>RWIC certification · {d.badge}</div>
          </div>
          <div style={{ textAlign: 'right', fontSize: 10, color: '#555' }}>
            <div className="rfp-doc-mono">GPS {d.gps || '47.7128°N, 121.3525°W'}</div>
            <div>{d.sigCount}/{d.crewTotal} crew signatures captured</div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ── 6) DAILY FIELD REPORT ────────────────────────────────────
function FieldReportDoc({ data }) {
  const d = data;
  return (
    <div>
      <DocHeader company={d.company} title="Daily Field Report"
        right={<div className="rfp-doc-mono" style={{ fontSize: 12, marginTop: 2 }}>{D_date(d.date)}</div>} />
      <div style={{ padding: '16px 28px' }}>
        <div style={{ display: 'flex', gap: 10, marginBottom: 12 }}>
          <Box label="Project #">{d.projectNumber}</Box>
          <Box label="Subdivision / MP" w={2}>{d.subdivision} · {d.milepost}</Box>
          <Box label="Hours">{D_num(d.hours, 2)}</Box>
        </div>
        <SectionTitle>Work performed</SectionTitle>
        <div style={{ fontSize: 12, marginBottom: 12, lineHeight: 1.5 }}>{d.workType}</div>

        <div style={{ display: 'flex', gap: 20 }}>
          <div style={{ flex: 1 }}>
            <SectionTitle>Train movements ({d.trainCount})</SectionTitle>
            <table style={{ width: '100%', fontSize: 11, borderCollapse: 'collapse' }}>
              <tbody>
                {(d.trains || []).map((t, i) => (
                  <tr key={i} style={{ borderBottom: '1px solid #eee' }}>
                    <td style={{ padding: '4px 0' }} className="rfp-doc-mono">{t.trainNum}</td>
                    <td style={{ padding: '4px 0', textAlign: 'right' }} className="rfp-doc-mono">{t.timeIn}–{t.timeOut}</td>
                  </tr>
                ))}
                {(!d.trains || !d.trains.length) && <tr><td style={{ fontSize: 11, color: '#888', padding: '4px 0' }}>No movements logged.</td></tr>}
              </tbody>
            </table>
          </div>
          <div style={{ flex: 1 }}>
            <SectionTitle>Compliance</SectionTitle>
            {[['Switches handled', d.switches], ['Track delays', d.trackDelays], ['Rules violations', d.violations]].map(([k, v]) => (
              <div key={k} style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, padding: '3px 0', borderBottom: '1px solid #f0f0f0' }}>
                <span>{k}</span><b>{v ? 'Yes' : 'No'}</b>
              </div>
            ))}
            <div style={{ fontSize: 12, padding: '3px 0' }}>Photos captured: <b>{d.photoCount}</b> (min 4)</div>
          </div>
        </div>

        <div style={{ marginTop: 18, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
          <div>
            <div style={{ fontFamily: 'cursive', fontSize: 22, borderBottom: '1px solid #111', paddingBottom: 2, width: 220 }}>{d.rwic}</div>
            <div className="rfp-form-label" style={{ marginTop: 3 }}>RWIC · {d.badge}</div>
          </div>
          <div>
            <div style={{ fontFamily: 'cursive', fontSize: 22, borderBottom: '1px solid #111', paddingBottom: 2, width: 220 }}>{d.contractorRep || ''}</div>
            <div className="rfp-form-label" style={{ marginTop: 3 }}>Contractor representative</div>
          </div>
        </div>
      </div>
    </div>
  );
}

const SectionTitle = ({ children }) => (
  <div style={{ fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 0.6, color: '#111', borderBottom: '1.5px solid #111', paddingBottom: 3, marginBottom: 8, marginTop: 4 }}>{children}</div>
);

Object.assign(window, { BA3Doc, BA4Doc, BriefingDoc, FieldReportDoc, SectionTitle });
