Scrum4Me/components/dashboard/product-list.tsx

'use client'

import Link from 'next/link'
import { useRouter } from 'next/navigation'
import { useState, useTransition } from 'react'
import { Pencil } from 'lucide-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 { DemoTooltip } from '@/components/shared/demo-tooltip'
import { restoreProductAction } from '@/actions/products'
import { setActiveProductAction } from '@/actions/active-product'
import { ProductDialog, type ProductDialogProduct } from '@/components/dialogs/product-dialog'
import { debugProps } from '@/lib/debug'

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

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()
  const [editingProduct, setEditingProduct] = useState<ProductDialogProduct | null>(null)

  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) {
    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" {...debugProps('product-list', 'ProductList', 'components/dashboard/product-list.tsx')}>
        <p className="text-muted-foreground">
          {showArchived
            ? 'Geen gearchiveerde producten.'
            : 'Je hebt nog geen producten aangemaakt.'}
        </p>
        <DemoTooltip show={isDemo}>
          <Button variant="outline" nativeButton={false} render={<Link href={isDemo ? '#' : '/products/new'} />} disabled={isDemo}>
            Maak je eerste product aan
          </Button>
        </DemoTooltip>
      </div>
    )
  }

  return (
    <div className="grid gap-3" {...debugProps('product-list', 'ProductList', 'components/dashboard/product-list.tsx')}>
      {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'
          }`}
          data-debug-id="product-list__items"
        >
          <div className="flex items-start justify-between gap-4" data-debug-id="product-list__header">
            <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 && (
                <>
                  <DemoTooltip show={isDemo}>
                    <button
                      onClick={(e) => { e.stopPropagation(); if (!isDemo) setEditingProduct(product) }}
                      className="opacity-0 group-hover:opacity-100 inline-flex items-center justify-center min-h-7 min-w-7 text-muted-foreground hover:text-foreground rounded disabled:opacity-40 disabled:cursor-not-allowed"
                      aria-label="Bewerk product"
                      disabled={isDemo}
                    >
                      <Pencil size={14} />
                    </button>
                  </DemoTooltip>
                  {product.id === activeProductId
                    ? <Badge className="bg-primary-container text-primary-container-foreground text-xs px-2 py-0">Actief</Badge>
                    : (
                      <DemoTooltip show={isDemo}>
                        <button
                          onClick={(e) => { e.stopPropagation(); if (!isDemo) handleActivate(product.id) }}
                          className="text-xs text-primary hover:underline disabled:opacity-40 disabled:cursor-not-allowed disabled:no-underline"
                          disabled={isDemo}
                        >
                          Activeer
                        </button>
                      </DemoTooltip>
                    )
                  }
                </>
              )}
              {showArchived && (
                <DemoTooltip show={isDemo}>
                  <button
                    onClick={(e) => { e.stopPropagation(); if (!isDemo) handleRestore(product.id) }}
                    className="text-xs text-primary hover:underline disabled:opacity-40 disabled:cursor-not-allowed"
                    disabled={isDemo}
                  >
                    Herstellen
                  </button>
                </DemoTooltip>
              )}
            </div>
          </div>
        </div>
      ))}
      {editingProduct && (
        <ProductDialog
          mode="edit"
          open={!!editingProduct}
          onOpenChange={(v) => { if (!v) setEditingProduct(null) }}
          product={editingProduct}
          isDemo={isDemo}
        />
      )}
    </div>
  )
}