Scrum4Me/components/jobs/jobs-column.tsx

'use client'

import { useEffect, useMemo, useState } from 'react'
import { Button } from '@/components/ui/button'
import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover'
import JobCard from './job-card'
import { JOB_STATUS_LABELS } from '@/components/shared/job-status'
import { jobStatusToApi, type ClaudeJobStatusApi } from '@/lib/job-status'
import { cn } from '@/lib/utils'
import type { JobWithRelations } from '@/actions/jobs-page'
import type { ClaudeJobKind } from '@prisma/client'

const KIND_LABELS: Record<ClaudeJobKind, string> = {
  TASK_IMPLEMENTATION: 'TAAK',
  SPRINT_IMPLEMENTATION: 'SPRINT',
  IDEA_GRILL: 'GRILL',
  IDEA_MAKE_PLAN: 'PLAN',
  PLAN_CHAT: 'CHAT',
}

const KIND_OPTIONS: Array<{ value: ClaudeJobKind; label: string }> = [
  { value: 'TASK_IMPLEMENTATION', label: 'TAAK' },
  { value: 'SPRINT_IMPLEMENTATION', label: 'SPRINT' },
  { value: 'IDEA_GRILL', label: 'GRILL' },
  { value: 'IDEA_MAKE_PLAN', label: 'PLAN' },
  { value: 'PLAN_CHAT', label: 'CHAT' },
]

const KIND_VALUES = new Set<ClaudeJobKind>(KIND_OPTIONS.map((o) => o.value))

function MultiFilterPills<T extends string>({
  label,
  options,
  selected,
  onToggle,
  onClear,
}: {
  label: string
  options: Array<{ value: T; label: string }>
  selected: Set<T>
  onToggle: (v: T) => void
  onClear: () => void
}) {
  const allActive = selected.size === 0
  return (
    <div className="space-y-1.5">
      <p className="text-xs font-medium text-muted-foreground">{label}</p>
      <div className="flex flex-wrap gap-1.5">
        <button
          type="button"
          onClick={onClear}
          className={cn(
            'text-xs px-2.5 py-1 rounded-full border transition-colors',
            allActive
              ? 'bg-primary text-primary-foreground border-primary'
              : 'bg-transparent border-border hover:bg-surface-container'
          )}
        >
          Alle
        </button>
        {options.map((opt) => {
          const active = selected.has(opt.value)
          return (
            <button
              key={opt.value}
              type="button"
              onClick={() => onToggle(opt.value)}
              className={cn(
                'text-xs px-2.5 py-1 rounded-full border transition-colors',
                active
                  ? 'bg-primary text-primary-foreground border-primary'
                  : 'bg-transparent border-border hover:bg-surface-container'
              )}
            >
              {opt.label}
            </button>
          )
        })}
      </div>
    </div>
  )
}

function parseCsv<T extends string>(raw: string | null, allowed: Set<T>): Set<T> {
  if (!raw) return new Set()
  const out = new Set<T>()
  for (const part of raw.split(',')) {
    const v = part.trim()
    if (v && allowed.has(v as T)) out.add(v as T)
  }
  return out
}

function setToCsv<T extends string>(s: Set<T>): string {
  return Array.from(s).join(',')
}

interface JobsColumnProps {
  title: string
  jobs: JobWithRelations[]
  selectedJobId: string | null
  onSelect: (id: string) => void
  storageKeyPrefix: string
  statusOptions: Array<{ value: ClaudeJobStatusApi; label: string }>
  emptyText: string
}

export default function JobsColumn({
  title,
  jobs,
  selectedJobId,
  onSelect,
  storageKeyPrefix,
  statusOptions,
  emptyText,
}: JobsColumnProps) {
  const [filterKinds, setFilterKinds] = useState<Set<ClaudeJobKind>>(() => new Set())
  const [filterStatuses, setFilterStatuses] = useState<Set<ClaudeJobStatusApi>>(() => new Set())
  const [prefsLoaded, setPrefsLoaded] = useState(false)

  const kindKey = `${storageKeyPrefix}_filter_kind`
  const statusKey = `${storageKeyPrefix}_filter_status`

  const statusValues = useMemo(
    () => new Set<ClaudeJobStatusApi>(statusOptions.map((o) => o.value)),
    [statusOptions]
  )

  useEffect(() => {
    // Hydratie van localStorage post-mount: zetters intentioneel, voorkomt SSR-mismatch.
    /* eslint-disable react-hooks/set-state-in-effect */
    setFilterKinds(parseCsv<ClaudeJobKind>(localStorage.getItem(kindKey), KIND_VALUES))
    setFilterStatuses(parseCsv<ClaudeJobStatusApi>(localStorage.getItem(statusKey), statusValues))
    setPrefsLoaded(true)
    /* eslint-enable react-hooks/set-state-in-effect */
  }, [kindKey, statusKey, statusValues])

  useEffect(() => {
    if (prefsLoaded) localStorage.setItem(kindKey, setToCsv(filterKinds))
  }, [filterKinds, prefsLoaded, kindKey])

  useEffect(() => {
    if (prefsLoaded) localStorage.setItem(statusKey, setToCsv(filterStatuses))
  }, [filterStatuses, prefsLoaded, statusKey])

  function toggleKind(v: ClaudeJobKind) {
    setFilterKinds((prev) => {
      const next = new Set(prev)
      if (next.has(v)) next.delete(v)
      else next.add(v)
      return next
    })
  }

  function toggleStatus(v: ClaudeJobStatusApi) {
    setFilterStatuses((prev) => {
      const next = new Set(prev)
      if (next.has(v)) next.delete(v)
      else next.add(v)
      return next
    })
  }

  const filtered = jobs.filter((j) => {
    if (filterKinds.size > 0 && !filterKinds.has(j.kind)) return false
    if (filterStatuses.size > 0 && !filterStatuses.has(jobStatusToApi(j.status))) return false
    return true
  })

  const activeFilterCount = filterKinds.size + filterStatuses.size

  return (
    <div className="flex flex-col h-full">
      <div className="flex items-center justify-between gap-2 px-2 py-1.5 border-b border-border bg-surface-container-low shrink-0">
        <span className="text-xs font-medium text-muted-foreground px-1">{title}</span>
        <div className="flex items-center gap-1.5 flex-wrap justify-end">
          {Array.from(filterKinds).map((k) => (
            <button
              key={`k-${k}`}
              type="button"
              onClick={() => toggleKind(k)}
              className="flex items-center gap-1 text-[10px] px-1.5 py-0.5 rounded border bg-muted text-muted-foreground hover:bg-surface-container font-mono"
              aria-label={`Wis filter ${KIND_LABELS[k]}`}
            >
              <span>{KIND_LABELS[k]}</span>
              <span aria-hidden>×</span>
            </button>
          ))}
          {Array.from(filterStatuses).map((s) => (
            <button
              key={`s-${s}`}
              type="button"
              onClick={() => toggleStatus(s)}
              className="flex items-center gap-1 text-xs px-2 py-0.5 rounded-full border bg-muted text-muted-foreground hover:bg-surface-container"
              aria-label={`Wis filter ${JOB_STATUS_LABELS[s]}`}
            >
              <span>{JOB_STATUS_LABELS[s]}</span>
              <span aria-hidden>×</span>
            </button>
          ))}
          <Popover>
            <PopoverTrigger
              render={
                <Button variant="outline" size="sm" className="h-7 text-xs">
                  {`Filters${activeFilterCount > 0 ? ` (${activeFilterCount})` : ''}`}
                </Button>
              }
            />
            <PopoverContent align="end" className="w-72 space-y-4">
              <MultiFilterPills
                label="Soort"
                options={KIND_OPTIONS}
                selected={filterKinds}
                onToggle={toggleKind}
                onClear={() => setFilterKinds(new Set())}
              />
              <MultiFilterPills
                label="Status"
                options={statusOptions}
                selected={filterStatuses}
                onToggle={toggleStatus}
                onClear={() => setFilterStatuses(new Set())}
              />
              <div className="flex justify-end pt-1 border-t border-border">
                <Button
                  type="button"
                  variant="ghost"
                  size="sm"
                  className="h-7 text-xs"
                  disabled={activeFilterCount === 0}
                  onClick={() => {
                    setFilterKinds(new Set())
                    setFilterStatuses(new Set())
                  }}
                >
                  Wis filters
                </Button>
              </div>
            </PopoverContent>
          </Popover>
        </div>
      </div>
      <div className="overflow-y-auto flex-1 p-2 space-y-2">
        {filtered.map((j) => (
          <JobCard
            key={j.id}
            id={j.id}
            kind={j.kind}
            status={j.status}
            taskCode={j.taskCode}
            taskTitle={j.taskTitle}
            ideaCode={j.ideaCode}
            ideaTitle={j.ideaTitle}
            sprintGoal={j.sprintGoal}
            sprintCode={j.sprintCode}
            productName={j.productName}
            branch={j.branch}
            error={j.error}
            summary={j.summary}
            createdAt={j.createdAt}
            isSelected={j.id === selectedJobId}
            onClick={() => onSelect(j.id)}
          />
        ))}
        {filtered.length === 0 && (
          <p className="text-sm text-muted-foreground text-center py-8">
            {jobs.length === 0 ? emptyText : 'Geen jobs voldoen aan filter'}
          </p>
        )}
      </div>
    </div>
  )
}