Scrum4Me/components/backlog/pbi-dialog.tsx

'use client'

import { useEffect, useRef, useState } from 'react'
import { useActionState } from 'react'
import { useFormStatus } from 'react-dom'
import { toast } from 'sonner'
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
  DialogClose,
} from '@/components/ui/dialog'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Textarea } from '@/components/ui/textarea'
import { PrioritySelect } from '@/components/shared/priority-select'
import { createPbiAction, updatePbiAction } from '@/actions/pbis'

export interface PbiDialogPbi {
  id: string
  title: string
  priority: number
  description?: string | null
}

type CreateState = { mode: 'create'; productId: string; defaultPriority?: number }
type EditState = { mode: 'edit'; pbi: PbiDialogPbi; productId: string }
export type PbiDialogState = CreateState | EditState

interface PbiDialogProps {
  state: PbiDialogState | null
  onClose: () => void
}

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

export function PbiDialog({ state, onClose }: PbiDialogProps) {
  const isEdit = state?.mode === 'edit'
  const pbi = isEdit ? state.pbi : null

  const initialPriority = isEdit ? pbi!.priority : (state?.defaultPriority ?? 2)
  const [priority, setPriority] = useState<number>(initialPriority)

  // Sync priority when dialog opens for a different PBI or switches create/edit mode
  useEffect(() => {
    if (state) {
      // eslint-disable-next-line react-hooks/set-state-in-effect
      setPriority(isEdit ? (state as EditState).pbi.priority : ((state as CreateState).defaultPriority ?? 2))
    }
  }, [state, isEdit])

  const [createState, createAction] = useActionState(
    async (_prev: unknown, fd: FormData) => {
      const result = await createPbiAction(_prev, fd)
      if (result?.success) { toast.success('PBI aangemaakt'); onClose() }
      else if (typeof result?.error === 'string') toast.error(result.error)
      return result
    },
    undefined
  )

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

  const error = isEdit
    ? (typeof updateState?.error === 'string' ? updateState.error : null)
    : (typeof createState?.error === 'string' ? createState.error : null)

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

  return (
    <Dialog open={!!state} onOpenChange={(open) => { if (!open) onClose() }}>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>{isEdit ? 'PBI bewerken' : 'Nieuw PBI'}</DialogTitle>
        </DialogHeader>

        <form key={isEdit ? pbi!.id : 'create'} action={isEdit ? updateAction : createAction} className="grid gap-4">
          {isEdit && <input type="hidden" name="id" value={pbi!.id} />}
          {!isEdit && <input type="hidden" name="productId" value={(state as CreateState | null)?.productId ?? ''} />}
          <input type="hidden" name="priority" value={priority} />

          <div className="grid gap-1.5">
            <label htmlFor="pbi-title" className="text-sm font-medium">Titel</label>
            <Input
              id="pbi-title"
              ref={titleRef}
              name="title"
              defaultValue={pbi?.title ?? ''}
              placeholder="PBI-titel…"
              required
              maxLength={200}
            />
          </div>

          <div className="grid gap-1.5">
            <label className="text-sm font-medium">Prioriteit</label>
            <PrioritySelect value={priority} onChange={setPriority} />
          </div>

          <div className="grid gap-1.5">
            <label htmlFor="pbi-description" className="text-sm font-medium">
              Beschrijving <span className="text-muted-foreground font-normal">(optioneel)</span>
            </label>
            <Textarea
              id="pbi-description"
              name="description"
              defaultValue={pbi?.description ?? ''}
              placeholder="Korte omschrijving van het PBI…"
              rows={3}
              maxLength={2000}
              className="resize-none"
            />
          </div>

          {error && <p className="text-xs text-error">{error}</p>}

          <DialogFooter>
            <DialogClose render={<Button type="button" variant="outline" />}>
              Annuleren
            </DialogClose>
            <SubmitButton label={isEdit ? 'Opslaan' : 'Aanmaken'} />
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  )
}