import type { Metadata } from 'next'
import { notFound } from 'next/navigation'
import { db } from '@/lib/db'
import { requireUser } from '@/lib/auth/current'
import { listLadders } from '@/lib/roles/ladders'
import { de } from '@/lib/i18n/de'
import { LadderEditor } from './LadderEditor'
import { NewLadderForm } from './NewLadderForm'

export const metadata: Metadata = { title: de.ladderAdmin.heading }
export const dynamic = 'force-dynamic'

/**
 * Ranggefüge verwalten.
 *
 * Eigene Seite und nicht ein weiterer Block auf der Rollenseite: dort steht
 * jede Rolle für sich mit zweiundzwanzig Kästchen, hier steht die Ordnung
 * zwischen den Rollen. Das sind zwei verschiedene Fragen, und beide brauchen
 * Platz.
 */
export default async function LadderAdminPage() {
  const user = await requireUser()
  if (!user.permissions.isAdmin && !user.permissions.permissions.has('roles.manage')) {
    notFound()
  }

  const [leitern, rollen, stufen] = await Promise.all([
    listLadders(user.permissions),
    db.roleMapping.findMany({
      orderBy: [{ sortOrder: 'desc' }, { label: 'asc' }],
      select: {
        discordRoleId: true,
        label: true,
        ladderId: true,
        isPresent: true,
        clearanceLevel: true,
        permissions: true,
        grantsMembership: true,
      },
    }),
    db.clearanceLevelConfig.findMany({ orderBy: { level: 'asc' } }),
  ])

  return (
    <section>
      <h2 className="font-condensed">{de.ladderAdmin.heading}</h2>
      <p className="mt-1 max-w-(--container-measure) text-2xs text-text-dim">
        {de.ladderAdmin.intro}
      </p>
      <p className="mt-2 max-w-(--container-measure) text-2xs text-text-dim">
        {de.ladderAdmin.why}
      </p>

      {rollen.length === 0 ? (
        <p className="mt-8 text-text-dim">{de.ladderAdmin.noRoles}</p>
      ) : (
        <>
          <div className="mt-6">
            <NewLadderForm />
          </div>

          {leitern.length === 0 ? (
            <p className="mt-10 text-text-dim">{de.ladderAdmin.empty}</p>
          ) : (
            <div className="mt-10 border-t border-line">
              {leitern.map((leiter) => (
                <LadderEditor
                  key={leiter.id}
                  ladder={{ id: leiter.id, name: leiter.name, note: leiter.note }}
                  order={leiter.roles.map((rolle) => rolle.discordRoleId)}
                  allRoles={rollen}
                  levels={stufen.map((stufe) => ({ level: stufe.level, name: stufe.name }))}
                />
              ))}
            </div>
          )}
        </>
      )}
    </section>
  )
}