// Penalty-mandated surfaces — Statutory Filings · AML Training · MLRO/Officers · CESRA.
// Pattern B (canonical): `<>` fragment · .app-subheader (title + meta + spacer + buttons)
// · optional .audit-banner (full-bleed) · .page-scroll > .reg-wrap (padding 20 24 24).

function RPill({ tone, children }) {
  return <span className={`r-pill tone-${tone}`}>{children}</span>;
}
function RChip({ kind, children }) {
  return <span className={`r-chip ${kind === "attached" ? "is-attached" : ""}`}>{children}</span>;
}

// ── Statutory Filings ──────────────────────────────────────────────────────
function StatutoryFilings({ auditorMode }) {
  return (
    <>
      <div className="app-subheader">
        <div className="subheader-title">Statutory Filings</div>
        <div className="subheader-meta">
          9 overdue from 2022–2024 (<Term id="IOEAMA">IOEAMA</Term> · <Term id="ATA">ATA §70(3)</Term>) — SCB compliance directive 2026-03-30
        </div>
        <div className="subheader-spacer" />
        <Btn variant="outlined" icon={IDownload}>
          Export calendar
        </Btn>
        <Btn variant="filled" disabled={auditorMode}>
          + New filing
        </Btn>
      </div>

      <div className="tbl-wrap filings-wrap">
        <FilingGroup title="IOEAMA Orders · annual strict-compliance declarations" hint="§24 Afghanistan, §24 Iraq, §15 DPRK, §14 Iran · due 30 days from regulator notice">
          {window.STATUTORY_FILINGS.ioeama.map((f, i) => (
            <FilingRow key={i} {...f} auditorMode={auditorMode} />
          ))}
        </FilingGroup>

        <FilingGroup title="ATA §70(3) · quarterly FIU disclosures" hint="Property used (or likely to be used) in commission offences · referred to FIU 2026-03-30">
          {window.STATUTORY_FILINGS.ata.map((f, i) => (
            <FilingRow key={"a" + i} {...f} auditorMode={auditorMode} />
          ))}
        </FilingGroup>

        <FilingGroup title="AEOI / CRS · annual reporting" hint="Bahamas Competent Authority portal · Amendment Act 2026 ceiling $300,000 (effective 2026-06-15)">
          {window.STATUTORY_FILINGS.aeoi.map((f, i) => (
            <FilingRow key={"e" + i} {...f} auditorMode={auditorMode} />
          ))}
        </FilingGroup>
      </div>
    </>
  );
}

function FilingGroup({ title, hint, children }) {
  return (
    <div className="filing-group">
      <div className="filing-group-hd">
        <h3>{title}</h3>
        <Mono dim>{hint}</Mono>
      </div>
      <div className="filing-rows">{children}</div>
    </div>
  );
}

function FilingRow({ instrument, period, status, due, note, evidence, ackRef, auditorMode }) {
  const tone =
    status === "Overdue" || status === "FIU referral" || status === "Missing"
      ? "bad"
      : status === "Drafted"
        ? "warn"
        : status === "Submitted" || status === "Accepted"
          ? "ok"
          : "neutral";
  return (
    <div className="filing-row">
      <div className="lbl">{instrument}</div>
      <Mono dim>
        {period} · due {due}
      </Mono>
      <RPill tone={tone}>{status}</RPill>
      <div className="filing-ev">
        {evidence ? <RChip kind="attached">⚲ {evidence}</RChip> : <RChip>+ Attach evidence</RChip>}
        {ackRef ? <Mono dim>{ackRef}</Mono> : null}
      </div>
      <div className="muted">{note}</div>
      <div className="filing-act">
        {status === "Submitted" || status === "Accepted" ? (
          <Mono dim>✓</Mono>
        ) : (
          <Btn variant="filled" size="sm" disabled={auditorMode}>
            Submit
          </Btn>
        )}
      </div>
    </div>
  );
}

// ── AML Training Register ───────────────────────────────────────────────────
function AmlTraining({ auditorMode }) {
  return (
    <>
      <div className="app-subheader">
        <div className="subheader-title">AML Training</div>
        <div className="subheader-meta">
          <Term id="FTRA">§19 FTRA 2018</Term> · annual completion required for every regulated employee
        </div>
        <div className="subheader-spacer" />
        <Btn variant="outlined" icon={IDownload}>
          Export register
        </Btn>
        <Btn variant="filled" disabled={auditorMode}>
          + Log training
        </Btn>
      </div>

      <div className="audit-banner">
        <IAlertT size={14} className="audit-banner-icon" />
        <span>
          <b>SCB fine $3,000</b> · 6 missed employee-years 2022-2024 (Vincent Keel 2022/23/24, Kayla Cole 2022/23, Hassan Bell 2023). Each missed annual training = $1,000.
        </span>
        <span className="audit-banner-hint">Penalty notice · 2026-03-30 · §19 FTRA 2018</span>
      </div>

      <div className="tbl-wrap training-grid-wrap">
        <div className="training-grid">
          <div className="t-cell hd">Employee · Role</div>
          {["2022", "2023", "2024", "2025", "2026"].map((y) => (
            <div key={y} className="t-cell hd">
              {y}
            </div>
          ))}

          {window.AML_TRAINING.map((row, ri) => (
            <React.Fragment key={ri}>
              <div className="t-cell">
                <div className="t-cell-stack">
                  <b>{row.name}</b>
                  <Mono dim>{row.role}</Mono>
                </div>
              </div>
              {row.years.map((y, yi) => (
                <TrainingCell key={yi} {...y} />
              ))}
            </React.Fragment>
          ))}
        </div>

        <div className="reg-footer">
          <Card title="Evidence registry" hint="Certificates of completion attached per training row">
            <div className="evidence-grid">
              {window.AML_TRAINING.flatMap((r) =>
                r.years
                  .filter((y) => y.evidence)
                  .map((y, yi) => (
                    <RChip key={r.name + yi} kind="attached">
                      ⚲ {y.evidence}
                    </RChip>
                  ))
              )}
              <RChip>+ Attach 2026 enrolments</RChip>
            </div>
          </Card>
        </div>
      </div>
    </>
  );
}

function TrainingCell({ status, date, evidence }) {
  if (status === "completed")
    return (
      <div className="t-cell ok">
        <Mono>{date}</Mono>
      </div>
    );
  if (status === "missed")
    return (
      <div className="t-cell miss" title="$1,000 SCB fine per missed year · §19 FTRA Internal Controls">
        Missed <span className="t-cost">$1,000</span>
      </div>
    );
  if (status === "scheduled") return <div className="t-cell">Scheduled</div>;
  if (status === "na") return <div className="t-cell faint">N/A</div>;
  return <div className="t-cell"></div>;
}

// ── MLRO / Officers ─────────────────────────────────────────────────────────
function Officers({ auditorMode }) {
  const cur = window.OFFICERS.current;
  return (
    <>
      <div className="app-subheader">
        <div className="subheader-title">
          <Term id="MLRO">MLRO</Term> &amp; Officers
        </div>
        <div className="subheader-meta">Rule 4(4) AML-CFT Rules 2015 · officer changes must be notified to SCB within 5 business days</div>
        <div className="subheader-spacer" />
        <Btn variant="filled" disabled={auditorMode}>
          + Change MLRO
        </Btn>
      </div>

      <div className="audit-banner">
        <IAlertT size={14} className="audit-banner-icon" />
        <span>
          <b>SCB fine $2,500</b> · prior MLRO Calvin Pierce's resignation (2025-08-24) was not notified to SCB within the 5-day window. New appointments must use the workflow
          below.
        </span>
        <span className="audit-banner-hint">Penalty notice · 2026-03-30 · Rule 4(4) AML-CFT Rules 2015</span>
      </div>

      <div className="page-scroll">
        <div className="reg-wrap">
          <Card>
            <div className="officer-current">
              <div className="officer-avatar">{cur.initials}</div>
              <div className="officer-meta">
                <b>{cur.name}</b> — {cur.role}
                <br />
                <Mono dim>
                  Active since {cur.since} · SCB notified <span style={{ color: "var(--green-fg)" }}>{cur.scbNotified}</span> · {cur.evidence}
                </Mono>
              </div>
              <Btn variant="ghost" size="sm" disabled={auditorMode}>
                Change
              </Btn>
            </div>

            <h4 className="reg-subtitle">Change history</h4>
            <table className="officer-history">
              <thead>
                <tr>
                  <th>Period</th>
                  <th>Person</th>
                  <th>Role</th>
                  <th>SCB notified</th>
                  <th>Evidence</th>
                </tr>
              </thead>
              <tbody>
                {window.OFFICERS.history.map((h, i) => (
                  <tr key={i}>
                    <td>
                      <Mono>{h.period}</Mono>
                    </td>
                    <td>{h.name}</td>
                    <td>{h.role}</td>
                    <td>
                      {h.notified === "Missed" ? (
                        <>
                          <RPill tone="bad">Missed</RPill>
                          {h.fineNote ? <Mono dim> ({h.fineNote})</Mono> : null}
                        </>
                      ) : (
                        <RPill tone="ok">{h.notified}</RPill>
                      )}
                    </td>
                    <td>{h.evidence ? <RChip kind="attached">⚲ {h.evidence}</RChip> : <RChip>+ Attach evidence</RChip>}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </Card>

          <Card title="Current officers — all regulated roles" hint="Per Rule 4(4) AML-CFT Rules 2015 · any change must be notified within 5 business days">
            <table className="officer-history">
              <thead>
                <tr>
                  <th>Role</th>
                  <th>Person</th>
                  <th>Since</th>
                  <th>SCB notified</th>
                </tr>
              </thead>
              <tbody>
                {window.OFFICERS.roster.map((r, i) => (
                  <tr key={i}>
                    <td>{r.role}</td>
                    <td>{r.name || <span className="muted">Vacant</span>}</td>
                    <td>
                      <Mono>{r.since || "—"}</Mono>
                    </td>
                    <td>{r.notified ? <RPill tone="ok">Yes</RPill> : <RPill tone="warn">Action required</RPill>}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </Card>
        </div>
      </div>
    </>
  );
}

// ── CESRA · Economic Substance Reporting ────────────────────────────────────
function Cesra({ auditorMode }) {
  return (
    <>
      <div className="app-subheader">
        <div className="subheader-title">
          <Term id="CESRA">CESRA</Term> · Economic Substance Reporting
        </div>
        <div className="subheader-meta">
          Annual filing for AFSL · IFA-U-96 · auto-pulls from <Mono dim>AgioPlatform.vw_cesra_reporting</Mono>
        </div>
        <div className="subheader-spacer" />
        <Btn variant="ghost">Save draft</Btn>
        <Btn variant="outlined">Preview PDF</Btn>
        <Btn variant="filled" disabled={auditorMode}>
          Submit to OED
        </Btn>
      </div>

      <div className="page-scroll">
        <div className="reg-wrap">
          <div className="cesra-grid">
            <Card title="Filing details · 2025 cycle">
              {window.CESRA.fields.map((f, i) => (
                <div className="cesra-field" key={i}>
                  <label>{f.label}</label>
                  <input defaultValue={f.value} readOnly={auditorMode} />
                  {f.autopull ? <span className="autopull">↻ {f.autopull}</span> : null}
                </div>
              ))}
            </Card>

            <Card title="OED Bulk Upload preview">
              <pre className="cesra-preview">{window.CESRA.preview}</pre>
            </Card>
          </div>

          <Card title="Submission history" hint="via OED Bulk Upload feature">
            <table className="officer-history">
              <thead>
                <tr>
                  <th>Cycle</th>
                  <th>Filed</th>
                  <th>Status</th>
                  <th>Acknowledgement</th>
                </tr>
              </thead>
              <tbody>
                {window.CESRA.history.map((h, i) => (
                  <tr key={i}>
                    <td>{h.cycle}</td>
                    <td>
                      <Mono dim>{h.filed}</Mono>
                    </td>
                    <td>
                      <RPill tone={h.tone}>{h.status}</RPill>
                    </td>
                    <td>
                      <Mono dim>{h.ack || "—"}</Mono>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </Card>
        </div>
      </div>
    </>
  );
}

Object.assign(window, { StatutoryFilings, AmlTraining, Officers, Cesra });