Scrum4Me/components/solo/unassigned-stories-sheet.tsx

'use client'

import { useState } from 'react'
import { useFormStatus } from 'react-dom'
import { toast } from 'sonner'
import {
  Sheet, SheetContent, SheetHeader, SheetTitle,
} from '@/components/ui/sheet'
import { DemoTooltip } from '@/components/shared/demo-tooltip'
import { CodeBadge } from '@/components/shared/code-badge'
import { claimStoryAction } from '@/actions/stories'
import { cn } from '@/lib/utils'

export interface UnassignedStoryTask {
  id: string
  title: string
  description: string | null
  priority: number
  status: string
}

export interface UnassignedStory {
  id: string
  code: string | null
  title: string
  tasks: UnassignedStoryTask[]
}

interface UnassignedStoriesSheetProps {
  stories: UnassignedStory[]
  productId: string
  isDemo: boolean
  open: boolean
  onOpenChange: (open: boolean) => void
  onClaim: (storyId: string) => void
}

const PRIORITY_BORDER: Record<number, string> = {
  1: 'border-l-2 border-l-priority-critical',
  2: 'border-l-2 border-l-priority-high',
  3: 'border-l-2 border-l-priority-medium',
  4: 'border-l-2 border-l-priority-low',
}

const STATUS_COLORS: Record<string, string> = {
  TO_DO: 'bg-status-todo/15 text-status-todo',
  IN_PROGRESS: 'bg-status-in-progress/15 text-status-in-progress',
  REVIEW: 'bg-status-in-progress/15 text-status-in-progress',
  DONE: 'bg-status-done/15 text-status-done',
}

const STATUS_LABELS: Record<string, string> = {
  TO_DO: 'To Do',
  IN_PROGRESS: 'Bezig',
  REVIEW: 'Review',
  DONE: 'Klaar',
}

const PRIORITY_LABELS: Record<number, string> = { 1: 'Kritiek', 2: 'Hoog', 3: 'Gemiddeld', 4: 'Laag' }

function TaskRow({ task }: { task: UnassignedStoryTask }) {
  const [expanded, setExpanded] = useState(false)

  return (
    <div
      role="button"
      tabIndex={0}
      aria-expanded={expanded}
      onClick={() => setExpanded(e => !e)}
      onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setExpanded(v => !v) } }}
      className={cn(
        'px-3 py-2 cursor-pointer select-none',
        PRIORITY_BORDER[task.priority],
      )}
    >
      <div className="flex items-center gap-2">
        <span className="flex-1 text-sm text-foreground truncate">{task.title}</span>
        <span className={cn('text-xs px-1.5 py-0.5 rounded shrink-0', STATUS_COLORS[task.status] ?? STATUS_COLORS.TO_DO)}>
          {STATUS_LABELS[task.status] ?? task.status}
        </span>
        <span className="text-xs text-muted-foreground shrink-0">{PRIORITY_LABELS[task.priority]}</span>
      </div>
      {expanded && (
        <p className="mt-1 text-xs text-muted-foreground whitespace-pre-wrap">
          {task.description ?? 'Geen beschrijving.'}
        </p>
      )}
    </div>
  )
}

function ClaimButton({ isDemo }: { isDemo: boolean }) {
  const { pending } = useFormStatus()
  return (
    <DemoTooltip show={isDemo}>
      <button
        type="submit"
        disabled={isDemo || pending}
        className="text-xs text-primary hover:underline disabled:text-muted-foreground disabled:cursor-default"
      >
        {pending ? '…' : 'Pak op'}
      </button>
    </DemoTooltip>
  )
}

function ClaimStoryRow({
  story, productId, isDemo, onClaim,
}: { story: UnassignedStory; productId: string; isDemo: boolean; onClaim: (id: string) => void }) {
  async function formAction() {
    const result = await claimStoryAction(story.id, productId)
    if (result && 'error' in result) {
      toast.error(result.error)
    } else {
      onClaim(story.id)
      toast.success(`"${story.title}" geclaimd`)
    }
  }

  return (
    <div className="rounded-lg border border-border bg-surface-container overflow-hidden">
      <div className="flex items-center gap-3 px-3 py-2.5">
        <div className="flex-1 min-w-0">
          <div className="flex items-start justify-between gap-2">
            <p className="text-sm font-medium text-foreground truncate flex-1">{story.title}</p>
            {story.code && <CodeBadge code={story.code} className="shrink-0 mt-0.5" />}
          </div>
          <p className="text-xs text-muted-foreground">
            {story.tasks.length} {story.tasks.length === 1 ? 'taak' : 'taken'}
          </p>
        </div>
        <form action={formAction}>
          <ClaimButton isDemo={isDemo} />
        </form>
      </div>
      {story.tasks.length > 0 && (
        <div className="border-t border-border divide-y divide-border">
          {story.tasks.map(task => (
            <TaskRow key={task.id} task={task} />
          ))}
        </div>
      )}
    </div>
  )
}

export function UnassignedStoriesSheet({
  stories: initialStories, productId, isDemo, open, onOpenChange, onClaim,
}: UnassignedStoriesSheetProps) {
  const [stories, setStories] = useState(initialStories)

  function handleClaim(storyId: string) {
    setStories(prev => prev.filter(s => s.id !== storyId))
    onClaim(storyId)
  }

  return (
    <Sheet open={open} onOpenChange={onOpenChange}>
      <SheetContent side="right">
        <SheetHeader>
          <SheetTitle>Openstaande stories</SheetTitle>
        </SheetHeader>

        <div className="flex-1 overflow-y-auto">
          {stories.length === 0 ? (
            <div className="flex items-center justify-center h-32">
              <p className="text-sm text-muted-foreground text-center">
                Geen ongeclaimde stories. Lekker bezig!
              </p>
            </div>
          ) : (
            <div className="flex flex-col gap-2">
              {stories.map(story => (
                <ClaimStoryRow
                  key={story.id}
                  story={story}
                  productId={productId}
                  isDemo={isDemo}
                  onClaim={handleClaim}
                />
              ))}
            </div>
          )}
        </div>
      </SheetContent>
    </Sheet>
  )
}