import { useState } from 'react'
import { X, Zap, Globe, User, Lock, ArrowRight, AlertCircle } from 'lucide-react'
import { useTabStore } from '../stores/tabStore'

interface QuickConnectDialogProps {
  isOpen: boolean
  onClose: () => void
}

export default function QuickConnectDialog({ isOpen, onClose }: QuickConnectDialogProps) {
  const { addTab } = useTabStore()
  const [formData, setFormData] = useState({
    host: '',
    port: 22,
    username: '',
    password: '',
  })
  const [isConnecting, setIsConnecting] = useState(false)
  const [error, setError] = useState<string | null>(null)

  if (!isOpen) return null

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsConnecting(true)
    setError(null)

    try {
      // 快速连接只需添加标签，真正的连接由 TerminalView 处理
      // 这样可以确保每个标签独立管理自己的连接生命周期
      
      // 1. 打开新标签页，传递连接配置
      // TerminalView 会负责创建实际的 SSH 连接
      addTab({
        title: `${formData.username}@${formData.host}`,
        type: 'terminal',
        connectionConfig: {
          host: formData.host,
          port: formData.port,
          username: formData.username,
          password: formData.password || undefined,
        },
      })

      // 2. 关闭对话框
      onClose()

      // 3. 重置表单
      setFormData({
        host: '',
        port: 22,
        username: '',
        password: '',
      })
    } catch (err: unknown) {
      setError((err instanceof Error ? err.message : String(err)) || '连接失败')
    } finally {
      setIsConnecting(false)
    }
  }

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
      <div className="w-full max-w-md bg-dark-800 rounded-xl border border-dark-700 shadow-2xl animate-fade-in">
        {/* Header */}
        <div className="flex items-center justify-between p-6 border-b border-dark-700">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-accent-blue/20 rounded-lg flex items-center justify-center">
              <Zap className="w-5 h-5 text-accent-blue" />
            </div>
            <div>
              <h2 className="text-lg font-semibold text-gray-200">快速连接</h2>
              <p className="text-sm text-gray-500">临时连接到服务器</p>
            </div>
          </div>
          <button
            onClick={onClose}
            className="p-2 hover:bg-dark-700 rounded-lg text-gray-400 hover:text-gray-200 transition-colors"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        {/* Form */}
        <form onSubmit={handleSubmit} className="p-6 space-y-4">
          {/* Host and Port */}
          <div className="grid grid-cols-3 gap-3">
            <div className="col-span-2">
              <label className="block text-sm font-medium text-gray-400 mb-1">
                <Globe className="inline w-3 h-3 mr-1" />
                主机地址
              </label>
              <input
                type="text"
                required
                autoFocus
                value={formData.host}
                onChange={(e) => setFormData({ ...formData, host: e.target.value })}
                placeholder="192.168.1.1"
                className="w-full px-3 py-2 bg-dark-900 border border-dark-700 rounded-lg text-gray-200 placeholder-gray-600 focus:outline-none focus:border-accent-blue"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-400 mb-1">
                端口
              </label>
              <input
                type="number"
                value={formData.port}
                onChange={(e) => setFormData({ ...formData, port: parseInt(e.target.value) })}
                placeholder="22"
                className="w-full px-3 py-2 bg-dark-900 border border-dark-700 rounded-lg text-gray-200 focus:outline-none focus:border-accent-blue"
              />
            </div>
          </div>

          {/* Username */}
          <div>
            <label className="block text-sm font-medium text-gray-400 mb-1">
              <User className="inline w-3 h-3 mr-1" />
              用户名
            </label>
            <input
              type="text"
              required
              value={formData.username}
              onChange={(e) => setFormData({ ...formData, username: e.target.value })}
              placeholder="root"
              className="w-full px-3 py-2 bg-dark-900 border border-dark-700 rounded-lg text-gray-200 placeholder-gray-600 focus:outline-none focus:border-accent-blue"
            />
          </div>

          {/* Password */}
          <div>
            <label className="block text-sm font-medium text-gray-400 mb-1">
              <Lock className="inline w-3 h-3 mr-1" />
              密码
            </label>
            <input
              type="password"
              value={formData.password}
              onChange={(e) => setFormData({ ...formData, password: e.target.value })}
              placeholder="••••••••"
              className="w-full px-3 py-2 bg-dark-900 border border-dark-700 rounded-lg text-gray-200 placeholder-gray-600 focus:outline-none focus:border-accent-blue"
            />
          </div>

          {/* Error message */}
          {error && (
            <div className="flex items-center gap-2 p-3 bg-red-500/10 border border-red-500/30 rounded-lg text-red-400 text-sm">
              <AlertCircle className="w-4 h-4 flex-shrink-0" />
              <span>{error}</span>
            </div>
          )}

          {/* Hint */}
          <div className="p-3 bg-dark-700/50 rounded-lg">
            <p className="text-xs text-gray-500">
              快速连接不会保存会话信息。如需保存，请使用"新建会话"。
            </p>
          </div>

          {/* Actions */}
          <div className="flex justify-end gap-3 pt-4 border-t border-dark-700">
            <button
              type="button"
              onClick={onClose}
              className="px-4 py-2 text-gray-400 hover:text-gray-200 transition-colors"
            >
              取消
            </button>
            <button
              type="submit"
              disabled={isConnecting}
              className="flex items-center gap-2 px-6 py-2 bg-accent-blue hover:bg-blue-600 disabled:opacity-50 rounded-lg text-white font-medium transition-colors"
            >
              {isConnecting ? (
                '连接中...'
              ) : (
                <>
                  连接
                  <ArrowRight className="w-4 h-4" />
                </>
              )}
            </button>
          </div>
        </form>
      </div>
    </div>
  )
}