'use client';

import { useState, type CSSProperties } from 'react';

type TerminalInputProps = {
  prompt?: string;
  placeholder?: string;
  value?: string;
  onChange?: (value: string) => void;
  /** Amber prompt + caret (system-state) instead of grade-green. */
  amber?: boolean;
  /** Monospace input text (default true — terminal copy is data). */
  mono?: boolean;
  style?: CSSProperties;
};

/**
 * Terminal field with a `›` prompt and a phosphor cursor that pulses while empty (§5).
 * The focus ring is grade-green. Monospace by default — what you type is data.
 */
export default function TerminalInput({
  prompt = '›',
  placeholder = '',
  value,
  onChange,
  amber = false,
  mono = true,
  style = {},
}: TerminalInputProps) {
  const [focused, setFocused] = useState(false);
  const empty = !value;
  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        gap: 8,
        background: 'var(--bg-2)',
        border: `1px solid ${focused ? 'var(--border-hi)' : 'var(--border)'}`,
        borderRadius: 6,
        padding: '11px 14px',
        transition: 'border-color .15s',
        boxShadow: focused ? '0 0 0 1px rgba(0,212,160,.25)' : 'none',
        ...style,
      }}
    >
      <span
        className="mono"
        style={{ color: amber ? 'var(--amber)' : 'var(--g-a)', fontWeight: 700, fontSize: 14 }}
      >
        {prompt}
      </span>
      <div style={{ position: 'relative', flex: 1, display: 'flex', alignItems: 'center' }}>
        <input
          value={value || ''}
          onChange={(e) => onChange && onChange(e.target.value)}
          onFocus={() => setFocused(true)}
          onBlur={() => setFocused(false)}
          placeholder={placeholder}
          className={mono ? 'mono' : ''}
          style={{
            flex: 1,
            background: 'transparent',
            border: 'none',
            outline: 'none',
            color: 'var(--text-0)',
            fontSize: 14,
            letterSpacing: '0.02em',
            fontFamily: mono ? 'var(--mono)' : 'var(--sans)',
          }}
        />
        {empty && (
          <span
            className={'phosphor-cursor' + (amber ? ' amber' : '')}
            style={{ position: 'absolute', left: 1 }}
          />
        )}
      </div>
    </div>
  );
}
