import type { Metadata, Viewport } from "next";
import { TrpcProvider } from "@/lib/trpc/provider";
import { WarteschlangeProvider } from "@/components/kiosk/warteschlange";
import { ServiceWorkerAnmeldung } from "@/components/kiosk/service-worker";

export const metadata: Metadata = {
  title: "FLORIAN Terminal",
  // Ein Terminal gehört nicht in eine Suchmaschine.
  robots: { index: false, follow: false },
  appleWebApp: { capable: true, title: "FLORIAN", statusBarStyle: "black-translucent" },
};

export const viewport: Viewport = {
  themeColor: "#b91c1c",
  // Kein Zoom auf dem Wandtablet: ein versehentliches Aufziehen mit dem
  // Handschuh verschiebt sonst die halbe Oberfläche, und niemand findet zurück.
  initialScale: 1,
  maximumScale: 1,
  userScalable: false,
  viewportFit: "cover",
};

/**
 * Layout des Terminals.
 *
 * Bewusst eigenständig, ohne die Seitenleiste der Verwaltungsoberfläche:
 *
 *   * **Große Ziele.** Alles Bedienbare ist mindestens 64 Pixel hoch. Wer mit
 *     Feuerwehrhandschuhen tippt, trifft keine 32-Pixel-Knöpfe.
 *   * **Kein Hover.** Ein Touchgerät kennt kein Darüberfahren; alles, was
 *     wichtig ist, steht immer da.
 *   * **Kein Zoom, kein Scrollen in der Breite.** Sonst verrutscht die
 *     Oberfläche, sobald jemand sie mit dem Ärmel streift.
 *
 * Der Service Worker und die Warteschlange hängen hier — beide gelten für
 * alles unterhalb von /kiosk.
 */
export default function KioskLayout({ children }: Readonly<{ children: React.ReactNode }>) {
  return (
    <TrpcProvider>
      <WarteschlangeProvider>
        <ServiceWorkerAnmeldung />
        <div className="min-h-screen bg-[var(--background)] text-[var(--foreground)] [touch-action:manipulation]">
          {children}
        </div>
      </WarteschlangeProvider>
    </TrpcProvider>
  );
}