Scrum4Me/components/backlog/pbi-dialog.tsx

'use client'

import { useEffect, useRef, useState } from 'react'
import { useActionState } from 'react'
import { toast } from 'sonner'
import {
  Dialog,
  DialogContent,
  DialogTitle,
} 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 { PbiStatusSelect } from '@/components/shared/pbi-status-select'
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 {
  entityDialogBodyClasses,
  entityDialogContentClasses,
  entityDialogFooterClasses,
  entityDialogHeaderClasses,
} from '@/components/shared/entity-dialog-layout'
import { createPbiAction, updatePbiAction } from '@/actions/pbis'
import type { PbiStatusApi } from '@/lib/task-status'
import { debugProps } from '@/lib/debug'

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

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
  isDemo?: boolean
}

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

export function PbiDialog({ state, onClose, isDemo = false }: 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)

  const initialStatus: PbiStatusApi = isEdit ? (pbi!.status ?? 'ready') : 'ready'
  const [status, setStatus] = useState<PbiStatusApi>(initialStatus)

  const [dirty, setDirty] = useState(false)
  const formRef = useRef<HTMLFormElement>(null)

  // Sync priority + status + reset dirty when dialog opens for a different PBI or switches 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))
      setStatus(isEdit ? ((state as EditState).pbi.status ?? 'ready') : 'ready')
      setDirty(false)
    }
  }, [state, isEdit])

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

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

  const pending = isEdit ? updatePending : createPending

  const activeState = isEdit ? updateState : createState
  const fieldError = (field: string) => activeState?.fieldErrors?.[field]?.[0]

  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())

  return (
    <>
      <Dialog open={!!state} onOpenChange={(open) => { if (!open) closeGuard.attemptClose() }}>
        <DialogContent
          showCloseButton={false}
          onKeyDown={handleKeyDown}
          className={entityDialogContentClasses}
          {...debugProps('pbi-dialog', 'PbiDialog', 'components/backlog/pbi-dialog.tsx')}
        >
          <div className={entityDialogHeaderClasses}>
            <DialogTitle className="text-xl font-semibold">
              {isEdit ? 'PBI bewerken' : 'Nieuw PBI'}
            </DialogTitle>
          </div>

          <form
            ref={formRef}
            id="pbi-form"
            key={isEdit ? pbi!.id : 'create'}
            action={isEdit ? updateAction : createAction}
            onChange={() => setDirty(true)}
            className={entityDialogBodyClasses}
          >
            {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} />
            <input type="hidden" name="status" value={status} />

            <div className="grid grid-cols-[6rem_1fr] gap-3">
              <div className="grid gap-1.5">
                <label htmlFor="pbi-code" className="text-sm font-medium">Code</label>
                <Input
                  id="pbi-code"
                  name="code"
                  defaultValue={pbi?.code ?? ''}
                  placeholder={isEdit ? '' : 'auto'}
                  maxLength={30}
                  disabled={isDemo}
                  aria-invalid={!!fieldError('code')}
                  className={fieldError('code') ? 'font-mono text-sm border-error' : 'font-mono text-sm'}
                />
                {fieldError('code') && <p className="text-xs text-error">{fieldError('code')}</p>}
              </div>
              <div className="grid gap-1.5">
                <label htmlFor="pbi-title" className="text-sm font-medium">Titel <span className="text-error">*</span></label>
                <Input
                  id="pbi-title"
                  ref={titleRef}
                  name="title"
                  defaultValue={pbi?.title ?? ''}
                  placeholder="PBI-titel…"
                  required
                  maxLength={200}
                  disabled={isDemo}
                  aria-invalid={!!fieldError('title')}
                  className={fieldError('title') ? 'border-error' : ''}
                  {...debugProps('pbi-dialog__title')}
                />
                {fieldError('title') && <p className="text-xs text-error">{fieldError('title')}</p>}
              </div>
            </div>

            <div className="grid grid-cols-2 gap-3">
              <div className="grid gap-1.5">
                <label className="text-sm font-medium">Prioriteit</label>
                <PrioritySelect value={priority} onChange={(v) => { setPriority(v); setDirty(true) }} />
              </div>
              <div className="grid gap-1.5">
                <label className="text-sm font-medium">Status</label>
                <PbiStatusSelect value={status} onChange={(v) => { setStatus(v); setDirty(true) }} />
              </div>
            </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}
                disabled={isDemo}
                className="resize-none"
              />
            </div>
          </form>

          <div className={entityDialogFooterClasses}>
            <div className="flex items-center justify-end gap-2">
              <Button type="button" variant="ghost" onClick={closeGuard.attemptClose} disabled={pending}>
                Annuleren
              </Button>
              <DemoTooltip show={isDemo}>
                <Button type="submit" form="pbi-form" disabled={pending || isDemo} {...debugProps('pbi-dialog__submit')}>
                  {pending ? '…' : isEdit ? 'Opslaan' : 'Aanmaken'}
                </Button>
              </DemoTooltip>
            </div>
          </div>
        </DialogContent>
      </Dialog>
      <DirtyCloseGuardDialog guard={closeGuard} />
    </>
  )
}