import { useEffect, useRef, useState } from 'react'
import { MachineStatus, titleOf } from './api'
import { useEscape } from './ui'
import { accentFor } from './accents'

const hostOf = (url: string) => { try { return new URL(url).hostname } catch { return url } }

// The host picker at the top of the rail. The hub is always first; managed machines follow
// with their live status. Picking one re-points the whole console at it.
export default function MachineSwitcher({ hub, hubAddr, current, machines, onChange, onManage }: {
  hub: string; hubAddr?: string; current: string | null; machines: MachineStatus[]; onChange: (name: string | null) => void; onManage: () => void
}) {
  const [open, setOpen] = useState(false)
  const box = useRef<HTMLDivElement>(null)
  useEffect(() => {
    const h = (e: MouseEvent) => { if (box.current && !box.current.contains(e.target as Node)) setOpen(false) }
    window.addEventListener('click', h)
    return () => window.removeEventListener('click', h)
  }, [])
  useEscape(() => setOpen(false), open)
  const cur = current ? machines.find((m) => m.name === current) : null
  const title = (name: string | null) => titleOf(name, machines, hub)
  const dotFor = (m?: MachineStatus | null) => (!m ? 'ok' : m.online ? 'ok' : 'bad')
  return (
    <div className="mswitch" ref={box}>
      <button className="mswitch-btn" onClick={() => setOpen(!open)} title="switch machine">
        <span className={'dot ' + (current ? dotFor(cur) : 'ok')} />
        <span className="mname">{title(current)}</span>
        <span className="muted small">{current ? (cur?.online ? 'remote' : 'offline') : 'this host'}</span>
        <span className="chev">▾</span>
      </button>
      {open && (
        <div className="mmenu">
          <button className={'mitem' + (!current ? ' on' : '')} onClick={() => { setOpen(false); onChange(null) }}>
            <span className="dot ok" /><span className="mname" style={{ color: accentFor(hub) }}>{hub}</span><span className="muted small mono">{hubAddr || 'this host'}</span>
          </button>
          {machines.map((m) => (
            <button key={m.name} className={'mitem' + (current === m.name ? ' on' : '')} onClick={() => { setOpen(false); onChange(m.name) }} title={m.error || (m.host && m.host !== m.name ? `${m.url} · added as ${m.name}` : m.url)}>
              <span className={'dot ' + dotFor(m)} /><span className="mname" style={{ color: accentFor(m.name) }}>{m.host || m.name}</span><span className="muted small mono">{hostOf(m.url)}{m.online ? '' : ' · offline'}</span>
            </button>
          ))}
          <button className="mitem manage" onClick={() => { setOpen(false); onManage() }}>+ manage machines…</button>
        </div>
      )}
    </div>
  )
}