import { de } from '@/lib/i18n/de'
import { StampMark, classificationEdgeStyle } from '@/components/StampMark'

type Level = { level: number; name: string; hiddenBelow: boolean }

/**
 * „Was sieht Stufe 2?" aus TASKS.md Phase 1.
 *
 * Beantwortet die Frage, die der Abteilungsleitung beim Vergeben von Rollen
 * tatsächlich im Kopf herumgeht: wer kommt auf welche Stufe, und was heisst
 * das für alles darüber. Rein serverseitig gerechnet, nichts Interaktives.
 */
export function ClearancePreview({
  levels,
  mappings,
}: {
  levels: Level[]
  mappings: { label: string; clearanceLevel: number }[]
}) {
  return (
    <section className="mt-8 border border-line">
      <div className="border-b border-line px-4 py-2">
        <h2 className="font-condensed">{de.roleAdmin.preview.heading}</h2>
        <p className="mt-1 text-xs text-text-dim">{de.roleAdmin.preview.intro}</p>
      </div>

      <ul>
        {levels.map((level) => {
          const viaRoles = mappings.filter((m) => m.clearanceLevel === level.level)
          // Eine Akte über der Stufe des Lesers ist entweder unsichtbar oder
          // sichtbar aber gesperrt. Das steuert ClearanceLevelConfig.hiddenBelow
          // der jeweils höheren Stufe.
          const higher = levels.filter((l) => l.level > level.level)
          const anyHidden = higher.some((l) => l.hiddenBelow)

          return (
            <li
              key={level.level}
              className="border-b border-line/60 px-4 py-3 last:border-b-0"
              style={classificationEdgeStyle(level.level)}
            >
              <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
                <StampMark level={level.level} name={level.name} />
                <span className="text-xs text-text-dim">
                  {de.roleAdmin.preview.sees} {level.name}
                </span>
              </div>

              <p className="mt-1.5 text-xs text-text-dim">
                {higher.length === 0
                  ? null
                  : anyHidden
                    ? de.roleAdmin.preview.hidden
                    : de.roleAdmin.preview.lockedOnly}
              </p>

              <p className="mt-1 text-2xs text-text-dim">
                {viaRoles.length === 0
                  ? de.roleAdmin.preview.nobody
                  : `${de.roleAdmin.preview.viaRoles}: ${viaRoles.map((r) => r.label).join(', ')}`}
              </p>
            </li>
          )
        })}
      </ul>
    </section>
  )
}