import { Loader2, Check, X, CircleHelp } from 'lucide-react'
import { useEffect, useState } from 'react'

import { type RemoteServer, testCustomRemoteServerConnection } from '../api/remoteServers'

interface Props {
  server?: RemoteServer
  onSubmit: (data: Partial<RemoteServer>) => Promise<void>
  onCancel: () => void
}

export default function RemoteServerForm({ server, onSubmit, onCancel }: Props) {
  const [formData, setFormData] = useState({
    name: server?.name || '',
    provider: server?.provider || 'generic',
    host: server?.host || '',
    port: server?.port ?? 22,
    username: server?.username || '',
    enabled: server?.enabled ?? true,
  })

  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [testStatus, setTestStatus] = useState<'idle' | 'testing' | 'success' | 'error'>('idle')

  useEffect(() => {
    setFormData({
      name: server?.name || '',
      provider: server?.provider || 'generic',
      host: server?.host || '',
      port: server?.port ?? 22,
      username: server?.username || '',
      enabled: server?.enabled ?? true,
    })
  }, [server])

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)
    setError(null)
    try {
      await onSubmit(formData)
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to save server')
    } finally {
      setLoading(false)
    }
  }

  const handleTestConnection = async () => {
    if (!formData.host || !formData.port) return
    setTestStatus('testing')
    setError(null)
    try {
      const result = await testCustomRemoteServerConnection(formData.host, formData.port)
      if (result.reachable) {
        setTestStatus('success')
        setTimeout(() => setTestStatus('idle'), 3000)
      } else {
        setTestStatus('error')
        setError(`Connection failed: ${result.error || 'Unknown error'}`)
      }
    } catch {
      setTestStatus('error')
      setError('Connection failed')
    }
  }

  return (
    <>
      {/* Layer 1: Background overlay (z-40) */}
      <div className="fixed inset-0 bg-black/50 z-40" onClick={onCancel} />

      {/* Layer 2: Form container (z-50, pointer-events-none) */}
      <div className="fixed inset-0 flex items-center justify-center p-4 pointer-events-none z-50">

        {/* Layer 3: Form content (pointer-events-auto) */}
        <div className="bg-dark-card rounded-lg border border-gray-800 max-w-lg w-full pointer-events-auto">
        <div className="p-6 border-b border-gray-800">
          <h2 className="text-2xl font-bold text-white">
            {server ? 'Edit Remote Server' : 'Add Remote Server'}
          </h2>
        </div>

        <form onSubmit={handleSubmit} className="p-6 space-y-6 pointer-events-auto">
          {error && (
            <div className="bg-red-900/20 border border-red-500 text-red-400 px-4 py-3 rounded">
              {error}
            </div>
          )}

          <div>
            <label className="block text-sm font-medium text-gray-300 mb-2">Name</label>
            <input
              type="text"
              required
              value={formData.name}
              onChange={e => setFormData({ ...formData, name: e.target.value })}
              placeholder="My Production Server"
              className="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-gray-300 mb-2">Provider</label>
              <select
                value={formData.provider}
                onChange={e => {
                  const newProvider = e.target.value;
                  setFormData({
                    ...formData,
                    provider: newProvider,
                    // Set default port for Docker
                    port: newProvider === 'docker' ? 2375 : (newProvider === 'generic' ? 22 : formData.port)
                  })
                }}
                className="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
              >
                <option value="generic">Generic</option>
                <option value="docker">Docker</option>
                <option value="kubernetes">Kubernetes</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-300 mb-2">Host</label>
              <input
                type="text"
                required
                value={formData.host}
                onChange={e => setFormData({ ...formData, host: e.target.value })}
                placeholder="192.168.1.100"
                className="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
              />
            </div>
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-gray-300 mb-2">Port</label>
              <input
                type="number"
                min={1}
                max={65535}
                value={formData.port}
                onChange={e => {
                  const v = parseInt(e.target.value)
                  setFormData({ ...formData, port: Number.isNaN(v) ? 0 : v })
                }}
                className="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
              />
            </div>
            {formData.provider !== 'docker' && (
              <div>
                <label className="block text-sm font-medium text-gray-300 mb-2">Username</label>
                <input
                  type="text"
                  value={formData.username}
                  onChange={e => setFormData({ ...formData, username: e.target.value })}
                  className="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
                />
              </div>
            )}
          </div>

          <label className="flex items-center gap-3">
            <input
              type="checkbox"
              checked={formData.enabled}
              onChange={e => setFormData({ ...formData, enabled: e.target.checked })}
              className="w-4 h-4 text-blue-600 bg-gray-900 border-gray-700 rounded focus:ring-blue-500"
            />
            <span className="text-sm text-gray-300">Enabled</span>
          </label>

          <div className="flex gap-3 justify-end pt-4 border-t border-gray-800">
            <button
              type="button"
              onClick={handleTestConnection}
              disabled={testStatus === 'testing' || !formData.host || !formData.port}
              className={`px-4 py-2 rounded-lg font-medium transition-colors flex items-center gap-2 mr-auto ${
                testStatus === 'success' ? 'bg-green-600 text-white' :
                testStatus === 'error' ? 'bg-red-600 text-white' :
                'bg-gray-700 hover:bg-gray-600 text-white'
              }`}
            >
              {testStatus === 'testing' ? <Loader2 className="w-4 h-4 animate-spin" /> :
               testStatus === 'success' ? <Check className="w-4 h-4" /> :
               testStatus === 'error' ? <X className="w-4 h-4" /> :
               <CircleHelp className="w-4 h-4" />}
              Test Connection
            </button>
            <button
              type="button"
              onClick={onCancel}
              disabled={loading}
              className="px-6 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded-lg font-medium transition-colors disabled:opacity-50"
            >
              Cancel
            </button>
            <button
              type="submit"
              disabled={loading}
              className="px-6 py-2 bg-blue-active hover:bg-blue-hover text-white rounded-lg font-medium transition-colors disabled:opacity-50"
            >
              {loading ? 'Saving...' : (server ? 'Update' : 'Create')}
            </button>
          </div>
        </form>
        </div>
      </div>
    </>
  )
}