import { useEffect, useRef } from 'react';
import { Terminal } from '@xterm/xterm';
import { FitAddon } from '@xterm/addon-fit';
import '@xterm/xterm/css/xterm.css';
import { ChevronLeft, Radio, RotateCcw } from 'lucide-react';
import { useWs } from '../ws';

interface Props { onBack: () => void; }

export default function SerialConsolePage({ onBack }: Props) {
  const containerRef = useRef<HTMLDivElement>(null);
  const termRef      = useRef<Terminal | null>(null);
  const fitRef       = useRef<FitAddon | null>(null);
  const lineBuffer   = useRef('');
  const { status, send, subscribe } = useWs();

  // Keep a stable ref to `send` so the xterm onData closure never goes stale
  const sendRef = useRef(send);
  useEffect(() => { sendRef.current = send; }, [send]);

  // Initialize xterm once on mount
  useEffect(() => {
    const el = containerRef.current;
    if (!el) return;

    const term = new Terminal({
      cursorBlink: true,
      fontSize: 14,
      fontFamily: '"Cascadia Code","Fira Code",Menlo,Monaco,"Courier New",monospace',
      theme: {
        background:          '#0a0a0a',
        foreground:          '#d4d4d4',
        cursor:              '#d4d4d4',
        selectionBackground: '#264f78',
      },
      scrollback: 5000,
      convertEol: true,
    });

    const fit = new FitAddon();
    term.loadAddon(fit);
    term.open(el);
    fit.fit();
    termRef.current = term;
    fitRef.current  = fit;

    term.writeln('\x1b[2m── Meatloaf Serial Console ──\x1b[0m');
    term.writeln('');

    term.onData((data) => {
      for (const char of data) {
        if (char === '\r' || char === '\n') {
          term.write('\r\n');
          sendRef.current(lineBuffer.current + '\r');
          lineBuffer.current = '';
        } else if (char === '\x7f' || char === '\b') {
          if (lineBuffer.current.length > 0) {
            lineBuffer.current = lineBuffer.current.slice(0, -1);
            term.write('\b \b');
          }
        } else if (char === '\x03') {
          lineBuffer.current = '';
          term.write('^C\r\n');
        } else if (char >= ' ') {
          lineBuffer.current += char;
          term.write(char);
        }
      }
    });

    const onResize = () => fitRef.current?.fit();
    window.addEventListener('resize', onResize);

    return () => {
      window.removeEventListener('resize', onResize);
      term.dispose();
      termRef.current = null;
      fitRef.current  = null;
    };
  }, []);

  // Forward all incoming WS messages to the terminal
  useEffect(() => {
    return subscribe((msg) => {
      termRef.current?.write(msg);
    });
  }, [subscribe]);

  const statusColor =
    status === 'connected'  ? 'text-green-400' :
    status === 'connecting' ? 'text-amber-400' : 'text-neutral-500';

  const statusLabel =
    status === 'connected'  ? 'Connected'   :
    status === 'connecting' ? 'Connecting…' : 'Disconnected';

  return (
    <div className="fixed inset-0 bg-[#0a0a0a] z-40 flex flex-col">

      {/* Header */}
      <div
        className="flex-none flex items-center gap-2 px-3 py-2 bg-neutral-900 border-b border-neutral-800"
        style={{ paddingTop: 'max(0.5rem, env(safe-area-inset-top))' }}
      >
        <button
          onClick={onBack}
          className="p-1.5 rounded hover:bg-neutral-800 text-neutral-400 hover:text-white transition"
          title="Back"
        >
          <ChevronLeft className="w-5 h-5" />
        </button>

        <span className="text-sm font-medium text-neutral-200">Serial Console</span>
        <div className="flex-1" />

        <div className={`flex items-center gap-1.5 text-xs ${statusColor}`}>
          <Radio className="w-3.5 h-3.5" />
          <span className="hidden sm:inline">{statusLabel}</span>
        </div>

        <button
          onClick={() => termRef.current?.clear()}
          className="p-1.5 rounded hover:bg-neutral-800 text-neutral-400 hover:text-neutral-200 transition"
          title="Clear terminal"
        >
          <RotateCcw className="w-4 h-4" />
        </button>
      </div>

      {/* Terminal */}
      <div
        ref={containerRef}
        className="flex-1 min-h-0"
        style={{ paddingBottom: 'env(safe-area-inset-bottom)' }}
      />
    </div>
  );
}