Scrum4Me/app/(app)/products/[id]/page.tsx

import { notFound } from 'next/navigation'
import { cookies } from 'next/headers'
import { getIronSession } from 'iron-session'
import { SessionData, sessionOptions } from '@/lib/session'
import { prisma } from '@/lib/prisma'
import { SplitPane } from '@/components/split-pane/split-pane'
import { PbiList } from '@/components/backlog/pbi-list'
import { StoryPanel } from '@/components/backlog/story-panel'
import type { Story } from '@/components/backlog/story-panel'
import { StartSprintButton } from '@/components/sprint/start-sprint-button'
import Link from 'next/link'

interface Props {
  params: Promise<{ id: string }>
}

export default async function ProductBacklogPage({ params }: Props) {
  const { id } = await params
  const session = await getIronSession<SessionData>(await cookies(), sessionOptions)

  const product = await prisma.product.findFirst({
    where: { id, user_id: session.userId },
  })
  if (!product) notFound()

  const activeSprint = await prisma.sprint.findFirst({
    where: { product_id: id, status: 'ACTIVE' },
  })

  const pbis = await prisma.pbi.findMany({
    where: { product_id: id },
    orderBy: [{ priority: 'asc' }, { sort_order: 'asc' }],
  })

  const stories = await prisma.story.findMany({
    where: { product_id: id },
    orderBy: [{ priority: 'asc' }, { sort_order: 'asc' }],
    select: {
      id: true,
      title: true,
      description: true,
      acceptance_criteria: true,
      priority: true,
      status: true,
      pbi_id: true,
    },
  })

  // Group stories by PBI id
  const storiesByPbi: Record<string, Story[]> = {}
  for (const story of stories) {
    if (!storiesByPbi[story.pbi_id]) storiesByPbi[story.pbi_id] = []
    storiesByPbi[story.pbi_id].push(story)
  }

  const isDemo = session.isDemo ?? false

  return (
    <div className="flex flex-col h-full">
      {/* Product header */}
      <div className="px-4 py-3 border-b border-border bg-surface-container-low shrink-0 flex items-center justify-between">
        <div>
          <h1 className="font-medium text-foreground">{product.name}</h1>
          {product.description && (
            <p className="text-xs text-muted-foreground mt-0.5">{product.description}</p>
          )}
        </div>
        <div className="flex items-center gap-3">
          {activeSprint ? (
            <Link href={`/products/${id}/sprint`} className="text-xs text-primary hover:underline font-medium">
              Sprint actief →
            </Link>
          ) : (
            !isDemo && <StartSprintButton productId={id} />
          )}
          <Link
            href={`/products/${id}/settings`}
            className="text-xs text-muted-foreground hover:text-foreground"
          >
            Instellingen
          </Link>
        </div>
      </div>

      {/* Split pane */}
      <div className="flex-1 overflow-hidden">
        <SplitPane
          storageKey={`backlog-${id}`}
          left={
            <PbiList
              productId={id}
              pbis={pbis.map(p => ({ id: p.id, title: p.title, priority: p.priority }))}
              isDemo={isDemo}
            />
          }
          right={
            <StoryPanel
              productId={id}
              storiesByPbi={storiesByPbi}
              isDemo={isDemo}
            />
          }
        />
      </div>
    </div>
  )
}