import { html, useState, useRef } 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 [sending, setSending] = useState(false);
  const [error, setError] = useState(null);
  const textareaRef = useRef(null);
  const meta = getStatusMeta(status);

  const handleSubmit = async (e) => {
    e.preventDefault();
    e.stopPropagation();
    if (text.trim() && !sending) {
      setSending(true);
      setError(null);
      try {
        await onRespond(sessionId, text.trim(), true, 0);
        setText('');
      } catch (err) {
        setError('Failed to send message');
        console.error('SimpleInput send error:', err);
      } finally {
        setSending(false);
        // Refocus the textarea after submission
        // Use setTimeout to ensure React has re-rendered with disabled=false
        setTimeout(() => {
          textareaRef.current?.focus();
        }, 0);
      }
    }
  };

  return html`
    <form onSubmit=${handleSubmit} class="flex flex-col gap-2" onClick=${(e) => e.stopPropagation()}>
      ${error && html`
        <div class="rounded-lg border border-attention/40 bg-attention/12 px-3 py-1.5 text-sm text-attention">
          ${error}
        </div>
      `}
      <div class="flex items-end gap-2.5">
      <textarea
        ref=${textareaRef}
        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 transition-colors duration-150 placeholder:text-dim focus:outline-none"
        style=${{ minHeight: '38px', maxHeight: '150px', borderColor: focused ? meta.borderColor : undefined }}
        disabled=${sending}
      />
      <button
        type="submit"
        class="shrink-0 rounded-xl px-3 py-2 text-sm font-medium transition-[transform,filter] duration-150 hover:-translate-y-0.5 hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-50"
        style=${{ backgroundColor: meta.borderColor, color: '#0a0f18' }}
        disabled=${sending || !text.trim()}
      >
        ${sending ? 'Sending...' : 'Send'}
      </button>
      </div>
    </form>
  `;
}