import { useState, type FormEvent, type JSX } from 'react'
import { Card } from '@astryxdesign/core'
import { Button } from './Button'
import { TextArea } from './TextArea'

export function AgentComposer(props: { onSend(text: string): Promise<void> }): JSX.Element {
  const [text, setText] = useState('')
  const [sending, setSending] = useState(false)
  const [error, setError] = useState<string | null>(null)

  const submit = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault()
    const message = text.trim()
    if (!message || sending) return

    setSending(true)
    setError(null)
    try {
      await props.onSend(message)
      setText('')
    } catch (sendError) {
      setError(sendError instanceof Error ? sendError.message : 'Message could not be sent.')
    } finally {
      setSending(false)
    }
  }

  return (
    <Card data-agent-composer aria-labelledby="agent-composer-title" className="flex min-h-40 flex-col">
      <h2 id="agent-composer-title" className="text-sm font-semibold text-fg">
        Guide this agent
      </h2>
      <form onSubmit={submit} className="mt-3 grid min-h-0 flex-1 gap-2 sm:grid-cols-[minmax(0,1fr)_auto]">
        <TextArea
          label="Message to agent"
          labelMode="hidden"
          value={text}
          disabled={sending}
          maxLength={500}
          rows={5}
          onValueChange={setText}
          placeholder="Add a useful correction or priority…"
        />
        <Button
          type="submit"
          variant="solid"
          tone="accent"
          isDisabled={sending || text.trim().length === 0}
          className="self-end"
        >
          {sending ? 'Sending…' : 'Send'}
        </Button>
      </form>
      {error && (
        <p role="alert" className="mt-2 text-xs font-medium text-danger">
          {error}
        </p>
      )}
    </Card>
  )
}