'use client';
/**
 * SseStatusBar — SSE 连接状态指示（断线重连 UI）
 * "连接断开重连中1/5…" / "重连失败任务后台仍在,可刷新"
 */
import { SseConnectionStatus } from '@/lib/sse';
import { clsx } from 'clsx';

interface SseStatusBarProps {
  status: SseConnectionStatus;
  attempt?: number;
}

export function SseStatusBar({ status, attempt = 0 }: SseStatusBarProps) {
  if (status === 'connected' || status === 'closed') return null;

  const messages: Record<SseConnectionStatus, string> = {
    connecting: '正在连接…',
    reconnecting: `连接断开，重连中 ${attempt}/5…`,
    failed: '重连失败，任务后台仍在运行，刷新页面可继续',
    connected: '',
    closed: '',
  };

  return (
    <div
      role="status"
      aria-live="assertive"
      className={clsx(
        'px-4 py-2 text-sm text-center',
        status === 'failed'
          ? 'bg-red-50 text-status-error'
          : 'bg-yellow-50 text-status-warning'
      )}
    >
      {messages[status]}
      {status === 'failed' && (
        <button
          onClick={() => window.location.reload()}
          aria-label="刷新页面"
          className="ml-2 underline hover:no-underline"
        >
          刷新
        </button>
      )}
    </div>
  );
}
