// @design-system: domain/chat — MessageComposer
import { useState, type SubmitEvent } from 'react';
import { useT } from '@/lib/i18n/react';
import { getCsrfToken } from '@/lib/csrf';
import { Button } from '@/components/ui/primitives/Button';
import { Textarea } from '@/components/ui/primitives/Textarea';
import { useToast } from '@/components/ui/overlays/Toast/useToast';
import { captureCaught } from '@/lib/observability';
import type { ChatMessageRow } from '@/server/db/schema';

interface Props {
  threadId: string;
  onMessageSent?: (message: ChatMessageRow) => void;
}

export function MessageComposer({ threadId, onMessageSent }: Props) {
  const t = useT('chat');
  const tCommon = useT('common');
  const { toast } = useToast();
  const [draft, setDraft] = useState('');
  const [pending, setPending] = useState(false);

  async function submit(e: SubmitEvent) {
    e.preventDefault();
    if (!draft.trim() || pending) return;
    const body = draft.trim();
    setPending(true);
    try {
      const res = await fetch(`/api/chat/threads/${threadId}/messages`, {
        method: 'POST',
        credentials: 'same-origin',
        headers: {
          'content-type': 'application/json',
          'x-csrf-token': getCsrfToken(),
        },
        body: JSON.stringify({ body }),
      });
      const json = (await res.json()) as {
        ok?: boolean;
        data?: { message: ChatMessageRow };
      };
      if (!res.ok || !json.ok) {
        toast({ title: t('send_failure'), tone: 'danger' });
        return;
      }
      setDraft('');
      if (json.data?.message) {
        onMessageSent?.(json.data.message);
      }
      toast({ title: tCommon('success_save'), tone: 'success' });
    } catch (err) {
      captureCaught(err, { scope: 'features.chat.MessageComposer.submit', severity: 'warning' });
      toast({ title: t('send_failure'), tone: 'danger' });
    } finally {
      setPending(false);
    }
  }

  return (
    <form onSubmit={submit} className="flex flex-col gap-[var(--space-1)]">
      <div className="flex items-end gap-[var(--space-2)]">
        <Textarea
          value={draft}
          onChange={(e) => setDraft(e.currentTarget.value)}
          placeholder={t('composer_placeholder')}
          aria-label={t('composer_aria')}
          className="min-h-10 flex-1 resize-none"
          rows={1}
          onKeyDown={(e) => {
            if (e.key === 'Enter' && !e.shiftKey) {
              e.preventDefault();
              void submit(e as unknown as SubmitEvent);
            }
          }}
        />
        <Button type="submit" disabled={pending || !draft.trim()}>
          {t('composer_send')}
        </Button>
      </div>
      <p className="text-text-muted text-xs">{t('composer_keyboard_hint')}</p>
    </form>
  );
}