stack/apps/web/src/components/terminal/TerminalPanel.tsx

import type { ReactElement, CSSProperties } from "react";

export interface TerminalLine {
  type: "prompt" | "command" | "output" | "error" | "warning" | "success";
  content: string;
}

export interface TerminalTab {
  id: string;
  label: string;
}

export interface TerminalPanelProps {
  open: boolean;
  onClose: () => void;
  tabs?: TerminalTab[];
  activeTab?: string;
  onTabChange?: (id: string) => void;
  lines?: TerminalLine[];
  className?: string;
}

const defaultTabs: TerminalTab[] = [
  { id: "main", label: "main" },
  { id: "build", label: "build" },
  { id: "logs", label: "logs" },
];

const blinkKeyframes = `
@keyframes ms-terminal-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
`;

let blinkStyleInjected = false;

function ensureBlinkStyle(): void {
  if (blinkStyleInjected || typeof document === "undefined") return;
  const styleEl = document.createElement("style");
  styleEl.textContent = blinkKeyframes;
  document.head.appendChild(styleEl);
  blinkStyleInjected = true;
}

function getLineColor(type: TerminalLine["type"]): string {
  switch (type) {
    case "prompt":
      return "var(--success)";
    case "command":
      return "var(--text-2)";
    case "output":
      return "var(--muted)";
    case "error":
      return "var(--danger)";
    case "warning":
      return "var(--warn)";
    case "success":
      return "var(--success)";
    default:
      return "var(--muted)";
  }
}

export function TerminalPanel({
  open,
  onClose,
  tabs,
  activeTab,
  onTabChange,
  lines = [],
  className = "",
}: TerminalPanelProps): ReactElement {
  ensureBlinkStyle();

  const resolvedTabs = tabs ?? defaultTabs;
  const resolvedActiveTab = activeTab ?? resolvedTabs[0]?.id ?? "";

  const panelStyle: CSSProperties = {
    background: "var(--bg-deep)",
    borderTop: "1px solid var(--border)",
    overflow: "hidden",
    flexShrink: 0,
    display: "flex",
    flexDirection: "column",
    height: open ? 280 : 0,
    transition: "height 0.3s ease",
  };

  const headerStyle: CSSProperties = {
    display: "flex",
    alignItems: "center",
    gap: 10,
    padding: "6px 16px",
    borderBottom: "1px solid var(--border)",
    flexShrink: 0,
  };

  const tabBarStyle: CSSProperties = {
    display: "flex",
    gap: 2,
  };

  const actionsStyle: CSSProperties = {
    marginLeft: "auto",
    display: "flex",
    gap: 4,
  };

  const bodyStyle: CSSProperties = {
    flex: 1,
    overflowY: "auto",
    padding: "10px 16px",
    fontFamily: "var(--mono)",
    fontSize: "0.78rem",
    lineHeight: 1.6,
  };

  const cursorStyle: CSSProperties = {
    display: "inline-block",
    width: 7,
    height: 14,
    background: "var(--success)",
    marginLeft: 2,
    animation: "ms-terminal-blink 1s step-end infinite",
    verticalAlign: "text-bottom",
  };

  return (
    <div
      className={className}
      style={panelStyle}
      role="region"
      aria-label="Terminal panel"
      aria-hidden={!open}
    >
      {/* Header */}
      <div style={headerStyle}>
        {/* Tab bar */}
        <div style={tabBarStyle} role="tablist" aria-label="Terminal tabs">
          {resolvedTabs.map((tab) => {
            const isActive = tab.id === resolvedActiveTab;
            const tabStyle: CSSProperties = {
              padding: "3px 10px",
              borderRadius: 4,
              fontSize: "0.75rem",
              fontFamily: "var(--mono)",
              color: isActive ? "var(--success)" : "var(--muted)",
              cursor: "pointer",
              background: isActive ? "var(--surface)" : "transparent",
              border: "none",
              outline: "none",
            };

            return (
              <button
                key={tab.id}
                role="tab"
                aria-selected={isActive}
                style={tabStyle}
                onClick={(): void => {
                  onTabChange?.(tab.id);
                }}
                onMouseEnter={(e): void => {
                  if (!isActive) {
                    (e.currentTarget as HTMLButtonElement).style.background = "var(--surface)";
                    (e.currentTarget as HTMLButtonElement).style.color = "var(--text-2)";
                  }
                }}
                onMouseLeave={(e): void => {
                  if (!isActive) {
                    (e.currentTarget as HTMLButtonElement).style.background = "transparent";
                    (e.currentTarget as HTMLButtonElement).style.color = "var(--muted)";
                  }
                }}
              >
                {tab.label}
              </button>
            );
          })}
        </div>

        {/* Action buttons */}
        <div style={actionsStyle}>
          <button
            aria-label="Close terminal"
            style={{
              width: 22,
              height: 22,
              borderRadius: 4,
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              color: "var(--muted)",
              cursor: "pointer",
              background: "transparent",
              border: "none",
              outline: "none",
              padding: 0,
            }}
            onClick={onClose}
            onMouseEnter={(e): void => {
              (e.currentTarget as HTMLButtonElement).style.background = "var(--surface)";
              (e.currentTarget as HTMLButtonElement).style.color = "var(--text)";
            }}
            onMouseLeave={(e): void => {
              (e.currentTarget as HTMLButtonElement).style.background = "transparent";
              (e.currentTarget as HTMLButtonElement).style.color = "var(--muted)";
            }}
          >
            {/* Close icon — simple X using SVG */}
            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
              <path
                d="M1 1L11 11M11 1L1 11"
                stroke="currentColor"
                strokeWidth="1.5"
                strokeLinecap="round"
              />
            </svg>
          </button>
        </div>
      </div>

      {/* Body */}
      <div style={bodyStyle} role="log" aria-live="polite" aria-label="Terminal output">
        {lines.map((line, index) => {
          const isLast = index === lines.length - 1;
          const lineStyle: CSSProperties = {
            display: "flex",
            gap: 8,
          };
          const contentStyle: CSSProperties = {
            color: getLineColor(line.type),
          };

          return (
            <div key={index} style={lineStyle}>
              <span style={contentStyle}>
                {line.content}
                {isLast && <span aria-hidden="true" style={cursorStyle} />}
              </span>
            </div>
          );
        })}

        {/* Show cursor even when no lines */}
        {lines.length === 0 && (
          <div style={{ display: "flex", gap: 8 }}>
            <span style={{ color: "var(--success)" }}>
              <span aria-hidden="true" style={cursorStyle} />
            </span>
          </div>
        )}
      </div>
    </div>
  );
}