import { html, useState } from '../lib/preact.js';
import { getStatusMeta } from '../utils/status.js';

export function SimpleInput({ sessionId, status, onRespond }) {
  const [text, setText] = useState('');
  const [focused, setFocused] = useState(false);
  const meta = getStatusMeta(status);

  const handleSubmit = (e) => {
    e.preventDefault();
    e.stopPropagation();
    if (text.trim()) {
      onRespond(sessionId, text.trim(), true, 0);
      setText('');
    }
  };

  return html`
    <form onSubmit=${handleSubmit} class="flex items-end gap-2.5" onClick=${(e) => e.stopPropagation()}>
      <textarea
        value=${text}
        onInput=${(e) => {
          setText(e.target.value);
          e.target.style.height = 'auto';
          e.target.style.height = e.target.scrollHeight + 'px';
        }}
        onKeyDown=${(e) => {
          if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            handleSubmit(e);
          }
        }}
        onFocus=${() => setFocused(true)}
        onBlur=${() => setFocused(false)}
        placeholder="Send a message..."
        rows="1"
        class="flex-1 resize-none overflow-hidden rounded-xl border border-selection/75 bg-bg/70 px-3 py-2 text-sm text-fg placeholder:text-dim focus:outline-none"
        style=${{ minHeight: '38px', maxHeight: '150px', borderColor: focused ? meta.borderColor : undefined }}
      />
      <button
        type="submit"
        class="shrink-0 rounded-xl px-3 py-2 text-sm font-medium transition-all hover:-translate-y-0.5 hover:brightness-110"
        style=${{ backgroundColor: meta.borderColor, color: '#0a0f18' }}
      >
        Send
      </button>
    </form>
  `;
}