Scrum4Me/components/settings/role-manager.tsx

'use client'

import { useState, useTransition } from 'react'
import { Button } from '@/components/ui/button'
import { updateRolesAction } from '@/actions/todos'

const ALL_ROLES = [
  { value: 'PRODUCT_OWNER', label: 'Product Owner' },
  { value: 'SCRUM_MASTER', label: 'Scrum Master' },
  { value: 'DEVELOPER', label: 'Developer' },
]

interface RoleManagerProps {
  currentRoles: string[]
  isDemo: boolean
}

export function RoleManager({ currentRoles, isDemo }: RoleManagerProps) {
  const [selected, setSelected] = useState<Set<string>>(new Set(currentRoles))
  const [error, setError] = useState<string | null>(null)
  const [saved, setSaved] = useState(false)
  const [, startTransition] = useTransition()

  function toggle(role: string) {
    setSelected(prev => {
      const next = new Set(prev)
      next.has(role) ? next.delete(role) : next.add(role)
      return next
    })
    setSaved(false)
    setError(null)
  }

  function handleSave() {
    if (selected.size === 0) {
      setError('Minimaal één rol is verplicht')
      return
    }
    startTransition(async () => {
      const result = await updateRolesAction([...selected])
      if (result.success) setSaved(true)
      else setError(result.error ?? 'Opslaan mislukt')
    })
  }

  return (
    <div className="bg-surface-container-low border border-border rounded-xl p-5 space-y-4">
      <h2 className="text-sm font-medium text-foreground">Mijn rollen</h2>
      <div className="flex flex-wrap gap-3">
        {ALL_ROLES.map(role => (
          <label key={role.value} className="flex items-center gap-2 cursor-pointer">
            <input
              type="checkbox"
              checked={selected.has(role.value)}
              onChange={() => toggle(role.value)}
              disabled={isDemo}
              className="w-4 h-4 rounded accent-primary"
            />
            <span className="text-sm">{role.label}</span>
          </label>
        ))}
      </div>
      {error && <p className="text-xs text-error">{error}</p>}
      {saved && <p className="text-xs text-success">Rollen opgeslagen.</p>}
      {!isDemo && (
        <Button size="sm" onClick={handleSave}>Opslaan</Button>
      )}
    </div>
  )
}