genesis / web / src / components / ui / Terminal.tsx

import type { ReactNode, CSSProperties } from 'react';
import { Stack, Cluster, Divider } from './Layout';

interface TerminalProps {
  children: ReactNode;
  title?: string;
  subtitle?: string;
  showBack?: boolean;
  className?: string;
}

/**
 * Terminal - main wrapper with brutalist monospace aesthetic
 */
export function Terminal({ children, title = '@toshi', subtitle, showBack = false, className = '' }: TerminalProps) {
  const displayTitle = subtitle ? `${title} ${subtitle}` : title;

  return (
    <article className={`terminal ${className}`}>
      <header className="terminal-header">
        {showBack && <a href="/" className="back-link">&lt;</a>}
        <h1 className="terminal-title">{displayTitle}</h1>
      </header>
      <Divider />
      <Stack gap="lg">{children}</Stack>
    </article>
  );
}

interface SectionProps {
  children: ReactNode;
  title?: string;
}

/**
 * Section - grouped content with optional title
 */
export function Section({ children, title }: SectionProps) {
  return (
    <section className="terminal-section">
      {title && <h2 className="section-title">{title}</h2>}
      <Stack gap="sm">{children}</Stack>
    </section>
  );
}

interface LabelValueProps {
  label: string;
  value: ReactNode;
  status?: 'default' | 'success' | 'error' | 'warning';
}

/**
 * LabelValue - key-value display (e.g., "BALANCE: 1000")
 */
export function LabelValue({ label, value, status = 'default' }: LabelValueProps) {
  return (
    <div className="label-value">
      <span className="label">{label}:</span>{' '}
      <span className={`value status-${status}`}>{value}</span>
    </div>
  );
}

interface DataRowProps {
  cells: ReactNode[];
  widths?: string[];
  href?: string;
}

/**
 * DataRow - single row in a data table
 */
export function DataRow({ cells, widths, href }: DataRowProps) {
  const content = (
    <div className="data-row">
      {cells.map((cell, i) => (
        <span
          key={i}
          className="data-cell"
          style={widths?.[i] ? { width: widths[i], flexShrink: 0 } : { flex: 1 }}
        >
          {cell}
        </span>
      ))}
    </div>
  );

  if (href) {
    return <a href={href} className="data-row-link">{content}</a>;
  }

  return content;
}

interface DataTableProps {
  headers: string[];
  widths?: string[];
  children: ReactNode;
  emptyMessage?: string;
}

/**
 * DataTable - tabular data display
 */
export function DataTable({ headers, widths, children, emptyMessage = '(no data)' }: DataTableProps) {
  const hasChildren = Array.isArray(children) ? children.length > 0 : !!children;

  return (
    <div className="data-table">
      <div className="data-row data-header">
        {headers.map((header, i) => (
          <span
            key={i}
            className="data-cell"
            style={widths?.[i] ? { width: widths[i], flexShrink: 0 } : { flex: 1 }}
          >
            {header}
          </span>
        ))}
      </div>
      <div className="data-body">
        {hasChildren ? children : <div className="data-empty">{emptyMessage}</div>}
      </div>
    </div>
  );
}

interface ActionBarProps {
  children: ReactNode;
}

/**
 * ActionBar - row of action buttons
 */
export function ActionBar({ children }: ActionBarProps) {
  return (
    <Cluster gap="sm" className="action-bar">
      {children}
    </Cluster>
  );
}

interface StatusBadgeProps {
  status: 'online' | 'offline' | 'loading';
  label?: string;
}

/**
 * StatusBadge - inline status indicator
 */
export function StatusBadge({ status, label }: StatusBadgeProps) {
  const labels = {
    online: 'ONLINE',
    offline: 'OFFLINE',
    loading: 'LOADING...',
  };

  return (
    <span className={`status-badge status-${status}`}>
      {label || labels[status]}
    </span>
  );
}

interface InputFieldProps {
  label: string;
  value: string;
  onChange: (value: string) => void;
  placeholder?: string;
  type?: 'text' | 'number';
  disabled?: boolean;
  width?: string;
  min?: number;
  max?: number;
}

/**
 * InputField - labeled input in terminal style
 */
export function InputField({
  label,
  value,
  onChange,
  placeholder,
  type = 'text',
  disabled = false,
  width = '200px',
  min,
  max,
}: InputFieldProps) {
  return (
    <div className="input-field">
      <label className="input-label">{label}:</label>{' '}
      <input
        type={type}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        disabled={disabled}
        style={{ width }}
        min={min}
        max={max}
      />
    </div>
  );
}

interface MessageProps {
  type: 'success' | 'error' | 'info';
  children: ReactNode;
}

/**
 * Message - styled message display
 */
export function Message({ type, children }: MessageProps) {
  return (
    <div className={`message message-${type}`}>
      {children}
    </div>
  );
}