Scrum4Me/components/backlog/story-dialog.tsx

'use client'

import { useEffect, useRef, useState, useTransition } from 'react'
import { useActionState } from 'react'
import { useFormStatus } from 'react-dom'
import { toast } from 'sonner'
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogClose,
} from '@/components/ui/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 { 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
}

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',
}

function SubmitButton({ label }: { label: string }) {
  const { pending } = useFormStatus()
  return (
    <Button type="submit" disabled={pending}>
      {pending ? '…' : label}
    </Button>
  )
}

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)

  useEffect(() => {
    if (!state) return
    // eslint-disable-next-line react-hooks/set-state-in-effect
    setConfirmDelete(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] = useActionState(
    async (_prev: unknown, fd: FormData) => {
      const result = await createStoryAction(_prev, fd)
      if (result?.success) { toast.success('Story aangemaakt'); onClose() }
      else if (typeof result?.error === 'string') toast.error(result.error)
      return result
    },
    undefined
  )

  const [updateResult, updateAction] = useActionState(
    async (_prev: unknown, fd: FormData) => {
      const result = await updateStoryAction(_prev, fd)
      if (result?.success) { toast.success('Story opgeslagen'); onClose() }
      else if (typeof result?.error === 'string') toast.error(result.error)
      return result
    },
    undefined
  )

  const fieldError = (field: string) => {
    const err = updateResult?.error
    if (!err || typeof err === 'string') return undefined
    return (err as Record<string, string[]>)[field]?.[0]
  }

  function handleDelete() {
    if (!story) return
    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 showForm = !isDemo || !isEdit

  return (
    <Dialog open={!!state} onOpenChange={(open) => { if (!open) onClose() }}>
      <DialogContent className="sm:max-w-lg flex flex-col gap-0 p-0 max-h-[90vh] overflow-hidden">
        <DialogHeader className="px-5 pt-5 pb-4 border-b border-border shrink-0 pr-14">
          <DialogTitle>{isEdit ? story!.title : 'Nieuwe story'}</DialogTitle>
          {isEdit && (
            <div className="flex gap-2 mt-1">
              <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>
          )}
        </DialogHeader>

        <form
          key={isEdit ? story!.id : 'create'}
          action={isEdit ? updateAction : createAction}
          className="flex flex-col min-h-0 flex-1"
        >
          {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} />

          <div className="flex-1 overflow-y-auto">
            {showForm ? (
              <div className="p-5 space-y-4">
                <div className="space-y-1.5">
                  <label className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Titel</label>
                  <Input
                    ref={titleRef}
                    name="title"
                    defaultValue={story?.title ?? ''}
                    required
                    maxLength={200}
                    className={fieldError('title') ? 'border-error' : ''}
                  />
                  {fieldError('title') && <p className="text-xs text-error">{fieldError('title')}</p>}
                </div>

                <div className="space-y-1.5">
                  <label className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Prioriteit</label>
                  <PrioritySelect value={priority} onChange={setPriority} />
                </div>

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

                <div className="space-y-1.5">
                  <label className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
                    Acceptatiecriteria <span className="normal-case font-normal">(optioneel)</span>
                  </label>
                  <Textarea
                    name="acceptance_criteria"
                    rows={3}
                    defaultValue={story?.acceptance_criteria ?? ''}
                    placeholder="- Gegeven… Als… Dan…"
                    className="resize-none"
                  />
                </div>

                {typeof (isEdit ? updateResult?.error : createResult?.error) === 'string' && (
                  <p className="text-xs text-error">
                    {String(isEdit ? updateResult?.error : createResult?.error)}
                  </p>
                )}
              </div>
            ) : (
              <div className="p-5 space-y-4">
                {story?.description && (
                  <div>
                    <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-1">Omschrijving</p>
                    <p className="text-sm">{story.description}</p>
                  </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-5 py-4 border-t border-border">
                <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>
            )}
          </div>

          {isEdit && !isDemo && (
            <div className="px-5 py-3 border-t border-border shrink-0">
              {confirmDelete ? (
                <div className="flex items-center gap-2">
                  <span className="text-xs text-muted-foreground flex-1">
                    Weet je het zeker? Taken worden ook verwijderd.
                  </span>
                  <Button type="button" variant="destructive" size="sm" disabled={isDeleting} onClick={handleDelete}>
                    {isDeleting ? 'Bezig…' : 'Verwijderen'}
                  </Button>
                  <Button type="button" variant="ghost" size="sm" onClick={() => setConfirmDelete(false)}>
                    Annuleren
                  </Button>
                </div>
              ) : (
                <Button
                  type="button"
                  variant="ghost"
                  size="sm"
                  className="text-error hover:bg-error/10"
                  onClick={() => setConfirmDelete(true)}
                >
                  Story verwijderen
                </Button>
              )}
            </div>
          )}

          <div className="flex justify-end gap-2 px-5 py-4 border-t border-border shrink-0 rounded-b-xl bg-muted/50">
            <DialogClose render={<Button type="button" variant="outline" />}>
              {isDemo ? 'Sluiten' : 'Annuleren'}
            </DialogClose>
            {!isDemo && <SubmitButton label={isEdit ? 'Opslaan' : 'Aanmaken'} />}
          </div>
        </form>
      </DialogContent>
    </Dialog>
  )
}