import { Button, TextArea } from '@overdeck/deck-ui'
import { useState, type JSX } from 'react'
import { postRequestAnswer } from '../../lib/request-answer'
import type { RequestRow } from '../../lib/request-types'

export function RequestAnswerForm({ request, error, onOptimistic, onSuccess, onError }: {
  request: RequestRow
  error?: string
  onOptimistic?(): void
  onSuccess?(row: RequestRow): void
  onError?(message: string): void
}): JSX.Element {
  const [answer, setAnswer] = useState('')
  const [submitting, setSubmitting] = useState(false)
  const localError = answer.trim() ? error : undefined

  async function submit(): Promise<void> {
    const text = answer.trim()
    if (!text || submitting) return
    setSubmitting(true)
    onOptimistic?.()
    try {
      const result = await postRequestAnswer(request.id, text)
      setAnswer('')
      onSuccess?.(result.request)
    } catch {
      onError?.('Could not send your answer. Try again.')
    } finally {
      setSubmitting(false)
    }
  }

  return (
    <form className="flex flex-col gap-2" onSubmit={(event) => { event.preventDefault(); void submit() }}>
      <TextArea
        label={`Answer for ${request.title}`}
        labelMode="hidden"
        placeholder="Type your answer"
        value={answer}
        onValueChange={setAnswer}
        rows={3}
        disabled={submitting}
        error={localError}
      />
      <div className="flex items-center gap-2">
        <Button type="submit" size="sm" disabled={submitting || !answer.trim()}>
          {submitting ? 'Sending answer…' : 'Send answer'}
        </Button>
      </div>
    </form>
  )
}