/**
 * Shared full-screen state layout for fallback screens (access denied, not-found, error).
 * Uses content-safe, app tokens, and consistent spacing so all fallback screens look like the same app.
 */

"use client";

export interface FullScreenStateShellProps {
  /** Main heading (e.g. "Access denied", "Page not found"). */
  title: React.ReactNode;
  /** Optional description or message below the title. */
  description?: React.ReactNode;
  /** Optional extra content (e.g. server detail, secondary text). */
  children?: React.ReactNode;
  /** Primary action (Button or Link). */
  primaryAction: React.ReactNode;
  /** Wrapper role. Default "alert" for error/denied states. */
  role?: "alert" | "status";
  /** Optional extra class names for the wrapper. */
  className?: string;
}

const OUTER_CLASS =
  "content-safe flex min-h-[var(--tg-viewport-stable-height,100vh)] flex-col items-center justify-center gap-4 bg-background text-foreground";
const INNER_CLASS = "mx-auto w-full max-w-[var(--max-width-app)] px-3 flex flex-col items-center gap-4";

/**
 * Full-screen centered shell with title, optional description, and primary action.
 * Use for access denied, not-found, and in-app error boundary screens.
 */
export function FullScreenStateShell({
  title,
  description,
  children,
  primaryAction,
  role = "alert",
  className,
}: FullScreenStateShellProps) {
  return (
    <div
      className={className ? `${OUTER_CLASS} ${className}` : OUTER_CLASS}
      role={role}
    >
      <div className={INNER_CLASS}>
        <h1 className="text-xl font-semibold">{title}</h1>
        {description != null && (
          <p className="text-center text-muted-foreground">{description}</p>
        )}
        {children}
        {primaryAction}
      </div>
    </div>
  );
}