import { TerminalSquare, Monitor, Columns2, PenLine, Sparkles, Circle, Loader2 } from 'lucide-react';
import { useWorkspace } from '../../components/Workspace';
import { useGlobal } from 'hooks/useGlobal';
import type { TerminalConnectionState } from './Terminal';

const ConnectionIndicator = ({ panelId }: { panelId: string }) => {
  const [state] = useGlobal<TerminalConnectionState>(`terminal-conn-${panelId}`, 'disconnected');

  if (state === 'connected') {
    return <Circle className="h-2 w-2 shrink-0 fill-emerald-500 text-emerald-500" />;
  }

  if (state === 'reconnecting') {
    return <Loader2 className="h-3 w-3 shrink-0 text-yellow-500 animate-spin" />;
  }

  return <Circle className="h-2 w-2 shrink-0 fill-red-500 text-red-500" />;
};

export const TerminalHeader = ({ panelId }: { panelId: string }) => {
  const { cwd } = useWorkspace();

  return (
    <>
      <TerminalSquare className="h-3.5 w-3.5 shrink-0" />
      <span className="text-xs font-medium shrink-0">Terminal</span>
      <ConnectionIndicator panelId={panelId} />
      <span className="text-[10px] font-mono truncate opacity-60">{cwd}</span>
    </>
  );
};

export const HostTerminalHeader = ({ panelId }: { panelId: string }) => {
  const { cwd } = useWorkspace();
  return (
    <>
      <Monitor className="h-3.5 w-3.5 shrink-0" />
      <span className="text-xs font-medium shrink-0">Terminal</span>
      <ConnectionIndicator panelId={panelId} />
      <span className="text-[10px] font-mono truncate opacity-60">{cwd}</span>
    </>
  );
};

export const TmuxHeader = ({ panelId }: { panelId: string }) => {
  const { cwd } = useWorkspace();
  return (
    <>
      <Columns2 className="h-3.5 w-3.5 shrink-0" />
      <span className="text-xs font-medium shrink-0">Tmux</span>
      <ConnectionIndicator panelId={panelId} />
      <span className="text-[10px] font-mono truncate opacity-60">{cwd}</span>
    </>
  );
};

export const NvimHeader = ({ panelId }: { panelId: string }) => {
  const { cwd } = useWorkspace();
  return (
    <>
      <PenLine className="h-3.5 w-3.5 shrink-0" />
      <span className="text-xs font-medium shrink-0">Neovim</span>
      <ConnectionIndicator panelId={panelId} />
      <span className="text-[10px] font-mono truncate opacity-60">{cwd}</span>
    </>
  );
};

export const ClaudeCodeHeader = ({ panelId }: { panelId: string }) => {
  const { cwd } = useWorkspace();
  return (
    <>
      <Sparkles className="h-3.5 w-3.5 shrink-0" />
      <span className="text-xs font-medium shrink-0">Claude Code</span>
      <ConnectionIndicator panelId={panelId} />
      <span className="text-[10px] font-mono truncate opacity-60">{cwd}</span>
    </>
  );
};
