import { useEffect, useRef, useState } from 'react';

interface Props {
  onSubmit: (body: string) => Promise<void>;
  onCancel: () => void;
}

// Composer is the inline "add a comment" box shown under a line.
export function Composer({ onSubmit, onCancel }: Props) {
  const [text, setText] = useState('');
  const [busy, setBusy] = useState(false);
  const ref = useRef<HTMLTextAreaElement>(null);

  useEffect(() => {
    ref.current?.focus();
  }, []);

  const submit = async () => {
    if (!text.trim()) return;
    setBusy(true);
    try {
      await onSubmit(text.trim());
      setText('');
    } finally {
      setBusy(false);
    }
  };

  return (
    <div className="composer">
      <textarea
        ref={ref}
        className="composer-input"
        placeholder="Leave a comment on this line…"
        value={text}
        disabled={busy}
        onChange={(e) => setText(e.target.value)}
        onKeyDown={(e) => {
          if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') submit();
          if (e.key === 'Escape') onCancel();
        }}
      />
      <div className="composer-actions">
        <span className="composer-hint">markdown · ⌘⏎ to add · esc to cancel</span>
        <button className="btn-ghost" onClick={onCancel} disabled={busy}>
          Cancel
        </button>
        <button
          className="btn-primary"
          onClick={submit}
          disabled={busy || !text.trim()}
        >
          Add comment
        </button>
      </div>
    </div>
  );
}