Scrum4Me/components/backlog/pbi-list.tsx

'use client'

import { useState, useTransition, useEffect } from 'react'
import {
  DndContext,
  DragEndEvent,
  DragOverlay,
  DragStartEvent,
  KeyboardSensor,
  PointerSensor,
  useSensor,
  useSensors,
  closestCenter,
} from '@dnd-kit/core'
import {
  SortableContext,
  useSortable,
  verticalListSortingStrategy,
  arrayMove,
  sortableKeyboardCoordinates,
} from '@dnd-kit/sortable'
import { CSS } from '@dnd-kit/utilities'
import { toast } from 'sonner'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { PanelNavBar } from '@/components/shared/panel-nav-bar'
import { useSelectionStore } from '@/stores/selection-store'
import { usePlannerStore } from '@/stores/planner-store'
import { deletePbiAction } from '@/actions/pbis'
import { reorderPbisAction, updatePbiPriorityAction } from '@/actions/stories'
import { cn } from '@/lib/utils'
import { PbiDialog, type PbiDialogState } from './pbi-dialog'

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

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

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

interface PbiListProps {
  productId: string
  pbis: Pbi[]
  isDemo: boolean
}

// --- Sortable PBI row ---
function SortablePbiRow({
  pbi,
  isSelected,
  isDemo,
  onSelect,
  onEdit,
  onDelete,
}: {
  pbi: Pbi
  isSelected: boolean
  isDemo: boolean
  onSelect: () => void
  onEdit: () => void
  onDelete: () => void
}) {
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
    id: pbi.id,
  })

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
    opacity: isDragging ? 0.4 : 1,
  }

  return (
    <div
      ref={setNodeRef}
      style={style}
      onClick={onSelect}
      className={cn(
        'group flex items-center justify-between px-4 py-2 cursor-pointer transition-colors hover:bg-surface-container',
        isSelected && 'bg-primary-container text-primary-container-foreground'
      )}
    >
      {!isDemo && (
        <span
          {...attributes}
          {...listeners}
          aria-label="Versleep om te sorteren"
          className="mr-2 text-muted-foreground cursor-grab active:cursor-grabbing shrink-0 select-none"
          onClick={(e) => e.stopPropagation()}
        >
          ⠿
        </span>
      )}
      <span className="text-sm truncate flex-1">{pbi.title}</span>
      {!isDemo && (
        <div className="flex items-center gap-1 ml-2 shrink-0">
          <button
            onClick={(e) => { e.stopPropagation(); onEdit() }}
            className="border border-border rounded px-1.5 py-0.5 text-xs text-muted-foreground hover:text-foreground hover:bg-surface-container transition-colors"
            aria-label="Bewerk PBI"
          >
            ✎
          </button>
          <button
            onClick={(e) => { e.stopPropagation(); onDelete() }}
            className="opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-error text-xs"
            aria-label="Verwijder PBI"
          >
            ×
          </button>
        </div>
      )}
    </div>
  )
}

// --- Main component ---
export function PbiList({ productId, pbis, isDemo }: PbiListProps) {
  const { selectedPbiId, selectPbi } = useSelectionStore()
  const { pbiOrder, pbiPriority, initPbis, reorderPbis, rollbackPbis, updatePbiPriority } = usePlannerStore()
  const [filterPriority, setFilterPriority] = useState<number | null>(null)
  const [dialogState, setDialogState] = useState<PbiDialogState | null>(null)
  const [activeDragId, setActiveDragId] = useState<string | null>(null)
  const [, startTransition] = useTransition()

  // Sync server data into store — use stable string dep to avoid infinite loop
  const pbiIdKey = pbis.map(p => p.id).join(',')
  useEffect(() => {
    initPbis(productId, pbiIdKey ? pbiIdKey.split(',') : [])
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [productId, pbiIdKey])

  // Build ordered PBI list from store (or fall back to server order)
  const order = pbiOrder[productId] ?? pbis.map(p => p.id)
  const pbiMap = Object.fromEntries(pbis.map(p => [p.id, p]))

  // Apply priority overrides from store
  const orderedPbis = order
    .map(id => pbiMap[id])
    .filter(Boolean)
    .map(p => ({ ...p, priority: pbiPriority[p.id] ?? p.priority }))

  const filtered = filterPriority ? orderedPbis.filter(p => p.priority === filterPriority) : orderedPbis

  const grouped = [1, 2, 3, 4].reduce<Record<number, Pbi[]>>((acc, p) => {
    acc[p] = filtered.filter(pbi => pbi.priority === p)
    return acc
  }, {} as Record<number, Pbi[]>)

  const visiblePriorities = [1, 2, 3, 4].filter(p => grouped[p].length > 0)

  const sensors = useSensors(
    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
  )

  function handleDragStart(event: DragStartEvent) {
    setActiveDragId(event.active.id as string)
  }

  function handleDragEnd(event: DragEndEvent) {
    setActiveDragId(null)
    const { active, over } = event
    if (!over || active.id === over.id) return

    const activePbi = pbiMap[active.id as string]
    const overPbi = pbiMap[over.id as string]
    if (!activePbi || !overPbi) return

    const prevOrder = [...order]
    const oldIndex = order.indexOf(active.id as string)
    const newIndex = order.indexOf(over.id as string)
    const newOrder = arrayMove([...order], oldIndex, newIndex)

    // Optimistic update
    reorderPbis(productId, newOrder)

    const priorityChanged = activePbi.priority !== overPbi.priority

    startTransition(async () => {
      if (priorityChanged) {
        updatePbiPriority(active.id as string, overPbi.priority)
        const result = await updatePbiPriorityAction(active.id as string, overPbi.priority, productId)
        if (!result.success) {
          rollbackPbis(productId, prevOrder)
          toast.error('Prioriteit opslaan mislukt')
        }
      } else {
        const result = await reorderPbisAction(productId, newOrder)
        if (!result.success) {
          rollbackPbis(productId, prevOrder)
          toast.error('Volgorde opslaan mislukt')
        }
      }
    })
  }

  function handleDelete(id: string) {
    startTransition(async () => {
      await deletePbiAction(id)
      if (selectedPbiId === id) selectPbi(null)
    })
  }

  const activePbi = activeDragId ? pbiMap[activeDragId] : null

  return (
    <div className="flex flex-col h-full">
      <PanelNavBar
        title="Product Backlog"
        actions={
          <>
            {filterPriority !== null && (
              <button
                onClick={() => setFilterPriority(null)}
                className="flex items-center gap-1 text-xs text-primary hover:underline"
              >
                <Badge className={cn('text-xs', PRIORITY_COLORS[filterPriority])}>
                  {PRIORITY_LABELS[filterPriority]}
                </Badge>
                <span>×</span>
              </button>
            )}
            <Select
              value={filterPriority?.toString() ?? 'all'}
              onValueChange={(v) => setFilterPriority(!v || v === 'all' ? null : parseInt(v))}
            >
              <SelectTrigger className="h-7 w-28 text-xs">
                <SelectValue placeholder="Filter" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">Alle</SelectItem>
                <SelectItem value="1">Kritiek</SelectItem>
                <SelectItem value="2">Hoog</SelectItem>
                <SelectItem value="3">Gemiddeld</SelectItem>
                <SelectItem value="4">Laag</SelectItem>
              </SelectContent>
            </Select>
            {!isDemo && (
              <Button
                size="sm"
                className="h-7 text-xs"
                onClick={() => setDialogState({ mode: 'create', productId, defaultPriority: 2 })}
              >
                + PBI
              </Button>
            )}
          </>
        }
      />

      <div className="flex-1 overflow-y-auto">
        {pbis.length === 0 ? (
          <div className="p-8 text-center text-muted-foreground text-sm space-y-3">
            <p>Nog geen PBI&apos;s aangemaakt.</p>
            {!isDemo && (
              <Button size="sm" variant="outline" onClick={() => setDialogState({ mode: 'create', productId, defaultPriority: 2 })}>
                Maak je eerste PBI aan
              </Button>
            )}
          </div>
        ) : (
          <DndContext
            id="pbi-list"
            sensors={sensors}
            collisionDetection={closestCenter}
            onDragStart={handleDragStart}
            onDragEnd={handleDragEnd}
          >
            <div className="py-2">
              {visiblePriorities.map(priority => (
                <div key={priority}>
                  <div className="flex items-center gap-2 px-4 py-1.5">
                    <span className={cn('text-xs font-semibold px-2 py-0.5 rounded-full border', PRIORITY_COLORS[priority])}>
                      {PRIORITY_LABELS[priority]}
                    </span>
                    <div className="flex-1 h-px bg-border" />
                    {!isDemo && (
                      <button
                        onClick={() => setDialogState({ mode: 'create', productId, defaultPriority: priority })}
                        className="text-xs text-muted-foreground hover:text-foreground"
                      >
                        +
                      </button>
                    )}
                  </div>

                  <SortableContext
                    items={grouped[priority].map(p => p.id)}
                    strategy={verticalListSortingStrategy}
                  >
                    {grouped[priority].map(pbi => (
                      <SortablePbiRow
                        key={pbi.id}
                        pbi={pbi}
                        isSelected={selectedPbiId === pbi.id}
                        isDemo={isDemo}
                        onSelect={() => selectPbi(pbi.id)}
                        onEdit={() => setDialogState({ mode: 'edit', productId, pbi })}
                        onDelete={() => handleDelete(pbi.id)}
                      />
                    ))}
                  </SortableContext>

                </div>
              ))}
            </div>

            <DragOverlay>
              {activePbi && (
                <div className="bg-surface-container-low border border-primary rounded px-4 py-2 text-sm shadow-lg opacity-90">
                  {activePbi.title}
                </div>
              )}
            </DragOverlay>
          </DndContext>
        )}
      </div>

      <PbiDialog
        state={dialogState}
        onClose={() => setDialogState(null)}
      />
    </div>
  )
}