import { useState, useEffect } from 'react'
import { X, Wifi, RotateCcw } from 'lucide-react'

export interface GatewaySettings {
  host: string
  port: number
}

const DEFAULT_HOST = '127.0.0.1'
const DEFAULT_PORT = 19876

export function getGatewaySettings(): GatewaySettings {
  try {
    const host = localStorage.getItem('picobot-gateway-host') || DEFAULT_HOST
    const portStr = localStorage.getItem('picobot-gateway-port')
    const port = portStr ? parseInt(portStr, 10) : DEFAULT_PORT
    return { host, port: isNaN(port) ? DEFAULT_PORT : port }
  } catch {
    return { host: DEFAULT_HOST, port: DEFAULT_PORT }
  }
}

export function buildWsUrl(settings: GatewaySettings): string {
  return `ws://${settings.host}:${settings.port}/ws`
}

interface SettingsModalProps {
  onClose: () => void
  onSave: (settings: GatewaySettings) => void
}

export function SettingsModal({ onClose, onSave }: SettingsModalProps) {
  const [host, setHost] = useState(DEFAULT_HOST)
  const [port, setPort] = useState(String(DEFAULT_PORT))
  const [error, setError] = useState('')

  useEffect(() => {
    const settings = getGatewaySettings()
    setHost(settings.host)
    setPort(String(settings.port))
  }, [])

  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'Escape') onClose()
    }
    document.addEventListener('keydown', handleKeyDown)
    return () => document.removeEventListener('keydown', handleKeyDown)
  }, [onClose])

  const handleSave = () => {
    const trimmedHost = host.trim()
    const portNum = parseInt(port, 10)

    if (!trimmedHost) {
      setError('主机地址不能为空')
      return
    }
    if (isNaN(portNum) || portNum < 1 || portNum > 65535) {
      setError('端口号必须在 1-65535 之间')
      return
    }

    setError('')
    localStorage.setItem('picobot-gateway-host', trimmedHost)
    localStorage.setItem('picobot-gateway-port', String(portNum))
    onSave({ host: trimmedHost, port: portNum })
  }

  const handleReset = () => {
    setHost(DEFAULT_HOST)
    setPort(String(DEFAULT_PORT))
    setError('')
  }

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm animate-fade-in"
      onClick={onClose}
    >
      {/* Modal container */}
      <div
        className="relative w-[90vw] max-w-md rounded-2xl border border-[var(--border-color)] bg-[var(--bg-secondary)] shadow-2xl flex flex-col overflow-hidden animate-scale-in"
        onClick={(e) => e.stopPropagation()}
      >
        {/* Header */}
        <div className="flex items-center gap-3 shrink-0 px-6 py-4 border-b border-[var(--border-color)] bg-[var(--bg-tertiary)]/50">
          <Wifi className="h-5 w-5 text-[var(--accent-cyan)]" />
          <span className="text-lg font-semibold text-[var(--text-primary)]">连接设置</span>
          <button
            onClick={onClose}
            className="ml-auto p-2 rounded-lg text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--overlay-hover)] transition-colors"
            aria-label="关闭"
            title="关闭 (Esc)"
          >
            <X className="h-5 w-5" />
          </button>
        </div>

        {/* Body */}
        <div className="flex-1 p-6 space-y-5">
          {/* Host */}
          <div>
            <label className="block text-sm font-medium text-[var(--text-secondary)] mb-1.5">
              主机地址
            </label>
            <input
              type="text"
              value={host}
              onChange={(e) => { setHost(e.target.value); setError('') }}
              placeholder="127.0.0.1"
              className="w-full px-3 py-2.5 rounded-xl bg-[var(--bg-tertiary)] border border-[var(--border-color)] text-[var(--text-primary)] text-sm placeholder:text-[var(--text-muted)] focus:outline-none focus:border-[var(--accent-cyan)] focus:ring-2 focus:ring-[var(--focus-ring)] transition-colors"
            />
          </div>

          {/* Port */}
          <div>
            <label className="block text-sm font-medium text-[var(--text-secondary)] mb-1.5">
              端口号
            </label>
            <input
              type="number"
              value={port}
              onChange={(e) => { setPort(e.target.value); setError('') }}
              placeholder="19876"
              min={1}
              max={65535}
              className="w-full px-3 py-2.5 rounded-xl bg-[var(--bg-tertiary)] border border-[var(--border-color)] text-[var(--text-primary)] text-sm placeholder:text-[var(--text-muted)] focus:outline-none focus:border-[var(--accent-cyan)] focus:ring-2 focus:ring-[var(--focus-ring)] transition-colors"
            />
          </div>

          {/* Error */}
          {error && (
            <div className="text-sm text-red-400 bg-red-500/10 border border-red-500/20 rounded-lg px-3 py-2">
              {error}
            </div>
          )}

          {/* Current URL preview */}
          <div className="text-xs text-[var(--text-muted)] bg-[var(--overlay-dim)] rounded-lg px-3 py-2 font-mono">
            ws://{host.trim() || '...'}:{port || '...'}/ws
          </div>
        </div>

        {/* Footer */}
        <div className="shrink-0 px-6 py-3 border-t border-[var(--border-color)] bg-[var(--bg-tertiary)]/30 flex items-center gap-3">
          <button
            onClick={handleReset}
            className="flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm text-[var(--text-muted)] hover:text-[var(--text-secondary)] hover:bg-[var(--overlay-hover)] transition-colors"
          >
            <RotateCcw className="h-3.5 w-3.5" />
            重置默认
          </button>
          <div className="flex-1" />
          <button
            onClick={onClose}
            className="px-4 py-2 rounded-lg text-sm text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--overlay-hover)] transition-colors"
          >
            取消
          </button>
          <button
            onClick={handleSave}
            className="px-5 py-2 rounded-lg text-sm font-medium text-white bg-[var(--accent-cyan)]/20 border border-[var(--accent-cyan)]/30 hover:bg-[var(--accent-cyan)]/30 hover:border-[var(--accent-cyan)]/50 transition-all"
          >
            保存并重连
          </button>
        </div>
      </div>
    </div>
  )
}
