// BreakAlertModal — shown when user's break exceeds the threshold.

function BreakAlertModal({ open, elapsedSec, onReturnToWork, onDismiss }) {
  if (!open) return null;

  const h = Math.floor(elapsedSec / 3600);
  const m = Math.floor((elapsedSec % 3600) / 60);
  const s = elapsedSec % 60;
  const faNum = (n) => String(n).replace(/\d/g, d => '۰۱۲۳۴۵۶۷۸۹'[d]);
  const pp = (n) => faNum(String(n).padStart(2, '0'));

  return (
    <>
      {/* backdrop */}
      <div
        style={{
          position: 'absolute', inset: 0,
          background: 'rgba(8,10,10,0.55)',
          zIndex: 30,
          animation: 'ff-fade-in 200ms ease both',
        }}
      />
      {/* centered card */}
      <div style={{
        position: 'absolute', inset: 0, zIndex: 31,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        padding: 22, direction: 'rtl',
        pointerEvents: 'none',
      }}>
        <div style={{
          background: 'var(--surface)',
          borderRadius: 22,
          padding: '24px 20px 18px',
          width: '100%', maxWidth: 320,
          pointerEvents: 'auto',
          boxShadow: '0 24px 60px rgba(0,0,0,0.35)',
          animation: 'ff-pop-in 260ms cubic-bezier(.2,.8,.2,1) both',
          textAlign: 'center',
        }}>
          {/* warning glyph */}
          <div style={{
            width: 64, height: 64, borderRadius: '50%',
            background: 'color-mix(in oklab, var(--danger) 12%, transparent)',
            color: 'var(--danger)',
            margin: '0 auto 14px',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <window.IconAlert size={34} color="currentColor" />
          </div>

          <div style={{
            fontSize: 17, fontWeight: 700, color: 'var(--ink)',
            marginBottom: 8, lineHeight: 1.35,
          }}>
            استراحت شما طولانی شده است
          </div>
          <div style={{
            fontSize: 13, color: 'var(--muted)',
            lineHeight: 1.7, marginBottom: 16,
          }}>
            بیش از یک ساعت از شروع استراحت شما گذشته است. لطفاً به کار برگردید.
          </div>

          {/* elapsed badge */}
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '8px 14px', borderRadius: 99,
            background: 'var(--icon-bg)',
            marginBottom: 14,
          }}>
            <span style={{ width: 6, height: 6, borderRadius: 99, background: 'var(--danger)' }} />
            <span style={{
              fontSize: 13, fontWeight: 600,
              fontFamily: 'JetBrains Mono, ui-monospace, monospace',
              fontVariantNumeric: 'tabular-nums',
              color: 'var(--ink)',
            }}>{pp(h)}:{pp(m)}:{pp(s)}</span>
            <span style={{ fontSize: 11, color: 'var(--muted)' }}>زمان استراحت</span>
          </div>

          {/* supervisor notification line */}
          <div style={{
            background: 'color-mix(in oklab, var(--danger) 8%, transparent)',
            border: '1px solid color-mix(in oklab, var(--danger) 25%, transparent)',
            borderRadius: 12,
            padding: '10px 12px',
            fontSize: 11.5, lineHeight: 1.55,
            color: 'var(--ink)',
            textAlign: 'right',
            display: 'flex', alignItems: 'center', gap: 10,
            marginBottom: 18,
          }}>
            <span style={{
              flexShrink: 0,
              width: 22, height: 22, borderRadius: 99,
              background: 'var(--danger)', color: '#fff',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 13, fontWeight: 700,
            }}>!</span>
            <span>
              <strong style={{ fontWeight: 700 }}>سرپرست شما</strong> از طولانی شدن استراحت مطلع شد.
            </span>
          </div>

          {/* actions */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            <button onClick={onReturnToWork} style={{
              all: 'unset', cursor: 'pointer',
              padding: '13px 16px', borderRadius: 14,
              background: 'var(--accent)', color: '#fff',
              fontSize: 14, fontWeight: 700, textAlign: 'center',
            }}>
              برگشت به کار
            </button>
            <button onClick={onDismiss} style={{
              all: 'unset', cursor: 'pointer',
              padding: '11px 16px', borderRadius: 14,
              color: 'var(--muted)', fontSize: 13, fontWeight: 600,
              textAlign: 'center',
            }}>
              متوجه شدم
            </button>
          </div>
        </div>
      </div>

      <style>{`
        @keyframes ff-fade-in {
          from { opacity: 0 } to { opacity: 1 }
        }
        @keyframes ff-pop-in {
          from { opacity: 0; transform: scale(0.9) translateY(8px) }
          to   { opacity: 1; transform: scale(1) translateY(0) }
        }
      `}</style>
    </>
  );
}

window.BreakAlertModal = BreakAlertModal;