// Printable SAF Process / SOP — staff-training one-pager.

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

  const steps = [
    {
      num: 1,
      title: 'Officer submits SAF via Canvas',
      who: 'Club officer',
      sla: 'Same day',
      detail: 'E-board officer fills out the SAF purchasing application in Canvas with vendor info, justification, and a receipt or quote attached. RecSports Hub picks the submission up automatically and routes it to staff.',
    },
    {
      num: 2,
      title: 'Staff print + staple receipt',
      who: 'Club Sports staff (Maya, helper)',
      sla: 'Within 1 business day',
      detail: 'Open the SAF in the Budget tab, click "Print + staple to receipt". Print the form, staple the printed receipt to the back, and place in Stoney\u2019s tray. Paper trail must travel together.',
    },
    {
      num: 3,
      title: 'Stoney signs off',
      who: 'Stoney Carter \u00b7 IM Fields / Club Sports staff',
      sla: 'Within 2 business days',
      detail: 'Stoney reviews the application for completeness, signs the paper form, and marks "Mark Stoney signed" in the portal. Returned to team via the portal if anything is missing.',
    },
    {
      num: 4,
      title: 'Val confirms + moves money',
      who: 'Val Marquez \u00b7 Courts / Finance approver',
      sla: 'Within 2 business days',
      detail: 'Val verifies the dollar amount, allocation, and vendor information. Once correct, she initiates the fund transfer and clicks "Mark Val confirmed".',
    },
    {
      num: 5,
      title: 'Funds posted + sheet updated',
      who: 'Val / system',
      sla: 'Same day',
      detail: 'Click "Post funds + notify president". Portal updates the team\u2019s budget ledger AND mirrors the line into the team\u2019s Google sheet. President receives an email confirmation.',
    },
  ];

  const automation = [
    'Auto-route new SAFs to Stoney\'s tray the moment they appear in Canvas.',
    'Ping Stoney + Val on Slack if a SAF sits longer than 48 hours.',
    'Sync posted SAFs into the team\u2019s Google sheet with a single click.',
    'Email the president with the receipt link the moment funds post.',
    'Flag any SAF over $200 for E-board co-sign automatically.',
  ];

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()} style={{ maxWidth: 880 }}>
        <div className="modal-head modal-noprint">
          <div>
            <div style={{ fontWeight: 600, fontSize: 14 }}>SAF approval process \u00b7 staff SOP</div>
            <div className="dim" style={{ fontSize: 11, marginTop: 2 }}>Printable one-pager. Tape this above the SAF tray.</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 \u00b7 Club Sports</div>
                <h1>SAF Purchasing Application \u2014 process guide</h1>
                <div style={{ color: '#666', fontSize: 11, marginTop: 2 }}>
                  How a SAF moves from a Canvas submission to posted funds. For staff training.
                </div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div className="saf-amount-label">Median turnaround</div>
                <div className="saf-amount" style={{ fontSize: 22 }}>3 days</div>
                <div className="dim" style={{ fontSize: 10 }}>FY 2025\u201326 to date</div>
              </div>
            </div>
            <div className="saf-hr" />

            <div className="saf-section-h">The five steps</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginTop: 8 }}>
              {steps.map(s => (
                <div key={s.num} style={{
                  display: 'grid',
                  gridTemplateColumns: '46px 1fr 180px',
                  gap: 16,
                  paddingBottom: 12,
                  borderBottom: '1px solid #eee',
                }}>
                  <div style={{
                    width: 36, height: 36, borderRadius: '50%',
                    background: '#1a3a5c', color: 'white',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontWeight: 700, fontSize: 15,
                  }}>{s.num}</div>
                  <div>
                    <div style={{ fontWeight: 700, fontSize: 13, color: '#111' }}>{s.title}</div>
                    <div style={{ fontSize: 11, color: '#444', marginTop: 4, lineHeight: 1.55 }}>{s.detail}</div>
                  </div>
                  <div style={{ fontSize: 11, color: '#444' }}>
                    <div style={{ fontWeight: 600, color: '#111' }}>Responsible</div>
                    <div style={{ marginBottom: 6 }}>{s.who}</div>
                    <div style={{ fontWeight: 600, color: '#111' }}>SLA</div>
                    <div>{s.sla}</div>
                  </div>
                </div>
              ))}
            </div>

            <div className="saf-section-h">Visual flow</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 8, alignItems: 'center', marginTop: 10 }}>
              {['Canvas\nsubmission', 'Print +\nstaple', 'Stoney\nsigns', 'Val\nconfirms', 'Funds posted\n+ sheet updated'].map((label, i) => (
                <React.Fragment key={i}>
                  <div style={{
                    border: '1.5px solid ' + (i === 4 ? '#1a3d1a' : '#c8973a'),
                    background: i === 4 ? '#f0f7f0' : '#fdf8ec',
                    color: i === 4 ? '#1a3d1a' : '#7a5d1f',
                    padding: '10px 8px',
                    borderRadius: 6,
                    textAlign: 'center',
                    fontSize: 10,
                    fontWeight: 700,
                    whiteSpace: 'pre-line',
                    lineHeight: 1.3,
                    minHeight: 52,
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                  }}>
                    {label}
                  </div>
                </React.Fragment>
              ))}
            </div>

            <div className="saf-section-h">Common return reasons</div>
            <ul style={{ margin: '8px 0 0 18px', padding: 0, fontSize: 11, color: '#333', lineHeight: 1.8 }}>
              <li>Missing or unreadable receipt</li>
              <li>Vendor address incomplete or P.O. Box used for shipping items</li>
              <li>Justification not tied to a specific event or practice</li>
              <li>Reimbursement amount over $200 \u2014 needs E-board co-sign before submission</li>
              <li>Travel reimbursement filed after the event date (must be pre-approved)</li>
            </ul>

            <div className="saf-section-h">Automation roadmap</div>
            <ul style={{ margin: '8px 0 0 18px', padding: 0, fontSize: 11, color: '#333', lineHeight: 1.8 }}>
              {automation.map((line, i) => <li key={i}>{line}</li>)}
            </ul>

            <div className="saf-footer">
              <span>RecSports Hub \u00b7 SOP printed {new Date().toLocaleDateString('en-US', { dateStyle: 'medium' })}</span>
              <span>Revision 2026.05 \u00b7 contact: recsports@ferris.edu</span>
            </div>
          </div>
        </div>

        <div className="modal-foot modal-noprint">
          <span className="dim" style={{ fontSize: 11 }}>
            Save as PDF or print on letter paper. Update this when the workflow changes.
          </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
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

window.SAFProcessModal = SAFProcessModal;