import { useCallback } from 'react';
import type { AppRegistryMeta } from '../../AppRegistry';
import { TerminalSquare, Monitor, Columns2, PenLine, Sparkles } from 'lucide-react';
import { usePanelChannel } from 'hooks/usePanelChannel';
import { TerminalWrapper } from './TerminalWrapper';
import { HostTerminalWrapper } from './HostTerminalWrapper';
import { CommandTerminalWrapper } from './CommandTerminalWrapper';
import { TerminalHeader, HostTerminalHeader, TmuxHeader, NvimHeader, ClaudeCodeHeader } from './Headers';

export { TerminalView, type TerminalViewProps, type TerminalConnectionState } from './Terminal';

const TmuxWrapper = ({ panelId }: { panelId: string }) => (
  <CommandTerminalWrapper panelId={panelId} command="tmux" statePrefix="tmux" />
);

const NvimWrapper = ({ panelId }: { panelId: string }) => (
  <CommandTerminalWrapper panelId={panelId} command="nvim" statePrefix="nvim" />
);

const ClaudeCodeWrapper = ({ panelId }: { panelId: string }) => {
  const [, setPreviewRefresh] = usePanelChannel<number>('preview:refresh', 0);
  const [, setFilesRefresh] = usePanelChannel<number>('files:refresh-signal', 0);

  const onPanelRefresh = useCallback(() => {
    setPreviewRefresh(Date.now());
    setFilesRefresh(Date.now());
  }, [setPreviewRefresh, setFilesRefresh]);

  return (
    <CommandTerminalWrapper
      panelId={panelId}
      command="claude --dangerously-skip-permissions"
      statePrefix="claude-code"
      onPanelRefresh={onPanelRefresh}
    />
  );
};

export const appRegistryMetas: AppRegistryMeta[] = [
  {
    key: 'officerdev/terminal',
    name: 'Terminal',
    icon: TerminalSquare,
    component: TerminalWrapper,
    header: TerminalHeader,
  },
  {
    key: 'officerdev/terminal-host',
    name: 'Host Terminal',
    icon: Monitor,
    component: HostTerminalWrapper,
    header: HostTerminalHeader,
    availableOnPanel: false,
  },
  {
    key: 'officerdev/tmux',
    name: 'Tmux',
    icon: Columns2,
    component: TmuxWrapper,
    header: TmuxHeader,
  },
  {
    key: 'officerdev/nvim',
    name: 'Neovim',
    icon: PenLine,
    component: NvimWrapper,
    header: NvimHeader,
  },
  {
    key: 'officerdev/claude-code',
    name: 'Claude Code',
    icon: Sparkles,
    component: ClaudeCodeWrapper,
    header: ClaudeCodeHeader,
  },
];
