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 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, bio: true, bio_detail: true, avatar_data: true, updated_at: 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 productBacklogs: 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,
    })),
  ]

  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
            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>
          <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>
        {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 => (
              <li key={`${pb.kind}-${pb.id}`} className="flex items-center justify-between gap-3 rounded-lg bg-surface-container px-3 py-2.5">
                <div className="min-w-0">
                  <div className="flex items-center gap-2">
                    <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>
                  </div>
                  {pb.kind === 'member' && (
                    <p className="text-xs text-muted-foreground mt-0.5">Eigenaar: {pb.ownerUsername}</p>
                  )}
                </div>
                {pb.kind === 'member' && !session.isDemo && (
                  <LeaveProductButton productId={pb.id} />
                )}
              </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>
  )
}