red/teressa-copeland-homes/src/app/sign/[token]/_components/SigningProgressBar.tsx

'use client';

interface SigningProgressBarProps {
  total: number;
  signed: number;
  extraRequired?: number; // unfilled client-text + unchecked client-checkbox fields
  onJumpToNext: () => void;
  onSubmit: () => void;
  submitting: boolean;
}

export function SigningProgressBar({
  total,
  signed,
  extraRequired = 0,
  onJumpToNext,
  onSubmit,
  submitting,
}: SigningProgressBarProps) {
  const sigsDone = signed >= total;
  const allDone = sigsDone && extraRequired === 0;

  let statusText = `${signed} of ${total} signature${total !== 1 ? 's' : ''} complete`;
  if (sigsDone && extraRequired > 0) {
    statusText = `${extraRequired} field${extraRequired !== 1 ? 's' : ''} still need${extraRequired === 1 ? 's' : ''} to be filled`;
  }

  return (
    <div style={{
      position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: 50,
      backgroundColor: '#1B2B4B', color: '#fff',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '12px 24px', boxShadow: '0 -2px 8px rgba(0,0,0,0.15)',
    }}>
      <span style={{ fontSize: '15px' }}>{statusText}</span>
      <div style={{ display: 'flex', gap: '12px' }}>
        {!sigsDone && (
          <button onClick={onJumpToNext} style={{
            backgroundColor: 'transparent', border: '1px solid #C9A84C', color: '#C9A84C',
            padding: '8px 18px', borderRadius: '4px', cursor: 'pointer', fontSize: '14px',
          }}>
            Jump to Next
          </button>
        )}
        <button onClick={onSubmit} disabled={!allDone || submitting} style={{
          backgroundColor: allDone ? '#C9A84C' : '#555', color: '#fff', border: 'none',
          padding: '8px 22px', borderRadius: '4px',
          cursor: allDone ? 'pointer' : 'not-allowed', fontSize: '14px', fontWeight: 'bold',
          opacity: submitting ? 0.7 : 1,
        }}>
          {submitting ? 'Submitting...' : 'Submit'}
        </button>
      </div>
    </div>
  );
}