'use client';

import { useState } from 'react';

interface Props {
  onSend: (body: string) => void;
  isPending?: boolean;
  placeholder?: string;
}

export function MessageComposer({ onSend, isPending, placeholder }: Props) {
  const [body, setBody] = useState('');
  const trimmed = body.trim();
  const disabled = trimmed.length === 0 || !!isPending;

  const submit = () => {
    if (disabled) return;
    onSend(trimmed);
    setBody('');
  };

  return (
    <div className="mt-3 rounded-md border border-slate-200 bg-slate-50 p-3">
      <label htmlFor="message-composer" className="sr-only">
        Message
      </label>
      <textarea
        id="message-composer"
        aria-label="Message"
        value={body}
        onChange={(e) => setBody(e.target.value)}
        maxLength={5000}
        rows={3}
        placeholder={placeholder ?? 'Write a message…'}
        className="w-full resize-none rounded-md border border-slate-300 bg-white p-2 text-sm focus:border-forest-600 focus:outline-none"
        onKeyDown={(e) => {
          if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') submit();
        }}
      />
      <div className="mt-2 flex items-center justify-between">
        <span className="text-xs text-slate-400">{trimmed.length} / 5000</span>
        <button
          type="button"
          onClick={submit}
          disabled={disabled}
          className="rounded-md bg-forest-600 px-3 py-1.5 text-sm font-medium text-white disabled:cursor-not-allowed disabled:opacity-50"
        >
          {isPending ? 'Sending…' : 'Send'}
        </button>
      </div>
    </div>
  );
}