Scrum4Me/components/dashboard/product-list.tsx

'use client'

import Link from 'next/link'
import { useRouter } from 'next/navigation'
import { useTransition } from 'react'
import { toast } from 'sonner'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { CodeBadge } from '@/components/shared/code-badge'
import { restoreProductAction } from '@/actions/products'
import { setActiveProductAction } from '@/actions/active-product'

interface Product {
  id: string
  name: string
  code: string | null
  description: string | null
  repo_url: string | null
}

interface ProductListProps {
  products: Product[]
  isDemo: boolean
  showArchived?: boolean
  activeProductId: string | null
}

export function ProductList({ products, isDemo, showArchived = false, activeProductId }: ProductListProps) {
  const router = useRouter()
  const [, startTransition] = useTransition()

  function handleRestore(id: string) {
    startTransition(async () => {
      const result = await restoreProductAction(id)
      if ('error' in result) toast.error(result.error ?? 'Herstellen mislukt')
      else { toast.success('Product hersteld'); router.refresh() }
    })
  }

  function handleActivate(id: string) {
    if (isDemo) { toast.error('Niet beschikbaar in demo-modus'); return }
    startTransition(async () => {
      const result = await setActiveProductAction(id)
      if (result?.error) toast.error(typeof result.error === 'string' ? result.error : 'Activeren mislukt')
      else router.push(`/products/${id}`)
    })
  }

  if (products.length === 0) {
    return (
      <div className="bg-surface-container-low rounded-xl border border-border p-12 text-center space-y-3">
        <p className="text-muted-foreground">
          {showArchived
            ? 'Geen gearchiveerde producten.'
            : 'Je hebt nog geen producten aangemaakt.'}
        </p>
        {!isDemo && !showArchived && (
          <Button variant="outline" nativeButton={false} render={<Link href="/products/new" />}>
            Maak je eerste product aan
          </Button>
        )}
      </div>
    )
  }

  return (
    <div className="grid gap-3">
      {products.map(product => (
        <div
          key={product.id}
          onClick={() => !showArchived && router.push(`/products/${product.id}`)}
          className={`group bg-surface-container-low border border-border rounded-xl p-4 transition-colors ${
            showArchived ? 'opacity-60' : 'cursor-pointer hover:border-primary'
          }`}
        >
          <div className="flex items-start justify-between gap-4">
            <div className="min-w-0">
              <div className="flex items-center gap-2">
                {product.code && <CodeBadge code={product.code} />}
                <p className="font-medium text-foreground group-hover:text-primary transition-colors truncate">
                  {product.name}
                </p>
              </div>
              {product.description && (
                <p className="text-sm text-muted-foreground mt-1 line-clamp-1">
                  {product.description.slice(0, 80)}{product.description.length > 80 ? '…' : ''}
                </p>
              )}
            </div>
            <div className="flex items-center gap-3 shrink-0">
              {product.repo_url && (
                <a
                  href={product.repo_url}
                  target="_blank"
                  rel="noopener noreferrer"
                  onClick={e => e.stopPropagation()}
                  className="text-xs text-muted-foreground hover:text-primary underline"
                >
                  Repo
                </a>
              )}
              {!showArchived && (
                product.id === activeProductId
                  ? <Badge className="bg-primary-container text-primary-container-foreground text-xs px-2 py-0">Actief</Badge>
                  : (
                    <button
                      onClick={(e) => { e.stopPropagation(); handleActivate(product.id) }}
                      className="text-xs text-primary hover:underline"
                    >
                      Activeer
                    </button>
                  )
              )}
              {showArchived && !isDemo && (
                <button
                  onClick={(e) => { e.stopPropagation(); handleRestore(product.id) }}
                  className="text-xs text-primary hover:underline"
                >
                  Herstellen
                </button>
              )}
            </div>
          </div>
        </div>
      ))}
    </div>
  )
}