import Link from "next/link"
import { BookOpenText, Hand, Info, Settings2 } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
import { Brand } from "@/components/brand"
import { ThemeToggle } from "@/components/theme-toggle"
import { readSitePages } from "@/lib/site-pages.server"
import { hasSitePageContent, SITE_PAGE_META } from "@/lib/site-pages"

/** Kopfzeile der öffentlichen Seiten. */
export async function PublicHeader({ subtitle }: { subtitle?: string }) {
  const pages = await readSitePages()
  const offers = (["easyLanguage", "signLanguage", "accessibility"] as const).filter(key => hasSitePageContent(pages, key))
  const icons = { easyLanguage: BookOpenText, signLanguage: Hand, accessibility: Info }
  return (
    <>
    <header className="sticky top-0 z-40 border-b bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div className="mx-auto flex min-h-14 flex-wrap py-2 max-w-5xl items-center justify-between gap-2 px-4 sm:gap-4 sm:px-6">
        <Link href="/" className="rounded-md outline-none focus-visible:ring-[3px] focus-visible:ring-ring">
          <Brand subtitle={subtitle} />
          <span className="sr-only">Zur Übersicht</span>
        </Link>

        <div className="flex items-center gap-1">
          <ThemeToggle />
          <Tooltip>
            <TooltipTrigger asChild>
              <Button variant="ghost" size="icon" asChild>
                <Link href="/admin" target="_blank">
                  <Settings2 />
                  <span className="sr-only">Admin-Bereich</span>
                </Link>
              </Button>
            </TooltipTrigger>
            <TooltipContent>Admin-Bereich</TooltipContent>
          </Tooltip>
        </div>
      </div>
    </header>
    {offers.length > 0 && (
      <nav aria-label="Barrierefreie Angebote" className="accessibility-rail">
        {offers.map(key => {
          const Icon = icons[key]
          return (
            <Tooltip key={key}>
              <TooltipTrigger asChild>
                <Link href={SITE_PAGE_META[key].path} className="accessibility-rail-link">
                  <Icon aria-hidden="true" strokeWidth={2} />
                  <span className="sr-only">{SITE_PAGE_META[key].title}</span>
                </Link>
              </TooltipTrigger>
              <TooltipContent side="left" sideOffset={10} className="max-w-60 text-sm">
                {SITE_PAGE_META[key].title}
              </TooltipContent>
            </Tooltip>
          )
        })}
      </nav>
    )}
    </>
  )
}