/**
 * ConnectionPanel - SFTP 连接状态面板
 * 
 * 显示连接状态或连接选择界面
 */

import { Monitor, AlertCircle, Loader2 } from 'lucide-react'
import { ConnectionSelector } from './ConnectionSelector'
import type { Session } from '../../../shared/types/session.types'

interface ConnectionPanelProps {
  isConnected: boolean
  isConnecting: boolean
  error: string | null
  sessions: Session[]
  showSelector: boolean
  onConnect: (sessionId: string) => void
  onShowSelector: () => void
  onCloseSelector: () => void
}

export function ConnectionPanel({
  isConnected,
  isConnecting,
  error,
  sessions,
  showSelector,
  onConnect,
  onShowSelector,
  onCloseSelector,
}: ConnectionPanelProps) {
  // Connected State
  if (isConnected) {
    return (
      <div className="flex items-center gap-2 px-4 py-2 bg-green-500/10 border-b border-green-500/20">
        <Monitor className="w-4 h-4 text-green-400" />
        <span className="text-sm text-green-400">已连接</span>
      </div>
    )
  }

  // Connecting State
  if (isConnecting) {
    return (
      <div className="flex items-center gap-2 px-4 py-2 bg-accent-blue/10 border-b border-accent-blue/20">
        <Loader2 className="w-4 h-4 text-accent-blue animate-spin" />
        <span className="text-sm text-accent-blue">连接中...</span>
      </div>
    )
  }

  // Error State
  if (error) {
    return (
      <div className="flex items-center justify-between px-4 py-2 bg-red-500/10 border-b border-red-500/20">
        <div className="flex items-center gap-2">
          <AlertCircle className="w-4 h-4 text-red-400" />
          <span className="text-sm text-red-400">{error}</span>
        </div>
        <button
          onClick={onShowSelector}
          className="px-3 py-1 bg-dark-700 hover:bg-dark-600 rounded text-sm transition-colors"
        >
          重新连接
        </button>
      </div>
    )
  }

  // Disconnected State
  return (
    <>
      <div className="flex items-center justify-between px-4 py-2 bg-dark-800 border-b border-dark-700/30">
        <span className="text-sm text-gray-400">未连接</span>
        <button
          onClick={onShowSelector}
          className="px-3 py-1.5 bg-accent-blue hover:bg-blue-600 rounded text-sm font-medium transition-colors"
        >
          选择服务器
        </button>
      </div>
      
      {showSelector && (
        <ConnectionSelector
          sessions={sessions}
          onSelect={onConnect}
          onClose={onCloseSelector}
        />
      )}
    </>
  )
}