Scrum4Me/app/(app)/settings/page.tsx

import { cookies } from 'next/headers'
import { getIronSession } from 'iron-session'
import { SessionData, sessionOptions } from '@/lib/session'
import { prisma } from '@/lib/prisma'
import { RoleManager } from '@/components/settings/role-manager'
import { LeaveProductButton } from '@/components/settings/leave-product-button'
import { ProfileEditor } from '@/components/settings/profile-editor'
import { ActivateProductButton } from '@/components/shared/activate-product-button'
import Link from 'next/link'

export default async function SettingsPage() {
  const session = await getIronSession<SessionData>(await cookies(), sessionOptions)

  const [user, userRoles, ownedProducts, memberships] = await Promise.all([
    prisma.user.findUnique({
      where: { id: session.userId },
      select: { username: true, email: true, bio: true, bio_detail: true, avatar_data: true, updated_at: true, active_product_id: true },
    }),
    prisma.userRole.findMany({ where: { user_id: session.userId } }),
    prisma.product.findMany({
      where: { user_id: session.userId, archived: false },
      select: { id: true, name: true },
      orderBy: { name: 'asc' },
    }),
    prisma.productMember.findMany({
      where: { user_id: session.userId },
      include: { product: { select: { id: true, name: true, user: { select: { username: true } } } } },
      orderBy: { created_at: 'asc' },
    }),
  ])
  const currentRoles = userRoles.map(r => r.role as string)

  type PbEntry =
    | { kind: 'owner'; id: string; name: string }
    | { kind: 'member'; id: string; name: string; ownerUsername: string }

  const activeProductId = user?.active_product_id ?? null

  const allBacklogs: PbEntry[] = [
    ...ownedProducts.map(p => ({ kind: 'owner' as const, id: p.id, name: p.name })),
    ...memberships.map(m => ({
      kind: 'member' as const,
      id: m.product.id,
      name: m.product.name,
      ownerUsername: m.product.user.username,
    })),
  ]

  // Active product floats to the top
  const productBacklogs = [
    ...allBacklogs.filter(pb => pb.id === activeProductId),
    ...allBacklogs.filter(pb => pb.id !== activeProductId),
  ]

  return (
    <div className="p-6 max-w-2xl mx-auto w-full space-y-6">
      <h1 className="text-xl font-medium text-foreground">Instellingen</h1>

      <div className="bg-surface-container-low border border-border rounded-xl p-5 space-y-4">
        <div>
          <h2 className="text-sm font-medium text-foreground">Profiel</h2>
          <p className="text-xs text-muted-foreground mt-0.5">
            Zichtbaar voor teamleden die je toevoegen aan een product backlog.
          </p>
        </div>
        {session.isDemo ? (
          <p className="text-sm text-muted-foreground">Niet beschikbaar in demo-modus.</p>
        ) : (
          <ProfileEditor
            email={user?.email ?? null}
            bio={user?.bio ?? null}
            bioDetail={user?.bio_detail ?? null}
            hasAvatar={!!user?.avatar_data}
            avatarVersion={user?.updated_at?.getTime() ?? 0}
          />
        )}
      </div>

      <div className="bg-surface-container-low border border-border rounded-xl p-5 space-y-3">
        <h2 className="text-sm font-medium text-foreground">Account</h2>
        <p className="text-sm text-muted-foreground">
          Ingelogd als <span className="text-foreground font-medium">{user?.username ?? session.userId}</span>
          {session.isDemo && <span className="ml-2 text-warning text-xs">(demo)</span>}
        </p>
      </div>

      <RoleManager currentRoles={currentRoles} isDemo={session.isDemo ?? false} />

      <div className="bg-surface-container-low border border-border rounded-xl p-5 space-y-3">
        <div className="flex items-start justify-between gap-3">
          <div>
            <h2 className="text-sm font-medium text-foreground">Product Backlogs</h2>
            <p className="text-xs text-muted-foreground mt-0.5">
              Alle product backlogs waarbij je betrokken bent.
            </p>
          </div>
          {!session.isDemo && (
            <Link href="/products/new" className="shrink-0 text-xs text-primary hover:underline font-medium">
              + Nieuw product
            </Link>
          )}
        </div>
        {productBacklogs.length === 0 ? (
          <p className="text-sm text-muted-foreground">
            Je bent nog niet gekoppeld aan een product backlog.{' '}
            <Link href="/products/new" className="text-primary hover:underline">Maak een product aan</Link>.
          </p>
        ) : (
          <ul className="space-y-2">
            {productBacklogs.map(pb => {
              const isActive = pb.id === activeProductId
              return (
                <li key={`${pb.kind}-${pb.id}`} className={`flex items-center justify-between gap-3 rounded-lg px-3 py-2.5 ${
                  isActive ? 'bg-primary-container/30 border border-primary/20' : 'bg-surface-container'
                }`}>
                  <div className="min-w-0">
                    <div className="flex items-center gap-2 flex-wrap">
                      <Link
                        href={`/products/${pb.id}`}
                        className="text-sm font-medium text-foreground hover:text-primary hover:underline truncate"
                      >
                        {pb.name}
                      </Link>
                      <span className={`shrink-0 text-xs px-1.5 py-0.5 rounded font-medium ${
                        pb.kind === 'owner'
                          ? 'bg-primary-container text-primary-container-foreground'
                          : 'bg-secondary-container text-secondary-container-foreground'
                      }`}>
                        {pb.kind === 'owner' ? 'Eigenaar' : 'Developer'}
                      </span>
                      {isActive && (
                        <span className="shrink-0 text-xs px-1.5 py-0.5 rounded font-medium bg-primary text-primary-foreground">
                          Actief
                        </span>
                      )}
                    </div>
                    {pb.kind === 'member' && (
                      <p className="text-xs text-muted-foreground mt-0.5">Eigenaar: {pb.ownerUsername}</p>
                    )}
                  </div>
                  <div className="flex items-center gap-3 shrink-0">
                    {!isActive && (
                      <ActivateProductButton
                        productId={pb.id}
                        isDemo={session.isDemo ?? false}
                        label="Maak actief"
                      />
                    )}
                    {pb.kind === 'member' && (
                      <LeaveProductButton productId={pb.id} isDemo={session.isDemo ?? false} />
                    )}
                  </div>
                </li>
              )
            })}
          </ul>
        )}
      </div>

      <div className="bg-surface-container-low border border-border rounded-xl p-5 space-y-3">
        <div className="flex items-center justify-between">
          <h2 className="text-sm font-medium text-foreground">API Tokens</h2>
          <Link href="/settings/tokens" className="text-xs text-primary hover:underline">
            Beheren →
          </Link>
        </div>
        <p className="text-sm text-muted-foreground">
          Gebruik API tokens om Scrum4Me te koppelen aan Claude Code.
        </p>
      </div>
    </div>
  )
}