Scrum4Me/components/backlog/sprint-edit-dialog.tsx

'use client'

import { useRef, useState, useTransition } from 'react'
import { useRouter } from 'next/navigation'
import Link from 'next/link'
import { toast } from 'sonner'
import { Button } from '@/components/ui/button'
import { Textarea } from '@/components/ui/textarea'
import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog'
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 { updateSprintAction } from '@/actions/sprints'
import { debugProps } from '@/lib/debug'

interface SprintEditDialogProps {
  open: boolean
  productId: string
  sprint: {
    id: string
    code: string
    sprint_goal: string
    start_date?: string | null
    end_date?: string | null
  }
  onOpenChange: (open: boolean) => void
}

function toDateInput(value: string | null | undefined): string {
  if (!value) return ''
  // Accept ISO datetime or YYYY-MM-DD; output YYYY-MM-DD.
  const d = new Date(value)
  if (Number.isNaN(d.getTime())) return ''
  return d.toLocaleDateString('en-CA')
}

export function SprintEditDialog({
  open,
  productId,
  sprint,
  onOpenChange,
}: SprintEditDialogProps) {
  const [goal, setGoal] = useState(sprint.sprint_goal)
  const [startDate, setStartDate] = useState(toDateInput(sprint.start_date))
  const [endDate, setEndDate] = useState(toDateInput(sprint.end_date))
  const [error, setError] = useState<string | null>(null)
  const [dirty, setDirty] = useState(false)
  const [isPending, startTransition] = useTransition()
  const formRef = useRef<HTMLFormElement>(null)
  const router = useRouter()

  function reset() {
    setGoal(sprint.sprint_goal)
    setStartDate(toDateInput(sprint.start_date))
    setEndDate(toDateInput(sprint.end_date))
    setError(null)
    setDirty(false)
  }

  const closeGuard = useDirtyCloseGuard(dirty, () => {
    onOpenChange(false)
    reset()
  })

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    const trimmed = goal.trim()
    if (!trimmed) return
    setError(null)
    startTransition(async () => {
      const result = await updateSprintAction({
        sprintId: sprint.id,
        fields: {
          goal: trimmed,
          startAt: startDate || null,
          endAt: endDate || null,
        },
      })
      if ('error' in result) {
        setError(result.error)
        toast.error(result.error)
        return
      }
      toast.success('Sprint bijgewerkt')
      onOpenChange(false)
      router.refresh()
    })
  }

  const handleKeyDown = useDialogSubmitShortcut(() =>
    formRef.current?.requestSubmit(),
  )

  return (
    <>
      <Dialog
        open={open}
        onOpenChange={(o) => {
          if (!o) closeGuard.attemptClose()
          else onOpenChange(o)
        }}
      >
        <DialogContent
          showCloseButton={false}
          onKeyDown={handleKeyDown}
          className={entityDialogContentClasses}
          {...debugProps(
            'sprint-edit-dialog',
            'SprintEditDialog',
            'components/backlog/sprint-edit-dialog.tsx',
          )}
        >
          <div className={entityDialogHeaderClasses}>
            <DialogTitle className="text-xl font-semibold">
              Sprint {sprint.code} bewerken
            </DialogTitle>
            <p className="text-xs text-muted-foreground mt-1">
              Wijzig sprint-doel en datums. Voor afronding (per-story DONE/OPEN
              beslissing) ga naar de sprint-pagina.
            </p>
          </div>

          <form
            ref={formRef}
            id="sprint-edit-form"
            onSubmit={handleSubmit}
            onChange={() => setDirty(true)}
            className="flex-1 overflow-y-auto px-6 py-6 space-y-6"
          >
            <div className="space-y-1.5">
              <label className="text-sm font-medium text-foreground">
                Sprint Goal <span className="text-error">*</span>
              </label>
              <Textarea
                value={goal}
                onChange={(e) => setGoal(e.target.value)}
                required
                rows={3}
                autoFocus
              />
            </div>

            <div className="grid grid-cols-2 gap-3">
              <div className="space-y-1.5">
                <label className="text-sm font-medium text-foreground">
                  Startdatum
                </label>
                <input
                  type="date"
                  value={startDate}
                  onChange={(e) => setStartDate(e.target.value)}
                  className="w-full rounded-md border border-border bg-surface-container px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary"
                />
              </div>
              <div className="space-y-1.5">
                <label className="text-sm font-medium text-foreground">
                  Einddatum
                </label>
                <input
                  type="date"
                  value={endDate}
                  onChange={(e) => setEndDate(e.target.value)}
                  className="w-full rounded-md border border-border bg-surface-container px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary"
                />
              </div>
            </div>

            <div className="pt-2 border-t border-border">
              <Link
                href={`/products/${productId}/sprint/${sprint.id}`}
                className="text-sm text-primary hover:underline"
              >
                Sprint afronden… →
              </Link>
            </div>

            {error && (
              <div className="bg-error-container text-error-container-foreground rounded-lg px-3 py-2 text-sm border-l-4 border-error">
                {error}
              </div>
            )}
          </form>

          <div className={entityDialogFooterClasses}>
            <div className="flex justify-end gap-2">
              <Button
                type="button"
                variant="ghost"
                onClick={closeGuard.attemptClose}
                disabled={isPending}
              >
                Annuleren
              </Button>
              <Button
                type="submit"
                form="sprint-edit-form"
                disabled={isPending || !goal.trim()}
                data-debug-id="sprint-edit-dialog__submit"
              >
                {isPending ? 'Opslaan…' : 'Opslaan'}
              </Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>

      <DirtyCloseGuardDialog guard={closeGuard} />
    </>
  )
}