import React, { useEffect } from 'react'

export interface HostLogsModalProps {
  open: boolean
  host: string | null
  lines: string[]
  loading: boolean
  error: string | null
  onClose: () => void
  onRefresh: () => void
}

/** Read-only host log viewer — opens above machine detail (z-70). */
export function HostLogsModal({
  open,
  host,
  lines,
  loading,
  error,
  onClose,
  onRefresh,
}: HostLogsModalProps) {
  useEffect(() => {
    if (!open) return
    const onKey = (event: KeyboardEvent) => {
      if (event.key === 'Escape') onClose()
    }
    window.addEventListener('keydown', onKey)
    return () => window.removeEventListener('keydown', onKey)
  }, [open, onClose])

  if (!open || !host) return null

  return (
    <div
      className="fixed inset-0 z-[70] flex items-center justify-center bg-[rgba(4,5,8,0.62)] p-6"
      data-testid="host-logs-backdrop"
      onClick={(event) => {
        if (event.target === event.currentTarget) onClose()
      }}
    >
      <div
        role="dialog"
        aria-modal="true"
        aria-label={`Logs for ${host}`}
        data-testid="host-logs-modal"
        className="flex max-h-[88vh] w-full max-w-[820px] flex-col overflow-hidden rounded-[14px] border border-border bg-surface shadow-[0_30px_80px_rgba(0,0,0,0.6)]"
      >
        <div className="flex shrink-0 items-center gap-2.5 border-b border-border px-[18px] py-[15px]">
          <span className="text-[16px] font-bold">{host}</span>
          <span className="rounded-[5px] border border-border px-1.5 py-px text-[9.5px] uppercase tracking-[0.06em] text-fg-subtle">
            logs
          </span>
          <div className="ml-auto flex items-center gap-2">
            <button
              type="button"
              onClick={onRefresh}
              disabled={loading}
              aria-busy={loading || undefined}
              className="cursor-pointer rounded-[7px] border border-border-strong bg-surface-raised px-3 py-1 text-[11.5px] text-fg disabled:cursor-not-allowed disabled:opacity-50"
            >
              {loading ? 'Refreshing…' : 'Refresh'}
            </button>
            <button
              type="button"
              aria-label="Close"
              onClick={onClose}
              className="cursor-pointer border-0 bg-transparent px-1 text-[22px] leading-none text-fg-muted"
            >
              ×
            </button>
          </div>
        </div>

        <div className="min-h-0 flex-1 overflow-auto px-[18px] py-4">
          {loading && lines.length === 0 ? (
            <div className="text-[12.5px] text-fg-muted" data-testid="host-logs-loading">
              Loading logs…
            </div>
          ) : error ? (
            <div role="alert" data-testid="host-logs-error" className="text-[12.5px] text-danger">
              {error}
            </div>
          ) : lines.length === 0 ? (
            <div className="text-[12.5px] text-fg-muted" data-testid="host-logs-empty">
              No log lines recorded for this host.
            </div>
          ) : (
            <pre
              data-testid="host-logs-body"
              className="m-0 whitespace-pre-wrap break-words font-mono text-[11.5px] leading-relaxed text-fg-muted"
            >
              {lines.join('\n')}
            </pre>
          )}
        </div>
      </div>
    </div>
  )
}