NetMesh/components/terminal/TerminalComposeBar.tsx

/**
 * Terminal Compose Bar
 * An immersive prompt bar below the terminal with a quick-snippet strip,
 * user-resizable height, and terminal-matched chrome.
 */
import { GripHorizontal, Pin, Plus, Radio, Search, X } from 'lucide-react';
import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useComposeBarHeight } from '../../application/state/useComposeBarHeight';
import { useComposeBarPinnedSnippets } from '../../application/state/useComposeBarPinnedSnippets';
import { useI18n } from '../../application/i18n/I18nProvider';
import { resolveSnippetCommand } from '../SnippetExecutionProvider';
import { Snippet } from '../../types';
import { cn } from '../../lib/utils';
import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
import {
  buildSnippetIdKey,
  filterComposeBarSnippets,
  mergeComposeBarSnippetMap,
  resolveComposeBarDefaultSeedIds,
} from './composeBarHelpers';

const SNIPPET_STRIP_HEIGHT = 30;
const RESIZE_HANDLE_HEIGHT = 6;

type ComposeBarTheme = {
  resolvedBg: string;
  resolvedFg: string;
  borderColor: string;
  mutedFg: string;
  hoverBg: string;
  chipBg: string;
  chipHoverBg: string;
};

function buildTheme(themeColors?: { background: string; foreground: string }): ComposeBarTheme {
  const bg = themeColors?.background ?? '#0a0a0a';
  const fg = themeColors?.foreground ?? '#d4d4d4';
  const resolvedBg = 'var(--terminal-ui-bg, ' + bg + ')';
  const resolvedFg = 'var(--terminal-ui-fg, ' + fg + ')';
  return {
    resolvedBg,
    resolvedFg,
    borderColor: `color-mix(in srgb, ${resolvedFg} 8%, ${resolvedBg} 92%)`,
    mutedFg: `color-mix(in srgb, ${resolvedFg} 55%, ${resolvedBg} 45%)`,
    hoverBg: `color-mix(in srgb, ${resolvedFg} 10%, ${resolvedBg} 90%)`,
    chipBg: `color-mix(in srgb, ${resolvedFg} 6%, ${resolvedBg} 94%)`,
    chipHoverBg: `color-mix(in srgb, ${resolvedFg} 12%, ${resolvedBg} 88%)`,
  };
}

interface ComposeBarSnippetChipProps {
  snippet: Snippet;
  theme: ComposeBarTheme;
  onActivate: (snippet: Snippet, sendImmediately: boolean) => void;
  onUnpin: (id: string) => void;
  unpinLabel: string;
  clickHint: string;
}

const ComposeBarSnippetChip = memo(function ComposeBarSnippetChip({
  snippet,
  theme,
  onActivate,
  onUnpin,
  unpinLabel,
  clickHint,
}: ComposeBarSnippetChipProps) {
  const commandPreview = snippet.command.split('\n')[0];

  return (
    <div
      className="group/chip flex items-stretch h-6 max-w-[168px] rounded overflow-hidden flex-shrink-0 transition-colors duration-150"
      style={{ backgroundColor: theme.chipBg, color: theme.resolvedFg }}
      onMouseEnter={(e) => {
        e.currentTarget.style.backgroundColor = theme.chipHoverBg;
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.backgroundColor = theme.chipBg;
      }}
    >
      <Tooltip>
        <TooltipTrigger asChild>
          <button
            type="button"
            className="flex-1 min-w-0 px-2 text-[10px] font-mono truncate text-left"
            onClick={(e) => { void onActivate(snippet, e.shiftKey); }}
          >
            {snippet.label}
          </button>
        </TooltipTrigger>
        <TooltipContent side="top" className="max-w-xs">
          <p className="font-medium">{snippet.label}</p>
          <p className="text-[10px] opacity-80 mt-0.5 font-mono line-clamp-2">
            {commandPreview}
          </p>
          <p className="text-[10px] opacity-60 mt-1">{clickHint}</p>
        </TooltipContent>
      </Tooltip>
      <button
        type="button"
        className={cn(
          'flex items-center justify-center w-5 shrink-0',
          'opacity-40 hover:opacity-100 group-hover/chip:opacity-70',
          'transition-opacity duration-150',
        )}
        style={{ color: theme.mutedFg }}
        aria-label={unpinLabel}
        onClick={(e) => {
          e.stopPropagation();
          onUnpin(snippet.id);
        }}
      >
        <X size={9} />
      </button>
    </div>
  );
});

interface ComposeBarSnippetManagePopoverProps {
  snippets: Snippet[];
  pinnedCount: number;
  theme: ComposeBarTheme;
  isPinned: (id: string) => boolean;
  onTogglePin: (id: string) => void;
  manageLabel: string;
  searchPlaceholder: string;
  noSnippetsLabel: string;
  noMatchingLabel: string;
  pinnedCountLabel: string;
}

const ComposeBarSnippetManagePopover = memo(function ComposeBarSnippetManagePopover({
  snippets,
  pinnedCount,
  theme,
  isPinned,
  onTogglePin,
  manageLabel,
  searchPlaceholder,
  noSnippetsLabel,
  noMatchingLabel,
  pinnedCountLabel,
}: ComposeBarSnippetManagePopoverProps) {
  const [open, setOpen] = useState(false);
  const [search, setSearch] = useState('');

  const filteredSnippets = useMemo(
    () => filterComposeBarSnippets(snippets, search),
    [snippets, search],
  );

  return (
    <Popover
      open={open}
      onOpenChange={(next) => {
        setOpen(next);
        if (!next) setSearch('');
      }}
    >
      <PopoverTrigger asChild>
        <button
          type="button"
          className="h-6 w-6 flex-shrink-0 flex items-center justify-center rounded transition-colors duration-150"
          style={{ color: theme.mutedFg }}
          onMouseEnter={(e) => {
            e.currentTarget.style.backgroundColor = theme.hoverBg;
            e.currentTarget.style.color = theme.resolvedFg;
          }}
          onMouseLeave={(e) => {
            e.currentTarget.style.backgroundColor = 'transparent';
            e.currentTarget.style.color = theme.mutedFg;
          }}
          aria-label={manageLabel}
          title={manageLabel}
        >
          <Plus size={12} />
        </button>
      </PopoverTrigger>
      <PopoverContent
        className="w-72 p-0"
        align="end"
        side="top"
        sideOffset={6}
        style={{
          backgroundColor: theme.resolvedBg,
          borderColor: theme.borderColor,
          color: theme.resolvedFg,
        }}
      >
        <div
          className="px-2.5 py-2 border-b"
          style={{ borderColor: theme.borderColor }}
        >
          <p className="text-[11px] font-semibold mb-1.5">{manageLabel}</p>
          <div
            className="flex items-center gap-1.5 rounded px-2 h-7"
            style={{ backgroundColor: theme.chipBg }}
          >
            <Search size={11} style={{ color: theme.mutedFg }} className="shrink-0" />
            <input
              type="text"
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              placeholder={searchPlaceholder}
              className="flex-1 min-w-0 bg-transparent text-[11px] font-mono outline-none placeholder:opacity-60"
              style={{ color: theme.resolvedFg }}
            />
          </div>
        </div>
        <div className="max-h-52 overflow-y-auto p-1">
          {snippets.length === 0 ? (
            <p className="text-[11px] px-2 py-3 text-center" style={{ color: theme.mutedFg }}>
              {noSnippetsLabel}
            </p>
          ) : filteredSnippets.length === 0 ? (
            <p className="text-[11px] px-2 py-3 text-center" style={{ color: theme.mutedFg }}>
              {noMatchingLabel}
            </p>
          ) : (
            filteredSnippets.map((snippet) => {
              const pinned = isPinned(snippet.id);
              return (
                <button
                  key={snippet.id}
                  type="button"
                  className="w-full flex items-center gap-2 px-2 py-1.5 rounded text-left transition-colors duration-150"
                  style={{
                    color: theme.resolvedFg,
                    backgroundColor: pinned ? theme.chipHoverBg : 'transparent',
                  }}
                  onMouseEnter={(e) => {
                    if (!pinned) e.currentTarget.style.backgroundColor = theme.hoverBg;
                  }}
                  onMouseLeave={(e) => {
                    e.currentTarget.style.backgroundColor = pinned ? theme.chipHoverBg : 'transparent';
                  }}
                  onClick={() => onTogglePin(snippet.id)}
                >
                  <Pin
                    size={11}
                    className="shrink-0"
                    style={{
                      color: pinned ? theme.resolvedFg : theme.mutedFg,
                      fill: pinned ? 'currentColor' : 'none',
                    }}
                  />
                  <span className="flex-1 min-w-0 truncate text-[11px] font-mono">
                    {snippet.label}
                  </span>
                </button>
              );
            })
          )}
        </div>
        {pinnedCount > 0 && (
          <div
            className="px-2.5 py-1.5 border-t text-[10px]"
            style={{ borderColor: theme.borderColor, color: theme.mutedFg }}
          >
            {pinnedCountLabel}
          </div>
        )}
      </PopoverContent>
    </Popover>
  );
});

export interface TerminalComposeBarProps {
  onSend: (text: string) => void;
  onClose: () => void;
  onSnippetClick?: (snippet: Snippet) => void;
  snippets?: Snippet[];
  isBroadcastEnabled?: boolean;
  themeColors?: {
    background: string;
    foreground: string;
  };
}

export const TerminalComposeBar: React.FC<TerminalComposeBarProps> = ({
  onSend,
  onClose,
  onSnippetClick,
  snippets = [],
  isBroadcastEnabled,
  themeColors,
}) => {
  const { t } = useI18n();
  const textareaRef = useRef<HTMLTextAreaElement>(null);
  const isComposingRef = useRef(false);
  const resizeCleanupRef = useRef<(() => void) | null>(null);
  const [barHeight, setBarHeight, persistBarHeight] = useComposeBarHeight();
  const heightRef = useRef(barHeight);

  const snippetIdKey = useMemo(
    () => buildSnippetIdKey(snippets.map((snippet) => snippet.id)),
    [snippets],
  );
  const defaultSeedIds = useMemo(
    () => resolveComposeBarDefaultSeedIds(snippets),
    [snippets],
  );
  const { pinnedIds, unpin, toggle, isPinned } = useComposeBarPinnedSnippets(
    snippetIdKey,
    defaultSeedIds,
  );

  heightRef.current = barHeight;

  const theme = useMemo(() => buildTheme(themeColors), [themeColors]);

  const snippetsById = useMemo(
    () => mergeComposeBarSnippetMap(snippets),
    [snippets],
  );

  const pinnedSnippets = useMemo(
    () => pinnedIds
      .map((id) => snippetsById.get(id))
      .filter((snippet): snippet is Snippet => Boolean(snippet)),
    [pinnedIds, snippetsById],
  );

  const clickHint = t('terminal.composeBar.snippetClickHint');

  useEffect(() => {
    const timer = setTimeout(() => textareaRef.current?.focus(), 50);
    return () => clearTimeout(timer);
  }, []);

  useEffect(() => () => {
    resizeCleanupRef.current?.();
  }, []);

  const handleSend = useCallback(() => {
    const el = textareaRef.current;
    if (!el) return;
    const text = el.value;
    if (!text) return;
    onSend(text);
    el.value = '';
    el.focus();
  }, [onSend]);

  const insertCommand = useCallback((command: string) => {
    const el = textareaRef.current;
    if (!el) return;
    const prefix = el.value && !el.value.endsWith('\n') ? '\n' : '';
    el.value = el.value ? `${el.value}${prefix}${command}` : command;
    el.focus();
  }, []);

  const handleSnippetActivate = useCallback(async (snippet: Snippet, sendImmediately: boolean) => {
    if (sendImmediately) {
      if (onSnippetClick) {
        onSnippetClick(snippet);
      } else {
        const command = await resolveSnippetCommand(snippet);
        if (command !== null) onSend(command);
      }
      return;
    }

    const command = await resolveSnippetCommand(snippet);
    if (command === null) return;
    insertCommand(command);
  }, [insertCommand, onSend, onSnippetClick]);

  const handleKeyDown = useCallback((e: React.KeyboardEvent<HTMLTextAreaElement>) => {
    if (e.key === 'Enter' && !e.shiftKey && !isComposingRef.current) {
      e.preventDefault();
      handleSend();
    } else if (e.key === 'Escape') {
      e.preventDefault();
      onClose();
    }
  }, [handleSend, onClose]);

  const handleResizeStart = useCallback((e: React.MouseEvent) => {
    e.preventDefault();
    resizeCleanupRef.current?.();

    const startY = e.clientY;
    const startHeight = heightRef.current;

    document.body.style.cursor = 'ns-resize';
    document.body.style.userSelect = 'none';

    const onMove = (moveEvent: MouseEvent) => {
      const delta = moveEvent.clientY - startY;
      setBarHeight(startHeight - delta);
    };

    const cleanup = () => {
      document.body.style.cursor = '';
      document.body.style.userSelect = '';
      window.removeEventListener('mousemove', onMove);
      window.removeEventListener('mouseup', onUp);
      resizeCleanupRef.current = null;
    };

    const onUp = () => {
      persistBarHeight(heightRef.current);
      cleanup();
    };

    resizeCleanupRef.current = cleanup;
    window.addEventListener('mousemove', onMove);
    window.addEventListener('mouseup', onUp);
  }, [persistBarHeight, setBarHeight]);

  return (
    <div
      className="flex-shrink-0 flex flex-col"
      style={{
        height: barHeight,
        backgroundColor: theme.resolvedBg,
        borderTop: `1px solid ${theme.borderColor}`,
      }}
    >
      <div
        role="separator"
        aria-orientation="horizontal"
        aria-label={t('terminal.composeBar.resize')}
        className="flex-shrink-0 flex items-center justify-center cursor-ns-resize group"
        style={{ height: RESIZE_HANDLE_HEIGHT }}
        onMouseDown={handleResizeStart}
      >
        <GripHorizontal
          size={12}
          className="opacity-0 group-hover:opacity-60 transition-opacity"
          style={{ color: theme.mutedFg }}
        />
      </div>

      <div
        className="flex-shrink-0 flex items-center gap-1 px-2 min-w-0"
        style={{ height: SNIPPET_STRIP_HEIGHT }}
      >
        <div className="flex-1 min-w-0 flex items-center gap-1 overflow-x-auto scrollbar-thin">
          {pinnedSnippets.map((snippet) => (
            <ComposeBarSnippetChip
              key={snippet.id}
              snippet={snippet}
              theme={theme}
              clickHint={clickHint}
              unpinLabel={t('terminal.composeBar.unpinSnippet', { label: snippet.label })}
              onUnpin={unpin}
              onActivate={handleSnippetActivate}
            />
          ))}
        </div>

        <ComposeBarSnippetManagePopover
          snippets={snippets}
          pinnedCount={pinnedSnippets.length}
          theme={theme}
          isPinned={isPinned}
          onTogglePin={toggle}
          manageLabel={t('terminal.composeBar.manageSnippets')}
          searchPlaceholder={t('terminal.composeBar.searchSnippets')}
          noSnippetsLabel={t('terminal.toolbar.noSnippets')}
          noMatchingLabel={t('terminal.composeBar.noMatchingSnippets')}
          pinnedCountLabel={t('terminal.composeBar.pinnedCount', { count: pinnedSnippets.length })}
        />
      </div>

      <div className="flex-1 min-h-0 px-3 pt-1.5 pb-2 flex flex-col">
        <div className="flex flex-1 min-h-0 items-start gap-1.5">
          {isBroadcastEnabled && (
            <Tooltip>
              <TooltipTrigger asChild>
                <div className="flex items-center cursor-default pt-0.5 flex-shrink-0">
                  <Radio size={14} className="text-amber-400 animate-pulse" />
                </div>
              </TooltipTrigger>
              <TooltipContent>{t('terminal.composeBar.broadcasting')}</TooltipContent>
            </Tooltip>
          )}

          <textarea
            ref={textareaRef}
            className={cn(
              'flex-1 min-w-0 min-h-0 h-full resize-none bg-transparent border-none px-0 py-0',
              'text-xs font-mono leading-relaxed outline-none',
              'placeholder:opacity-70 overflow-y-auto',
            )}
            style={{ color: theme.resolvedFg }}
            placeholder={t('terminal.composeBar.placeholder')}
            onKeyDown={handleKeyDown}
            onCompositionStart={() => { isComposingRef.current = true; }}
            onCompositionEnd={() => { isComposingRef.current = false; }}
          />

          <Tooltip>
            <TooltipTrigger asChild>
              <button
                type="button"
                className="h-6 w-6 flex items-center justify-center rounded-md transition-colors duration-150 flex-shrink-0"
                style={{
                  color: theme.mutedFg,
                  background: 'transparent',
                }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.background = theme.hoverBg;
                  e.currentTarget.style.color = theme.resolvedFg;
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.background = 'transparent';
                  e.currentTarget.style.color = theme.mutedFg;
                }}
                onClick={onClose}
              >
                <X size={12} />
              </button>
            </TooltipTrigger>
            <TooltipContent>{t('terminal.composeBar.close')}</TooltipContent>
          </Tooltip>
        </div>
      </div>
    </div>
  );
};

export default TerminalComposeBar;