Scrum4Me/components/admin/users-table.tsx

'use client'

import { useState, useTransition } from 'react'
import { Role } from '@prisma/client'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
  DialogClose,
} from '@/components/ui/dialog'
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table'
import {
  deleteUserAction,
  updateUserRolesAction,
  setMustResetPasswordAction,
} from '@/actions/admin/users'
import { debugProps } from '@/lib/debug'

type UserWithRoles = {
  id: string
  username: string
  email: string | null
  must_reset_password: boolean
  created_at: Date
  roles: { role: Role }[]
}

const ALL_ROLES: Role[] = [Role.PRODUCT_OWNER, Role.SCRUM_MASTER, Role.DEVELOPER, Role.ADMIN]

const ROLE_LABEL: Record<Role, string> = {
  PRODUCT_OWNER: 'Product Owner',
  SCRUM_MASTER: 'Scrum Master',
  DEVELOPER: 'Developer',
  ADMIN: 'Admin',
}

function RoleBadge({ role }: { role: Role }) {
  const cls =
    role === Role.ADMIN
      ? 'bg-status-done text-white border-transparent'
      : role === Role.PRODUCT_OWNER
        ? 'bg-status-in-progress text-white border-transparent'
        : role === Role.SCRUM_MASTER
          ? 'bg-priority-medium text-white border-transparent'
          : 'bg-secondary text-secondary-foreground'
  return <Badge className={cls}>{ROLE_LABEL[role]}</Badge>
}

function RolesDialog({ user, currentUserId }: { user: UserWithRoles; currentUserId: string }) {
  const [open, setOpen] = useState(false)
  const [selected, setSelected] = useState<Set<Role>>(new Set(user.roles.map(r => r.role)))
  const [pending, startTransition] = useTransition()
  const isSelf = user.id === currentUserId

  function toggle(role: Role) {
    setSelected(prev => {
      const next = new Set(prev)
      if (next.has(role)) next.delete(role)
      else next.add(role)
      return next
    })
  }

  function handleSave() {
    startTransition(async () => {
      await updateUserRolesAction(user.id, Array.from(selected))
      setOpen(false)
    })
  }

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger render={<Button variant="outline" size="sm" />}>
        Rollen
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Rollen voor {user.username}</DialogTitle>
        </DialogHeader>
        <div className="flex flex-col gap-2 py-2">
          {ALL_ROLES.map(role => {
            const isDisabled = isSelf && role === Role.ADMIN && selected.has(role)
            return (
              <label key={role} className="flex items-center gap-2 cursor-pointer">
                <input
                  type="checkbox"
                  checked={selected.has(role)}
                  disabled={isDisabled}
                  onChange={() => toggle(role)}
                  className="rounded border-border"
                />
                <span className="text-sm">{ROLE_LABEL[role]}</span>
                {isDisabled && <span className="text-xs text-muted-foreground">(eigen rol)</span>}
              </label>
            )
          })}
        </div>
        <DialogFooter showCloseButton>
          <Button onClick={handleSave} disabled={pending}>
            {pending ? 'Opslaan…' : 'Opslaan'}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}

function DeleteDialog({ user, currentUserId }: { user: UserWithRoles; currentUserId: string }) {
  const [open, setOpen] = useState(false)
  const [pending, startTransition] = useTransition()
  const isSelf = user.id === currentUserId

  function handleDelete() {
    startTransition(async () => {
      await deleteUserAction(user.id)
      setOpen(false)
    })
  }

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger
        render={
          <Button
            variant="destructive"
            size="sm"
            disabled={isSelf}
            title={isSelf ? 'Zelfverwijdering niet toegestaan' : undefined}
          />
        }
      >
        Verwijder
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Gebruiker verwijderen</DialogTitle>
        </DialogHeader>
        <p className="text-sm text-muted-foreground">
          Weet je zeker dat je <strong>{user.username}</strong> wilt verwijderen? Dit kan niet ongedaan worden gemaakt.
        </p>
        <DialogFooter>
          <DialogClose render={<Button variant="outline" />}>Annuleer</DialogClose>
          <Button variant="destructive" onClick={handleDelete} disabled={pending}>
            {pending ? 'Verwijderen…' : 'Verwijderen'}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}

function ResetToggle({ user }: { user: UserWithRoles }) {
  const [pending, startTransition] = useTransition()

  function handleToggle() {
    startTransition(async () => {
      await setMustResetPasswordAction(user.id, !user.must_reset_password)
    })
  }

  return (
    <Button
      variant={user.must_reset_password ? 'default' : 'outline'}
      size="sm"
      onClick={handleToggle}
      disabled={pending}
      title="Forceer wachtwoord-reset bij volgende login"
    >
      {user.must_reset_password ? 'Reset gepland' : 'Reset pw'}
    </Button>
  )
}

export function UsersTable({
  users,
  currentUserId,
}: {
  users: UserWithRoles[]
  currentUserId: string
}) {
  return (
    <Table {...debugProps('admin-users-table', 'UsersTable', 'components/admin/users-table.tsx')}>
      <TableHeader data-debug-id="admin-users-table__header">
        <TableRow>
          <TableHead>Gebruiker</TableHead>
          <TableHead>Email</TableHead>
          <TableHead>Rollen</TableHead>
          <TableHead>Reset pw</TableHead>
          <TableHead>Aangemaakt</TableHead>
          <TableHead className="text-right">Acties</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody data-debug-id="admin-users-table__table">
        {users.map(user => (
          <TableRow key={user.id}>
            <TableCell className="font-medium">{user.username}</TableCell>
            <TableCell className="text-muted-foreground">{user.email ?? '—'}</TableCell>
            <TableCell>
              <div className="flex flex-wrap gap-1">
                {user.roles.map(r => (
                  <RoleBadge key={r.role} role={r.role} />
                ))}
                {user.roles.length === 0 && <span className="text-muted-foreground text-xs">Geen</span>}
              </div>
            </TableCell>
            <TableCell>
              {user.must_reset_password ? (
                <Badge className="bg-priority-high text-white border-transparent">Ja</Badge>
              ) : (
                <span className="text-muted-foreground text-xs">—</span>
              )}
            </TableCell>
            <TableCell className="text-muted-foreground text-xs">
              {new Date(user.created_at).toLocaleDateString('nl-NL')}
            </TableCell>
            <TableCell>
              <div className="flex gap-2 justify-end">
                <ResetToggle user={user} />
                <RolesDialog user={user} currentUserId={currentUserId} />
                <DeleteDialog user={user} currentUserId={currentUserId} />
              </div>
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}