// Copyright: © 2026 TWWIM UG. All rights reserved. (www.twwim.com)

import { useState } from 'react';
import { Send } from 'lucide-react';
import { useTranslation } from '@/i18n/TranslationProvider';

interface ComposerProps {
  onSend: (content: string) => void;
  disabled?: boolean;
  hint?: string;
}

export function Composer({ onSend, disabled = false, hint }: ComposerProps) {
  const { t } = useTranslation();
  const [draft, setDraft] = useState('');

  const handleSend = () => {
    const trimmed = draft.trim();
    if (!trimmed || disabled) return;
    onSend(trimmed);
    setDraft('');
  };

  const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
    if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
      event.preventDefault();
      handleSend();
    }
  };

  return (
    <div className="border-t border-gray-200 bg-white p-3" data-testid="composer">
      {hint && (
        <p className="text-xs text-gray-500 mb-2" data-testid="composer-hint">
          {hint}
        </p>
      )}
      <div className="flex gap-2">
        <textarea
          value={draft}
          onChange={(event) => setDraft(event.target.value)}
          onKeyDown={handleKeyDown}
          disabled={disabled}
          placeholder={t('conversations.composer.placeholder')}
          data-testid="composer-input"
          className="flex-1 border border-gray-300 rounded-md px-3 py-2 text-sm resize-none focus:outline-none focus:ring-2 focus:ring-emerald-500 disabled:bg-gray-50 disabled:text-gray-400"
          rows={2}
        />
        <button
          type="button"
          onClick={handleSend}
          disabled={disabled || !draft.trim()}
          data-testid="composer-send"
          className="inline-flex items-center gap-1.5 bg-emerald-600 hover:bg-emerald-700 disabled:opacity-50 text-white px-4 py-2 rounded-md text-sm font-medium"
        >
          <Send size={14} />
          {t('conversations.composer.send')}
        </button>
      </div>
      <p className="text-[10px] text-gray-400 mt-1.5">{t('conversations.composer.shortcut')}</p>
    </div>
  );
}