'use client'

import type { ConnectionState } from '@/hooks/useRelay'

interface SystemStatusPanelProps {
  connectionState: ConnectionState
  isLobsterOnline: boolean
  sessionId: string
  messageCount: number
  onClose: () => void
}

const stateLabels: Record<ConnectionState, string> = {
  connecting: '连接中...',
  connected: '已连接',
  disconnected: '已断开',
  error: '连接错误',
}

const stateColors: Record<ConnectionState, string> = {
  connecting: 'text-yellow-600',
  connected: 'text-green-600',
  disconnected: 'text-slate-500',
  error: 'text-red-600',
}

export function SystemStatusPanel({
  connectionState,
  isLobsterOnline,
  sessionId,
  messageCount,
  onClose,
}: SystemStatusPanelProps) {
  return (
    <div className="border-b border-slate-200 bg-slate-50 px-4 py-3">
      <div className="flex items-center justify-between mb-2">
        <span className="text-xs font-semibold uppercase tracking-wider text-slate-400">
          系统状态
        </span>
        <button
          type="button"
          onClick={onClose}
          className="text-slate-400 hover:text-slate-600 transition-colors"
          aria-label="关闭状态面板"
        >
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="h-4 w-4">
            <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
          </svg>
        </button>
      </div>
      <div className="grid grid-cols-2 gap-x-4 gap-y-1.5 text-xs">
        <div className="text-slate-500">WebSocket</div>
        <div className={stateColors[connectionState]}>
          {stateLabels[connectionState]}
        </div>

        <div className="text-slate-500">Lobster</div>
        <div className={isLobsterOnline ? 'text-green-600' : 'text-slate-500'}>
          {isLobsterOnline ? '在线' : '离线'}
        </div>

        <div className="text-slate-500">Session ID</div>
        <div className="truncate text-slate-700 font-mono" title={sessionId}>
          {sessionId}
        </div>

        <div className="text-slate-500">消息数量</div>
        <div className="text-slate-700">{messageCount}</div>
      </div>
    </div>
  )
}
