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, 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.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)

  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} />

      {memberships.length > 0 && (
        <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">Mijn teams</h2>
            <p className="text-xs text-muted-foreground mt-0.5">
              Products waarbij je als Developer bent toegevoegd.
            </p>
          </div>
          <ul className="space-y-2">
            {memberships.map(m => (
              <li key={m.product.id} className="flex items-center justify-between gap-3 rounded-lg bg-surface-container px-3 py-2">
                <div>
                  <p className="text-sm font-medium text-foreground">{m.product.name}</p>
                  <p className="text-xs text-muted-foreground">Eigenaar: {m.product.user.username}</p>
                </div>
                {!session.isDemo && <LeaveProductButton productId={m.product.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>
  )
}