Scrum4Me/components/sprint/sprint-backlog.tsx

'use client'

import { useState } from 'react'
import { useDroppable, useDraggable } from '@dnd-kit/core'
import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable'
import { CSS } from '@dnd-kit/utilities'
import { Badge } from '@/components/ui/badge'
import { PanelNavBar } from '@/components/shared/panel-nav-bar'
import { useSprintStore } from '@/stores/sprint-store'
import { cn } from '@/lib/utils'

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

const PRIORITY_COLORS: Record<number, string> = {
  1: 'bg-priority-critical/15 text-priority-critical border-priority-critical/30',
  2: 'bg-priority-high/15 text-priority-high border-priority-high/30',
  3: 'bg-priority-medium/15 text-priority-medium border-priority-medium/30',
  4: 'bg-priority-low/15 text-priority-low border-priority-low/30',
}
const PRIORITY_LABELS: Record<number, string> = { 1: 'Kritiek', 2: 'Hoog', 3: 'Gemiddeld', 4: 'Laag' }

export interface SprintStory {
  id: string
  title: string
  priority: number
  status: string
  taskCount: number
  doneCount: number
}

export interface PbiWithStories {
  id: string
  title: string
  stories: SprintStory[]
}

// --- Left panel: Sprint Backlog ---

function SortableSprintRow({
  story, isDemo, onRemove,
}: { story: SprintStory; isDemo: boolean; onRemove: () => void }) {
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: story.id })
  const style = { transform: CSS.Transform.toString(transform), transition, opacity: isDragging ? 0.4 : 1 }

  return (
    <div
      ref={setNodeRef}
      style={style}
      className="group flex items-center gap-3 px-4 py-2.5 border-b border-border hover:bg-surface-container transition-colors"
    >
      {!isDemo && (
        <span
          {...attributes}
          {...listeners}
          aria-label="Versleep om te sorteren of naar Product Backlog"
          className="text-muted-foreground cursor-grab active:cursor-grabbing shrink-0 select-none text-sm"
        >
          ⠿
        </span>
      )}
      <div className="flex-1 min-w-0">
        <p className="text-sm truncate">{story.title}</p>
        <div className="flex items-center gap-1.5 mt-0.5">
          <Badge className={cn('text-[10px] px-1.5 py-0 border', PRIORITY_COLORS[story.priority])}>
            {PRIORITY_LABELS[story.priority]}
          </Badge>
          <span className="text-xs text-muted-foreground">{story.doneCount}/{story.taskCount} klaar</span>
        </div>
      </div>
      {!isDemo && (
        <button
          onClick={e => { e.stopPropagation(); onRemove() }}
          className="opacity-0 group-hover:opacity-100 text-xs text-muted-foreground hover:text-error shrink-0"
        >
          Verwijderen
        </button>
      )}
    </div>
  )
}

interface SprintBacklogLeftProps {
  sprintId: string
  stories: SprintStory[]
  isDemo: boolean
  onRemove: (storyId: string) => void
}

export function SprintBacklogLeft({ sprintId, stories, isDemo, onRemove }: SprintBacklogLeftProps) {
  const { sprintStoryOrder } = useSprintStore()
  const { setNodeRef, isOver } = useDroppable({ id: 'sprint-zone' })

  const storyMap = Object.fromEntries(stories.map(s => [s.id, s]))
  const order = sprintStoryOrder[sprintId] ?? stories.map(s => s.id)
  const orderedStories = order.map(id => storyMap[id]).filter(Boolean)

  return (
    <div className="flex flex-col h-full">
      <PanelNavBar title="Sprint Backlog" />
      <div
        ref={setNodeRef}
        className={cn(
          'flex-1 overflow-y-auto transition-colors',
          isOver && 'bg-primary/5 ring-2 ring-inset ring-primary/20 rounded'
        )}
      >
        {orderedStories.length === 0 ? (
          <p className={cn(
            'text-sm text-muted-foreground text-center mt-8 px-4',
            isOver && 'text-primary'
          )}>
            {isOver ? 'Loslaten om toe te voegen aan Sprint' : 'Geen stories in de Sprint. Sleep stories vanuit het rechterpaneel.'}
          </p>
        ) : (
          <SortableContext items={orderedStories.map(s => s.id)} strategy={verticalListSortingStrategy}>
            {orderedStories.map(story => (
              <SortableSprintRow
                key={story.id}
                story={story}
                isDemo={isDemo}
                onRemove={() => onRemove(story.id)}
              />
            ))}
          </SortableContext>
        )}
      </div>
    </div>
  )
}

// --- Right panel: Product Backlog grouped by PBI ---

function DraggablePbiStoryRow({ story, isDemo }: { story: SprintStory; isDemo: boolean }) {
  const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({ id: `pb:${story.id}` })
  const style = transform
    ? { transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`, zIndex: 50, position: 'relative' as const }
    : undefined

  return (
    <div
      ref={setNodeRef}
      style={style}
      className={cn(
        'flex items-center gap-3 px-6 py-2 border-b border-border/50 hover:bg-surface-container transition-colors',
        isDragging && 'opacity-40'
      )}
    >
      {!isDemo && (
        <span
          {...attributes}
          {...listeners}
          aria-label="Sleep naar Sprint Backlog"
          className="text-muted-foreground cursor-grab active:cursor-grabbing shrink-0 select-none text-sm"
        >
          ⠿
        </span>
      )}
      <div className="flex-1 min-w-0">
        <p className="text-sm truncate">{story.title}</p>
        <Badge className={cn('text-[10px] px-1.5 py-0 border mt-0.5', STATUS_COLORS[story.status])}>
          {STATUS_LABELS[story.status]}
        </Badge>
      </div>
    </div>
  )
}

interface SprintBacklogRightProps {
  pbisWithStories: PbiWithStories[]
  sprintStoryIds: Set<string>
  isDemo: boolean
}

export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo }: SprintBacklogRightProps) {
  const [collapsed, setCollapsed] = useState<Set<string>>(new Set())
  const { setNodeRef, isOver } = useDroppable({ id: 'backlog-zone' })

  function toggle(pbiId: string) {
    setCollapsed(prev => {
      const next = new Set(prev)
      if (next.has(pbiId)) { next.delete(pbiId) } else { next.add(pbiId) }
      return next
    })
  }

  return (
    <div className="flex flex-col h-full">
      <PanelNavBar title="Product Backlog" />
      <div
        ref={setNodeRef}
        className={cn(
          'flex-1 overflow-y-auto py-2 transition-colors',
          isOver && 'bg-error/5 ring-2 ring-inset ring-error/20 rounded'
        )}
      >
        {pbisWithStories.map(pbi => (
          <div key={pbi.id}>
            <button
              onClick={() => toggle(pbi.id)}
              className="w-full flex items-center gap-2 px-4 py-1.5 hover:bg-surface-container transition-colors text-left"
            >
              <span className="text-xs">{collapsed.has(pbi.id) ? '▶' : '▼'}</span>
              <span className="text-sm font-medium truncate flex-1">{pbi.title}</span>
              <span className="text-xs text-muted-foreground">{pbi.stories.length}</span>
            </button>

            {!collapsed.has(pbi.id) && pbi.stories.map(story => {
              const inSprint = sprintStoryIds.has(story.id)
              if (inSprint) {
                return (
                  <div
                    key={story.id}
                    className="flex items-center gap-3 px-6 py-2 border-b border-border/50 opacity-40"
                  >
                    <div className="w-[14px] shrink-0" />
                    <div className="flex-1 min-w-0">
                      <p className="text-sm truncate">{story.title}</p>
                      <Badge className={cn('text-[10px] px-1.5 py-0 border mt-0.5', STATUS_COLORS[story.status])}>
                        {STATUS_LABELS[story.status]}
                      </Badge>
                    </div>
                    <span className="text-xs text-muted-foreground shrink-0">In Sprint</span>
                  </div>
                )
              }
              return <DraggablePbiStoryRow key={story.id} story={story} isDemo={isDemo} />
            })}
          </div>
        ))}
      </div>
    </div>
  )
}