BanGUI/frontend/src/components/PageFeedback.tsx

/**
 * Reusable page-level feedback components.
 *
 * Three shared building blocks for consistent data-loading UI across all pages:
 *
 * - {@link PageLoading}  — Centred `Spinner` for full-region loading states.
 * - {@link PageError}    — `MessageBar` with an error message and a retry button.
 * - {@link PageEmpty}    — Centred neutral message for zero-result states.
 */

import {
  Button,
  MessageBar,
  MessageBarActions,
  MessageBarBody,
  MessageBarTitle,
  Spinner,
  Text,
  makeStyles,
  tokens,
} from "@fluentui/react-components";
import { ArrowClockwiseRegular } from "@fluentui/react-icons";

// ---------------------------------------------------------------------------
// Styles
// ---------------------------------------------------------------------------

const useStyles = makeStyles({
  centred: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
    minHeight: "120px",
    gap: tokens.spacingVerticalM,
    padding: tokens.spacingVerticalL,
  },
  emptyText: {
    color: tokens.colorNeutralForeground3,
    textAlign: "center",
  },
});

// ---------------------------------------------------------------------------
// PageLoading
// ---------------------------------------------------------------------------

export interface PageLoadingProps {
  /** Short description shown next to the spinner. */
  label?: string;
}

/**
 * Full-region loading indicator using a Fluent UI `Spinner`.
 *
 * @example
 * ```tsx
 * if (loading) return <PageLoading label="Loading jails…" />;
 * ```
 */
export function PageLoading({ label = "Loading…" }: PageLoadingProps): React.JSX.Element {
  const styles = useStyles();
  return (
    <div className={styles.centred} aria-live="polite" aria-label={label}>
      <Spinner label={label} />
    </div>
  );
}

// ---------------------------------------------------------------------------
// PageError
// ---------------------------------------------------------------------------

export interface PageErrorProps {
  /** Error message shown in the `MessageBar`. */
  message: string;
  /** Optional callback invoked when the user clicks "Retry". */
  onRetry?: () => void;
}

/**
 * Error state `MessageBar` with an optional retry button.
 *
 * @example
 * ```tsx
 * if (error) return <PageError message={error} onRetry={refresh} />;
 * ```
 */
export function PageError({ message, onRetry }: PageErrorProps): React.JSX.Element {
  return (
    <MessageBar intent="error" role="alert">
      <MessageBarBody>
        <MessageBarTitle>Error</MessageBarTitle>
        {message}
      </MessageBarBody>
      {onRetry != null && (
        <MessageBarActions>
          <Button
            appearance="transparent"
            size="small"
            icon={<ArrowClockwiseRegular />}
            onClick={onRetry}
            aria-label="Retry"
          >
            Retry
          </Button>
        </MessageBarActions>
      )}
    </MessageBar>
  );
}

// ---------------------------------------------------------------------------
// PageEmpty
// ---------------------------------------------------------------------------

export interface PageEmptyProps {
  /** Message displayed to the user, e.g. "No bans found." */
  message: string;
}

/**
 * Centred empty-state message for tables or lists with zero results.
 *
 * @example
 * ```tsx
 * if (items.length === 0) return <PageEmpty message="No bans in this period." />;
 * ```
 */
export function PageEmpty({ message }: PageEmptyProps): React.JSX.Element {
  const styles = useStyles();
  return (
    <div className={styles.centred} role="status" aria-label={message}>
      <Text size={200} className={styles.emptyText}>
        {message}
      </Text>
    </div>
  );
}