import Link from 'next/link'
import { signOut } from '@/auth'
import { requireUser } from '@/lib/auth/current'
import { de } from '@/lib/i18n/de'
import { PaletteTrigger } from '@/components/palette/PaletteTrigger'
import { ThemeToggle } from '@/components/ThemeToggle'
import { Vitals } from '@/components/Vitals'

export default async function AppLayout({ children }: { children: React.ReactNode }) {
  const user = await requireUser()

  async function abmelden() {
    'use server'
    await signOut({ redirectTo: '/anmelden' })
  }

  return (
    <div className="min-h-dvh">
      {/* Strg+K. Winzig; die Palette selbst wird erst beim Öffnen geholt. */}
      <PaletteTrigger />
      <Vitals />
      <header className="border-b border-line">
        <div className="mx-auto flex max-w-5xl flex-wrap items-center gap-x-6 gap-y-2 px-6 py-3">
          <Link href="/uebersicht" className="font-condensed text-text no-underline">
            {de.app.shortName}
          </Link>

          <nav className="flex gap-4 font-condensed text-xs">
            <Link href="/uebersicht">{de.nav.dashboard}</Link>
            <Link href="/faelle">{de.nav.cases}</Link>
            {user.permissions.isAdmin || user.permissions.permissions.has('personnel.read') ? (
              <Link href="/personalakten">{de.nav.personnel}</Link>
            ) : null}
            <Link href="/suche">{de.nav.search}</Link>
            <Link href="/kanaele">{de.channel.heading}</Link>
            <Link href="/einstellungen">{de.notify.heading}</Link>
            {user.permissions.isAdmin || user.permissions.permissions.has('roles.manage') ? (
              <>
                <Link href="/admin/rollen">{de.nav.admin}</Link>
                {user.permissions.isAdmin ||
                user.permissions.permissions.has('template.manage') ? (
                  <Link href="/admin/vorlagen">{de.templateAdmin.heading}</Link>
                ) : null}
                {user.permissions.isAdmin ? (
                  <Link href="/admin/richtlinie">{de.settings.heading}</Link>
                ) : null}
              </>
            ) : null}
          </nav>

          <div className="ml-auto flex items-center gap-3 text-xs text-text-dim">
            <ThemeToggle />
            <span className="font-mono">{user.displayName}</span>
            <form action={abmelden}>
              <button type="submit" className="font-condensed text-accent">
                {de.auth.signOut}
              </button>
            </form>
          </div>
        </div>
      </header>

      <div id="inhalt">{children}</div>
    </div>
  )
}