Scrum4Me/components/admin/products-table.tsx

'use client'

import { useTransition } from 'react'
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 { adminArchiveProductAction, adminDeleteProductAction } from '@/actions/admin/products'
import { debugProps } from '@/lib/debug'

type Product = {
  id: string
  name: string
  archived: boolean
  created_at: Date
  user: { username: string }
  _count: { members: number; pbis: number }
}

function ArchiveButton({ product }: { product: Product }) {
  const [pending, startTransition] = useTransition()

  function handleToggle() {
    startTransition(() => adminArchiveProductAction(product.id, !product.archived))
  }

  return (
    <Button variant="outline" size="sm" onClick={handleToggle} disabled={pending}>
      {product.archived ? 'Herstel' : 'Archiveer'}
    </Button>
  )
}

function DeleteDialog({ product }: { product: Product }) {
  const [pending, startTransition] = useTransition()

  function handleDelete() {
    startTransition(() => adminDeleteProductAction(product.id))
  }

  return (
    <Dialog>
      <DialogTrigger render={<Button variant="destructive" size="sm" />}>
        Verwijder
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Product verwijderen</DialogTitle>
        </DialogHeader>
        <p className="text-sm text-muted-foreground">
          Weet je zeker dat je <strong>{product.name}</strong> wilt verwijderen?
          Dit verwijdert ook alle PBI&apos;s, stories en taken. 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>
  )
}

export function ProductsTable({ products }: { products: Product[] }) {
  return (
    <Table {...debugProps('admin-products-table', 'ProductsTable', 'components/admin/products-table.tsx')}>
      <TableHeader data-debug-id="admin-products-table__header">
        <TableRow>
          <TableHead>Naam</TableHead>
          <TableHead>Eigenaar</TableHead>
          <TableHead>Leden</TableHead>
          <TableHead>PBI&apos;s</TableHead>
          <TableHead>Status</TableHead>
          <TableHead>Aangemaakt</TableHead>
          <TableHead className="text-right">Acties</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody data-debug-id="admin-products-table__table">
        {products.length === 0 && (
          <TableRow>
            <TableCell colSpan={7} className="text-center text-muted-foreground py-8">
              Geen producten gevonden
            </TableCell>
          </TableRow>
        )}
        {products.map(product => (
          <TableRow key={product.id}>
            <TableCell className="font-medium">{product.name}</TableCell>
            <TableCell className="text-muted-foreground">{product.user.username}</TableCell>
            <TableCell className="text-sm">{product._count.members}</TableCell>
            <TableCell className="text-sm">{product._count.pbis}</TableCell>
            <TableCell>
              {product.archived ? (
                <Badge className="bg-muted text-muted-foreground">Gearchiveerd</Badge>
              ) : (
                <Badge className="bg-status-done text-white border-transparent">Actief</Badge>
              )}
            </TableCell>
            <TableCell className="text-xs text-muted-foreground">
              {new Date(product.created_at).toLocaleDateString('nl-NL')}
            </TableCell>
            <TableCell>
              <div className="flex gap-2 justify-end">
                <ArchiveButton product={product} />
                <DeleteDialog product={product} />
              </div>
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}