// Printable SAF — paper trail for Stoney → Val signature workflow.

function SAFPrintModal({ rec, onClose }) {
  const fmtDate = (iso) => {
    if (!iso) return '';
    return new Date(iso).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' });
  };
  const fmtStamp = (iso) => {
    if (!iso) return '';
    return new Date(iso).toLocaleString('en-US', { dateStyle: 'medium', timeStyle: 'short' });
  };

  const team = window.AppData.TEAMS.find(t => t.id === rec.teamId);
  const wf = rec.workflow || {};

  React.useEffect(() => {
    function onKey(e) { if (e.key === 'Escape') onClose(); }
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [onClose]);

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div className="modal-head modal-noprint">
          <div>
            <div style={{ fontWeight: 600, fontSize: 14 }}>Printable SAF · paper trail</div>
            <div className="dim" style={{ fontSize: 11, marginTop: 2 }}>Print, staple to the receipt, hand to Stoney.</div>
          </div>
          <div className="flex-gap-8">
            <button className="btn btn-secondary btn-sm" onClick={onClose}>
              <window.I.X size={13} /> Close
            </button>
            <button className="btn btn-primary btn-sm" onClick={() => window.print()}>
              <window.I.Download size={13} /> Print
            </button>
          </div>
        </div>

        <div className="modal-body saf-print-root">
          <div className="saf-paper">
            <div className="flex-between" style={{ alignItems: 'flex-start' }}>
              <div>
                <div className="saf-eyebrow">Ferris State University · Club Sports</div>
                <h1>SAF Purchasing Application</h1>
                <div style={{ color: '#666', fontSize: 11, marginTop: 2 }}>
                  Application ID · <strong style={{ color: '#111' }}>{rec.id.toUpperCase()}</strong>
                  &nbsp;·&nbsp; Submitted {fmtStamp(rec.submittedAt)}
                </div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div className="saf-amount-label">Amount requested</div>
                <div className="saf-amount">${(rec.amount || 0).toLocaleString()}</div>
                <div className="saf-cat">{rec.category}</div>
              </div>
            </div>
            <div className="saf-hr" />

            <div className="saf-section-h">Club + officer</div>
            <div className="saf-grid-2">
              <dl style={{ margin: 0 }}>
                <div className="saf-row"><dt>FSU club name</dt><dd>{team?.name || rec.team}</dd></div>
                <div className="saf-row"><dt>Sport</dt><dd>{team?.sport}</dd></div>
                <div className="saf-row"><dt>Date of submission</dt><dd>{fmtDate(rec.date || rec.submittedAt)}</dd></div>
              </dl>
              <dl style={{ margin: 0 }}>
                <div className="saf-row"><dt>Officer name</dt><dd>{rec.officer?.name}</dd></div>
                <div className="saf-row"><dt>Position on E-board</dt><dd>{rec.officer?.position}</dd></div>
                <div className="saf-row"><dt>Officer email</dt><dd>{rec.officer?.email}</dd></div>
              </dl>
            </div>

            <div className="saf-section-h">Purchase</div>
            <div className="saf-grid-2">
              <dl style={{ margin: 0 }}>
                <div className="saf-row"><dt>Is reimbursement?</dt><dd>{rec.isReimbursement ? 'Yes — reimburse officer' : 'No — pay vendor direct'}</dd></div>
                <div className="saf-row"><dt>Event category</dt><dd>{rec.category}</dd></div>
              </dl>
              <dl style={{ margin: 0 }}>
                <div className="saf-row"><dt>Amount</dt><dd>${(rec.amount || 0).toLocaleString()}</dd></div>
                <div className="saf-row"><dt>Receipt</dt><dd>{rec.receipt ? `${rec.receipt.filename} (stapled)` : '(missing — staple before forwarding)'}</dd></div>
              </dl>
            </div>

            <div className="saf-section-h">Supplier / vendor information</div>
            <div className="saf-grid-2">
              <dl style={{ margin: 0 }}>
                <div className="saf-row"><dt>Full name</dt><dd>{rec.vendor?.name || '—'}</dd></div>
                <div className="saf-row"><dt>Phone</dt><dd>{rec.vendor?.phone || '—'}</dd></div>
              </dl>
              <dl style={{ margin: 0 }}>
                <div className="saf-row"><dt>Address</dt><dd>{rec.vendor?.address || '—'}</dd></div>
                <div className="saf-row"><dt>Email</dt><dd>{rec.vendor?.email || '—'}</dd></div>
              </dl>
            </div>

            <div className="saf-section-h">Justification for expenditure</div>
            <div className="saf-just">{rec.justification || '—'}</div>

            {rec.gas && (
              <>
                <div className="saf-section-h">Gas reimbursement</div>
                <div className="saf-grid-2">
                  <dl style={{ margin: 0 }}>
                    <div className="saf-row"><dt>Cars taken</dt><dd>{rec.gas.cars}</dd></div>
                  </dl>
                  <dl style={{ margin: 0 }}>
                    <div className="saf-row"><dt>Departure</dt><dd>{rec.gas.from}</dd></div>
                    <div className="saf-row"><dt>Destination</dt><dd>{rec.gas.to}</dd></div>
                  </dl>
                </div>
              </>
            )}

            <div className="saf-section-h">Approvals</div>
            <div className="saf-sigs">
              <div>
                <div className="saf-sig-line">
                  {wf.stoneySigned ? 'Stoney Carter' : ''}
                </div>
                <div className="saf-sig-name">Stoney Carter · IM Fields / Club Sports staff</div>
                <div className="saf-sig-meta">
                  {wf.stoneySigned
                    ? `Signed ${fmtStamp(wf.stoneySigned.at)}`
                    : 'Signature: ____________________________   Date: __________'}
                </div>
              </div>
              <div>
                <div className="saf-sig-line">
                  {wf.valConfirmed ? 'Val Marquez' : ''}
                </div>
                <div className="saf-sig-name">Val Marquez · Courts / Finance approver</div>
                <div className="saf-sig-meta">
                  {wf.valConfirmed
                    ? `Confirmed ${fmtStamp(wf.valConfirmed.at)}`
                    : 'Signature: ____________________________   Date: __________'}
                </div>
              </div>
            </div>

            {wf.posted && (
              <div style={{ marginTop: 20, padding: 10, background: '#f0f7f0', border: '1px solid #b8d8b8', borderRadius: 4, fontSize: 11, color: '#1a3d1a' }}>
                <strong>Funds posted</strong> · {fmtStamp(wf.posted.at)} by {wf.posted.by} — president of {team?.name} notified, team's Google sheet updated.
              </div>
            )}
            {wf.returned && (
              <div style={{ marginTop: 20, padding: 10, background: '#fdf0f0', border: '1px solid #d8b8b8', borderRadius: 4, fontSize: 11, color: '#7a1a1a' }}>
                <strong>Returned to team</strong> · {fmtStamp(wf.returned.at)} by {wf.returned.by} — reason: {wf.returned.reason}
              </div>
            )}

            <div className="saf-footer">
              <span>RecSports Hub · printed {new Date().toLocaleDateString('en-US', { dateStyle: 'medium' })} {new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })}</span>
              <span>Form revision 2026.05 · staple receipt to back</span>
            </div>
          </div>
        </div>

        <div className="modal-foot modal-noprint">
          <span className="dim" style={{ fontSize: 11 }}>
            Workflow: officer submits → staff prints + staples receipt → Stoney signs → Val confirms → funds moved → team Google sheet updated → president notified.
          </span>
          <div className="flex-gap-8">
            <button className="btn btn-secondary btn-sm" onClick={onClose}>Close</button>
            <button className="btn btn-primary btn-sm" onClick={() => window.print()}>
              <window.I.Download size={13} /> Print SAF
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

window.SAFPrintModal = SAFPrintModal;