import { useEffect, useRef, useState } from 'react'
import { Terminal } from '@xterm/xterm'
import { FitAddon } from '@xterm/addon-fit'
import '@xterm/xterm/css/xterm.css'
import { useSettingsStore } from '../stores/settings'
import { API_KEY } from '../config'
import api from '../api/client'

export default function TerminalModal({ agentId, agentName, onClose }) {
  const termRef = useRef(null)
  const xtermRef = useRef(null)
  const fitRef = useRef(null)
  const wsRef = useRef(null)
  const [status, setStatus] = useState('connecting') // connecting | open | error | closed

  const backendHost = useSettingsStore.getState().getBackendHost()
  // JWT-Token bevorzugen (Browser ist per Login authentifiziert), API-Key als Fallback
  const jwtToken = api.getToken()
  const apiKey = API_KEY

  useEffect(() => {
    if (!termRef.current) return

    // xterm initialisieren
    const term = new Terminal({
      theme: {
        background: '#0d1117',
        foreground: '#e6edf3',
        cursor: '#58a6ff',
        selectionBackground: '#264f78',
        black: '#0d1117',
        red: '#ff7b72',
        green: '#3fb950',
        yellow: '#d29922',
        blue: '#58a6ff',
        magenta: '#bc8cff',
        cyan: '#39c5cf',
        white: '#e6edf3',
      },
      fontFamily: '"Cascadia Code", "JetBrains Mono", "Fira Code", monospace',
      fontSize: 13,
      lineHeight: 1.3,
      cursorBlink: true,
      cursorStyle: 'block',
      scrollback: 5000,
      allowProposedApi: true,
    })

    const fitAddon = new FitAddon()
    term.loadAddon(fitAddon)
    term.open(termRef.current)

    setTimeout(() => {
      fitAddon.fit()
    }, 50)

    xtermRef.current = term
    fitRef.current = fitAddon

    // WebSocket verbinden — ueber Nginx-Proxy (gleicher Origin, kein Zertifikatsproblem)
    const cols = term.cols || 220
    const rows = term.rows || 50
    const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
    // JWT bevorzugen, API-Key als Fallback (API-Key nur wenn konfiguriert)
    const authParam = jwtToken
      ? `token=${encodeURIComponent(jwtToken)}`
      : apiKey
        ? `api_key=${encodeURIComponent(apiKey)}`
        : ''
    const wsUrl = `${wsProtocol}//${window.location.host}/api/v1/agents/${agentId}/terminal?cols=${cols}&rows=${rows}&${authParam}`

    const ws = new WebSocket(wsUrl)
    ws.binaryType = 'arraybuffer'
    wsRef.current = ws

    ws.onopen = () => {
      setStatus('open')
      term.write('\r\n\x1b[32m Verbunden mit ' + (agentName || agentId) + '\x1b[0m\r\n\r\n')
    }

    ws.onmessage = (e) => {
      if (e.data instanceof ArrayBuffer) {
        term.write(new Uint8Array(e.data))
      } else if (typeof e.data === 'string') {
        term.write(e.data)
      }
    }

    ws.onerror = () => {
      setStatus('error')
      term.write('\r\n\x1b[31mVerbindungsfehler\x1b[0m\r\n')
    }

    ws.onclose = () => {
      setStatus('closed')
      term.write('\r\n\x1b[33mVerbindung getrennt\x1b[0m\r\n')
    }

    // Tastatureingaben -> WebSocket
    term.onData((data) => {
      if (ws.readyState === WebSocket.OPEN) {
        const encoder = new TextEncoder()
        ws.send(encoder.encode(data))
      }
    })

    // Resize
    const resizeObserver = new ResizeObserver(() => {
      try {
        fitAddon.fit()
        if (ws.readyState === WebSocket.OPEN) {
          ws.send(JSON.stringify({ type: 'resize', cols: term.cols, rows: term.rows }))
        }
      } catch (_) {}
    })
    resizeObserver.observe(termRef.current)

    return () => {
      resizeObserver.disconnect()
      ws.close()
      term.dispose()
    }
  }, [agentId])

  const statusColor = {
    connecting: 'text-yellow-400',
    open: 'text-green-400',
    error: 'text-red-400',
    closed: 'text-gray-500',
  }[status]

  const statusLabel = {
    connecting: 'Verbinde...',
    open: 'Verbunden',
    error: 'Fehler',
    closed: 'Getrennt',
  }[status]

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm">
      <div className="w-[90vw] max-w-6xl bg-[#0d1117] rounded-xl border border-gray-700/60 shadow-2xl flex flex-col"
           style={{ height: '80vh' }}>

        {/* Header */}
        <div className="flex items-center gap-3 px-4 py-2.5 border-b border-gray-700/60 bg-[#161b22] rounded-t-xl">
          <div className="flex gap-1.5">
            <button onClick={onClose}
              className="w-3 h-3 rounded-full bg-red-500 hover:bg-red-400 transition-colors flex items-center justify-center group">
              <span className="text-[8px] text-red-900 opacity-0 group-hover:opacity-100 font-bold">✕</span>
            </button>
            <div className="w-3 h-3 rounded-full bg-yellow-500/40" />
            <div className="w-3 h-3 rounded-full bg-green-500/40" />
          </div>

          <div className="flex-1 text-center">
            <span className="text-sm font-mono text-gray-300">
              root@{agentName || agentId}
            </span>
          </div>

          <div className="flex items-center gap-2">
            <span className={`text-xs ${statusColor}`}>● {statusLabel}</span>
          </div>
        </div>

        {/* Terminal */}
        <div ref={termRef} className="flex-1 p-2 min-h-0" style={{ overflow: 'hidden' }} />
      </div>
    </div>
  )
}
