// PBI-11 / ST-1137: Mobile Product Backlog. Wraps de 3-paneel-backlog in de
// mobile-shell. BacklogSplitPane rendert automatisch tab-mode op <1024px
// (uit ST-1116). Cookie-key gescheiden van desktop zodat tab-mode-gebruikers
// de desktop-split niet vervuilen (beslissing C in docs/plans/PBI-11-mobile-shell.md).

import { Suspense } from 'react'
import { notFound } from 'next/navigation'
import { getAccessibleProduct } from '@/lib/product-access'
import { prisma } from '@/lib/prisma'
import { pbiStatusToApi } from '@/lib/task-status'
import { requireSession } from '@/lib/auth-guard'
import { BacklogSplitPane } from '@/components/backlog/backlog-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 { TaskPanel } from '@/components/backlog/task-panel'
import { BacklogHydrationWrapper } from '@/components/backlog/backlog-hydration-wrapper'
import { UrlTaskSync } from '@/components/backlog/url-task-sync'
import { TaskDialog } from '@/app/_components/tasks/task-dialog'
import { EditTaskLoader } from '@/app/_components/tasks/edit-task-loader'
import { TaskDialogSkeleton } from '@/app/_components/tasks/task-dialog-skeleton'

interface Props {
  params: Promise<{ id: string }>
  searchParams: Promise<{ newTask?: string; storyId?: string; editTask?: string }>
}

export default async function MobileProductBacklogPage({ params, searchParams }: Props) {
  const { id } = await params
  const { newTask, storyId: storyIdParam, editTask } = await searchParams
  const closePath = `/m/products/${id}`

  const session = await requireSession()
  const product = await getAccessibleProduct(id, session.userId)
  if (!product) notFound()

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

  const [stories, tasks] = await Promise.all([
    prisma.story.findMany({
      where: { product_id: id },
      orderBy: [{ sort_order: 'asc' }, { created_at: 'asc' }],
      select: {
        id: true,
        code: true,
        title: true,
        description: true,
        acceptance_criteria: true,
        priority: true,
        sort_order: true,
        status: true,
        pbi_id: true,
        sprint_id: true,
        created_at: true,
      },
    }),
    prisma.task.findMany({
      where: { story: { pbi: { product_id: id } } },
      select: {
        id: true,
        code: true,
        title: true,
        description: true,
        priority: true,
        status: true,
        sort_order: true,
        story_id: true,
        created_at: true,
      },
      orderBy: [{ sort_order: 'asc' }, { created_at: 'asc' }],
    }),
  ])

  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 tasksByStory: Record<string, typeof tasks> = {}
  for (const task of tasks) {
    if (!tasksByStory[task.story_id]) tasksByStory[task.story_id] = []
    tasksByStory[task.story_id].push(task)
  }

  const isDemo = session.isDemo ?? false

  return (
    <div className="flex flex-col h-full">
      <BacklogHydrationWrapper
        productId={id}
        productName={product.name}
        initialData={{
          pbis: pbis.map((p) => ({ id: p.id, code: p.code, title: p.title, priority: p.priority, sort_order: p.sort_order, description: p.description, created_at: p.created_at, status: pbiStatusToApi(p.status) })),
          storiesByPbi,
          tasksByStory,
        }}
      >
        <UrlTaskSync />
        <BacklogSplitPane
          cookieKey={`backlog-${id}-mobile`}
          defaultSplit={[20, 45, 35]}
          tabLabels={['PBI\'s', 'Stories', 'Taken']}
          panes={[
            <PbiList
              key="pbi"
              productId={id}
              isDemo={isDemo}
            />,
            <StoryPanel
              key="story"
              productId={id}
              isDemo={isDemo}
            />,
            <TaskPanel
              key="tasks"
              productId={id}
              isDemo={isDemo}
              closePath={closePath}
            />,
          ]}
        />
      </BacklogHydrationWrapper>

      {newTask && (
        <TaskDialog
          storyId={storyIdParam}
          productId={id}
          closePath={closePath}
          isDemo={isDemo}
        />
      )}

      {editTask && !newTask && (
        <Suspense fallback={<TaskDialogSkeleton />}>
          <EditTaskLoader
            taskId={editTask}
            userId={session.userId}
            productId={id}
            closePath={closePath}
            isDemo={isDemo}
          />
        </Suspense>
      )}
    </div>
  )
}
