Scrum4Me/components/notifications/answer-modal.tsx

'use client'

// ST-1105: Modal waar de gebruiker een Claude-vraag beantwoordt (M11).
//
// Free-text Textarea (max 4000) of multiple-choice via knoppen wanneer de
// vraag `options` heeft. Submit roept answerQuestion-Server-Action aan via
// useTransition; bij succes wordt de vraag uit de store verwijderd
// (optimistisch) en sluit de modal. Demo-modus: textarea readOnly + submit
// disabled met tooltip.

import { useState, useTransition } from 'react'
import Link from 'next/link'
import { ExternalLink } from 'lucide-react'
import { toast } from 'sonner'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from '@/components/ui/dialog'
import { Button } from '@/components/ui/button'
import { Textarea } from '@/components/ui/textarea'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
import { answerQuestion } from '@/actions/questions'
import { useNotificationsStore, type NotificationQuestion } from '@/stores/notifications-store'

const MAX_ANSWER_CHARS = 4000

interface AnswerModalProps {
  question: NotificationQuestion | null
  isDemo: boolean
  onClose: () => void
}

export function AnswerModal({ question, isDemo, onClose }: AnswerModalProps) {
  const [answer, setAnswer] = useState('')
  const [pending, startTransition] = useTransition()

  if (!question) return null

  const charsLeft = MAX_ANSWER_CHARS - answer.length
  const tooLong = charsLeft < 0
  const submitDisabled = isDemo || pending || answer.trim().length === 0 || tooLong

  function submit(text: string) {
    if (!question) return
    if (isDemo) {
      toast.error('Niet beschikbaar in demo-modus')
      return
    }
    startTransition(async () => {
      const res = await answerQuestion(question.id, text)
      if (!res.ok) {
        toast.error(res.error)
        return
      }
      // Optimistisch verwijderen — SSE-event komt anders later met dezelfde
      // remove en kost een extra render
      useNotificationsStore.getState().remove(question.id)
      toast.success('Antwoord verstuurd')
      setAnswer('')
      onClose()
    })
  }

  return (
    <Dialog open={!!question} onOpenChange={(open) => !open && onClose()}>
      <DialogContent className="sm:max-w-lg">
        <DialogHeader>
          <DialogTitle>Beantwoord Claude</DialogTitle>
          <DialogDescription>
            <span className="font-mono">{question.story_code ?? 'story'}</span>
            {' — '}
            {question.story_title}
          </DialogDescription>
        </DialogHeader>
        <Link
          href={`/products/${question.product_id}/sprint`}
          className="text-primary inline-flex items-center gap-1 self-start text-xs hover:underline"
        >
          <ExternalLink className="h-3.5 w-3.5" />
          <span>Open in Sprint</span>
        </Link>

        <div className="bg-surface-container-low rounded-md border p-3 text-sm whitespace-pre-wrap">
          {question.question}
        </div>

        {question.options && question.options.length > 0 ? (
          <div className="space-y-2">
            <p className="text-muted-foreground text-xs">Kies een van de opties:</p>
            <div className="flex flex-col gap-2">
              {question.options.map((opt) => (
                <Button
                  key={opt}
                  type="button"
                  variant="outline"
                  className="justify-start"
                  disabled={isDemo || pending}
                  onClick={() => submit(opt)}
                >
                  {opt}
                </Button>
              ))}
            </div>
          </div>
        ) : (
          <div className="space-y-1">
            <Textarea
              value={answer}
              onChange={(e) => setAnswer(e.target.value)}
              placeholder="Typ je antwoord…"
              rows={5}
              maxLength={MAX_ANSWER_CHARS}
              readOnly={isDemo}
              aria-label="Antwoord op Claude's vraag"
            />
            <div
              className={
                tooLong
                  ? 'text-error text-right text-xs'
                  : 'text-muted-foreground text-right text-xs'
              }
            >
              {charsLeft} tekens over
            </div>
          </div>
        )}

        <DialogFooter>
          <Button variant="ghost" onClick={onClose} disabled={pending}>
            Annuleren
          </Button>
          {(!question.options || question.options.length === 0) && (
            <TooltipProvider>
              <Tooltip>
                <TooltipTrigger render={<span className="inline-flex" />}>
                  <Button
                    onClick={() => submit(answer)}
                    disabled={submitDisabled}
                  >
                    {pending ? 'Bezig…' : 'Verstuur'}
                  </Button>
                </TooltipTrigger>
                {isDemo && (
                  <TooltipContent>Niet beschikbaar in demo-modus</TooltipContent>
                )}
              </Tooltip>
            </TooltipProvider>
          )}
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}