import type { Metadata } from 'next'
import { db } from '@/lib/db'
import { requireUser } from '@/lib/auth/current'
import { de } from '@/lib/i18n/de'
import { PERMISSIONS } from '@/lib/auth/permissions'
import { StampMark } from '@/components/StampMark'

export const metadata: Metadata = { title: de.dashboard.access }
export const dynamic = 'force-dynamic'

/**
 * Zwischenstand aus TASKS.md Phase 1: zeigt Name, Rollen, errechnete Stufe und
 * Rechte. Das ist die Seite, an der die Abteilungsleitung nachvollziehen kann,
 * warum jemand etwas sieht oder eben nicht.
 */
export default async function OverviewPage() {
  const user = await requireUser()

  const [roles, level] = await Promise.all([
    db.userRole.findMany({
      where: { userId: user.id },
      select: { discordRoleId: true },
    }),
    db.clearanceLevelConfig.findUnique({ where: { level: user.permissions.clearanceLevel } }),
  ])

  const mappings = await db.roleMapping.findMany({
    where: { discordRoleId: { in: roles.map((r) => r.discordRoleId) } },
    orderBy: [{ category: 'asc' }, { sortOrder: 'desc' }],
  })
  const byId = new Map(mappings.map((m) => [m.discordRoleId, m]))

  const granted = [...user.permissions.permissions].sort()

  return (
    <main className="mx-auto max-w-(--container-measure) px-6 py-10">
      <h1 className="font-condensed">{de.overview.heading}</h1>
      <p className="mt-2 text-text-dim">{de.overview.intro}</p>

      <dl className="mt-8 grid grid-cols-[auto_1fr] gap-x-6 gap-y-3 text-sm">
        <dt className="font-condensed text-text-dim">{de.overview.person}</dt>
        <dd>{user.displayName}</dd>

        <dt className="font-condensed text-text-dim">{de.overview.discordId}</dt>
        <dd className="font-mono text-xs">{user.id}</dd>

        <dt className="font-condensed text-text-dim">{de.overview.clearance}</dt>
        <dd>
          <StampMark
            level={user.permissions.clearanceLevel}
            name={level?.name ?? de.common.unknown}
          />
        </dd>
      </dl>

      {user.permissions.isAdmin ? (
        <p className="mt-6 border-l-(length:--spacing-edge) border-stamp-5 pl-3 text-xs text-text-dim">
          {de.overview.bootstrapAdmin}
        </p>
      ) : null}

      <h2 className="mt-10 font-condensed">{de.overview.roles}</h2>
      {roles.length === 0 ? (
        <p className="mt-2 text-text-dim">{de.overview.noRoles}</p>
      ) : (
        <ul className="mt-3 space-y-1.5 text-sm">
          {roles.map((role) => {
            const mapping = byId.get(role.discordRoleId)
            return (
              <li key={role.discordRoleId} className="flex flex-wrap items-baseline gap-2">
                <span>{mapping?.label ?? role.discordRoleId}</span>
                <span className="font-condensed text-2xs text-text-dim">
                  {mapping
                    ? `${de.roleAdmin.categories[mapping.category]} · ${de.clearance.level(mapping.clearanceLevel)}`
                    : de.overview.unmapped}
                </span>
              </li>
            )
          })}
        </ul>
      )}

      <h2 className="mt-10 font-condensed">{de.overview.permissions}</h2>
      {granted.length === 0 ? (
        <p className="mt-2 text-text-dim">{de.overview.noPermissions}</p>
      ) : (
        <ul className="mt-3 flex flex-wrap gap-x-4 gap-y-1.5 font-mono text-xs">
          {PERMISSIONS.filter((p) => granted.includes(p)).map((permission) => (
            <li key={permission}>{permission}</li>
          ))}
        </ul>
      )}
    </main>
  )
}