Scrum4Me/components/backlog/story-dialog.tsx

'use client'

import { useEffect, useRef, useState, useTransition } from 'react'
import { useActionState } from 'react'
import { Markdown } from '@/components/markdown'
import { toast } from 'sonner'
import {
  Dialog,
  DialogContent,
  DialogTitle,
} from '@/components/ui/dialog'
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '@/components/ui/alert-dialog'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Textarea } from '@/components/ui/textarea'
import { Badge } from '@/components/ui/badge'
import { PrioritySelect, PRIORITY_LABELS, PRIORITY_COLORS } from '@/components/shared/priority-select'
import { StoryLog } from '@/components/shared/story-log'
import { DemoTooltip } from '@/components/shared/demo-tooltip'
import {
  useDirtyCloseGuard,
  DirtyCloseGuardDialog,
} from '@/components/shared/use-dirty-close-guard'
import { useDialogSubmitShortcut } from '@/components/shared/use-dialog-submit-shortcut'
import {
  entityDialogContentClasses,
  entityDialogFooterClasses,
  entityDialogHeaderClasses,
} from '@/components/shared/entity-dialog-layout'
import { createStoryAction, updateStoryAction, deleteStoryAction, getStoryLogsAction } from '@/actions/stories'
import { cn } from '@/lib/utils'
import type { Story } from './story-panel'

export type StoryDialogState =
  | { mode: 'create'; pbiId: string; productId: string; defaultPriority?: number }
  | { mode: 'edit'; story: Story; productId: string }

interface StoryDialogProps {
  state: StoryDialogState | null
  onClose: () => void
  isDemo?: boolean
}

interface ActionResult {
  success?: boolean
  error?: string
  code?: number
  fieldErrors?: Record<string, string[]>
  story?: unknown
}

const STATUS_COLORS: Record<string, string> = {
  OPEN: 'bg-status-todo/15 text-status-todo border-status-todo/30',
  IN_SPRINT: 'bg-status-in-progress/15 text-status-in-progress border-status-in-progress/30',
  DONE: 'bg-status-done/15 text-status-done border-status-done/30',
}
const STATUS_LABELS: Record<string, string> = {
  OPEN: 'Open',
  IN_SPRINT: 'In Sprint',
  DONE: 'Klaar',
}

export function StoryDialog({ state, onClose, isDemo = false }: StoryDialogProps) {
  const isEdit = state?.mode === 'edit'
  const story = isEdit ? (state as Extract<StoryDialogState, { mode: 'edit' }>).story : null
  const createState_ = isEdit ? null : (state as Extract<StoryDialogState, { mode: 'create' }> | null)

  const [priority, setPriority] = useState(story?.priority ?? createState_?.defaultPriority ?? 2)
  const [confirmDelete, setConfirmDelete] = useState(false)
  const [isDeleting, startDeleteTransition] = useTransition()
  const [logs, setLogs] = useState<Awaited<ReturnType<typeof getStoryLogsAction>> | null>(null)
  const [dirty, setDirty] = useState(false)
  const formRef = useRef<HTMLFormElement>(null)

  useEffect(() => {
    if (!state) return
    // eslint-disable-next-line react-hooks/set-state-in-effect
    setConfirmDelete(false)
    setDirty(false)
    if (state.mode === 'edit') {
      setPriority(state.story.priority)
      setLogs(null)
      getStoryLogsAction(state.story.id).then(setLogs)
    } else {
      setPriority(state.defaultPriority ?? 2)
    }
  }, [state])

  const [createResult, createAction, createPending] = useActionState<ActionResult | undefined, FormData>(
    async (_prev, fd) => {
      const result = await createStoryAction(_prev, fd) as ActionResult
      if (result?.success) { toast.success('Story aangemaakt'); onClose() }
      else if (result?.code !== 422 && result?.error) toast.error(result.error)
      return result
    },
    undefined,
  )

  const [updateResult, updateAction, updatePending] = useActionState<ActionResult | undefined, FormData>(
    async (_prev, fd) => {
      const result = await updateStoryAction(_prev, fd) as ActionResult
      if (result?.success) { toast.success('Story opgeslagen'); onClose() }
      else if (result?.code !== 422 && result?.error) toast.error(result.error)
      return result
    },
    undefined,
  )

  const pending = isEdit ? updatePending : createPending
  const activeResult = isEdit ? updateResult : createResult
  const fieldError = (field: string) => activeResult?.fieldErrors?.[field]?.[0]

  function handleDelete() {
    if (!story) return
    setConfirmDelete(false)
    startDeleteTransition(async () => {
      const result = await deleteStoryAction(story.id)
      if (result && 'error' in result) toast.error(result.error ?? 'Verwijderen mislukt')
      else toast.success('Story verwijderd')
      onClose()
    })
  }

  const titleRef = useRef<HTMLInputElement>(null)
  useEffect(() => {
    if (state) setTimeout(() => titleRef.current?.focus(), 50)
  }, [state])

  const closeGuard = useDirtyCloseGuard(dirty, onClose)
  const handleKeyDown = useDialogSubmitShortcut(() => formRef.current?.requestSubmit())

  const showForm = !isDemo || !isEdit

  return (
    <>
      <Dialog open={!!state} onOpenChange={(open) => { if (!open) closeGuard.attemptClose() }}>
        <DialogContent
          showCloseButton={false}
          onKeyDown={handleKeyDown}
          className={entityDialogContentClasses}
        >
          <div className={cn(entityDialogHeaderClasses, 'flex-col items-stretch gap-1')}>
            <div className="flex items-start gap-2">
              <DialogTitle className="flex-1 text-xl font-semibold">
                {isEdit ? story!.title : 'Nieuwe story'}
              </DialogTitle>
              {isEdit && story!.code && (
                <span className="font-mono text-[11px] text-muted-foreground border border-border rounded-md bg-surface-container px-1.5 py-0.5 shrink-0 mt-0.5">
                  {story!.code}
                </span>
              )}
            </div>
            {isEdit && (
              <div className="flex gap-2">
                <Badge className={cn('text-xs border', PRIORITY_COLORS[priority])}>
                  {PRIORITY_LABELS[priority]}
                </Badge>
                <Badge className={cn('text-xs border', STATUS_COLORS[story!.status])}>
                  {STATUS_LABELS[story!.status]}
                </Badge>
              </div>
            )}
          </div>

          <form
            ref={formRef}
            id="story-form"
            key={isEdit ? story!.id : 'create'}
            action={isEdit ? updateAction : createAction}
            onChange={() => setDirty(true)}
            className="flex-1 overflow-y-auto"
          >
            {isEdit && <input type="hidden" name="id" value={story!.id} />}
            {!isEdit && (
              <>
                <input type="hidden" name="pbiId" value={createState_?.pbiId ?? ''} />
                <input type="hidden" name="productId" value={createState_?.productId ?? ''} />
              </>
            )}
            <input type="hidden" name="priority" value={priority} />

            {showForm ? (
              <div className="px-6 py-6 space-y-6">
                <div className="grid grid-cols-[6rem_1fr] gap-3">
                  <div className="space-y-1.5">
                    <label htmlFor="story-code" className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Code</label>
                    <Input
                      id="story-code"
                      name="code"
                      defaultValue={story?.code ?? ''}
                      placeholder={isEdit ? '' : 'auto'}
                      maxLength={30}
                      disabled={isDemo}
                      aria-invalid={!!fieldError('code')}
                      className={cn('font-mono text-sm', fieldError('code') ? 'border-error' : '')}
                    />
                    {fieldError('code') && <p className="text-xs text-error">{fieldError('code')}</p>}
                  </div>
                  <div className="space-y-1.5">
                    <label htmlFor="story-title" className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
                      Titel <span className="text-error">*</span>
                    </label>
                    <Input
                      id="story-title"
                      ref={titleRef}
                      name="title"
                      defaultValue={story?.title ?? ''}
                      required
                      maxLength={200}
                      disabled={isDemo}
                      aria-invalid={!!fieldError('title')}
                      className={fieldError('title') ? 'border-error' : ''}
                    />
                    {fieldError('title') && <p className="text-xs text-error">{fieldError('title')}</p>}
                  </div>
                </div>

                <div className="space-y-1.5">
                  <span id="story-priority-label" className="block text-xs font-medium text-muted-foreground uppercase tracking-wide">Prioriteit</span>
                  <PrioritySelect value={priority} onChange={(v) => { setPriority(v); setDirty(true) }} />
                </div>

                <div className="space-y-1.5">
                  <label htmlFor="story-description" className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
                    Omschrijving <span className="normal-case font-normal">(optioneel)</span>
                  </label>
                  <Textarea
                    id="story-description"
                    name="description"
                    rows={3}
                    defaultValue={story?.description ?? ''}
                    placeholder="Als… wil ik… zodat…"
                    disabled={isDemo}
                    className="resize-none"
                  />
                </div>

                <div className="space-y-1.5">
                  <label htmlFor="story-acceptance" className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
                    Acceptatiecriteria <span className="normal-case font-normal">(optioneel)</span>
                  </label>
                  <Textarea
                    id="story-acceptance"
                    name="acceptance_criteria"
                    rows={3}
                    defaultValue={story?.acceptance_criteria ?? ''}
                    placeholder="- Gegeven… Als… Dan…"
                    disabled={isDemo}
                    className="resize-none"
                  />
                </div>
              </div>
            ) : (
              <div className="px-6 py-6 space-y-6">
                {story?.description && (
                  <div>
                    <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-1">Omschrijving</p>
                    <Markdown>{story.description}</Markdown>
                  </div>
                )}
                {story?.acceptance_criteria && (
                  <div>
                    <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-1">Acceptatiecriteria</p>
                    <p className="text-sm whitespace-pre-line">{story.acceptance_criteria}</p>
                  </div>
                )}
              </div>
            )}

            {isEdit && (
              <div className="px-6 py-4 border-t border-outline-variant">
                <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-3">Activiteitenlog</p>
                {logs && 'logs' in logs && logs.logs ? (
                  <StoryLog
                    logs={logs.logs.map(l => ({
                      ...l,
                      status: l.status ?? null,
                      commit_hash: l.commit_hash ?? null,
                      commit_message: l.commit_message ?? null,
                    }))}
                    repoUrl={logs.repoUrl}
                  />
                ) : (
                  <p className="text-xs text-muted-foreground">Laden…</p>
                )}
              </div>
            )}
          </form>

          <div className={entityDialogFooterClasses}>
            <div className="flex items-center justify-between gap-2">
              {isEdit ? (
                <DemoTooltip show={isDemo}>
                  <Button
                    type="button"
                    variant="destructive"
                    disabled={isDemo || isDeleting || pending}
                    onClick={() => setConfirmDelete(true)}
                  >
                    Verwijderen
                  </Button>
                </DemoTooltip>
              ) : (
                <div />
              )}
              <div className="flex gap-2">
                <Button type="button" variant="ghost" onClick={closeGuard.attemptClose} disabled={pending}>
                  Annuleren
                </Button>
                <DemoTooltip show={isDemo}>
                  <Button type="submit" form="story-form" disabled={pending || isDemo}>
                    {pending ? '…' : isEdit ? 'Opslaan' : 'Aanmaken'}
                  </Button>
                </DemoTooltip>
              </div>
            </div>
          </div>
        </DialogContent>
      </Dialog>

      <DirtyCloseGuardDialog guard={closeGuard} />

      <AlertDialog open={confirmDelete} onOpenChange={setConfirmDelete}>
        <AlertDialogContent size="sm">
          <AlertDialogHeader>
            <AlertDialogTitle>Story verwijderen</AlertDialogTitle>
            <AlertDialogDescription>
              Weet je het zeker? Bijbehorende taken worden ook verwijderd. Dit kan niet ongedaan worden.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel onClick={() => setConfirmDelete(false)}>
              Annuleren
            </AlertDialogCancel>
            <AlertDialogAction variant="destructive" disabled={isDeleting} onClick={handleDelete}>
              {isDeleting ? 'Bezig…' : 'Verwijderen'}
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  )
}