"use client";

/**
 * MIRROR of main frontend `frontend/src/components/auth/NoAccessScreen.tsx`
 * — keep in sync manually. Tradein-mvp бандлится отдельно (basePath=/trade-in),
 * нет общего workspace package.
 *
 * Fullscreen «доступа нет» — для 403 от /me или для denied path.
 * Token-based styling per `.claude/rules/ui-tokens.md` (см. globals.css).
 */

interface NoAccessScreenProps {
  variant: "user" | "path";
  path?: string;
}

export function NoAccessScreen({ variant, path }: NoAccessScreenProps) {
  const subtitle =
    variant === "user"
      ? "Учётная запись не привязана к роли. Обратитесь к администратору GenDesign — kopylov."
      : "У вашей роли нет доступа к этому разделу. Вернитесь на главную или обратитесь к администратору.";

  return (
    <main
      role="alert"
      aria-live="polite"
      style={{
        minHeight: "100vh",
        background: "var(--bg-app)",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        padding: 24,
        fontFamily:
          "Inter, -apple-system, 'Segoe UI', system-ui, sans-serif",
      }}
    >
      <div
        style={{
          background: "var(--bg-card)",
          border: "1px solid var(--border-card)",
          borderRadius: 12,
          padding: "32px 28px",
          maxWidth: 480,
          width: "100%",
        }}
      >
        <h1
          style={{
            margin: "0 0 8px",
            fontSize: 22,
            fontWeight: 600,
            color: "var(--fg-primary)",
            lineHeight: 1.25,
          }}
        >
          Доступа нет
        </h1>
        <p
          style={{
            margin: 0,
            fontSize: 14,
            color: "var(--fg-secondary)",
            lineHeight: 1.6,
          }}
        >
          {subtitle}
        </p>
        {variant === "path" && path ? (
          <p
            style={{
              margin: "12px 0 0",
              fontSize: 12,
              color: "var(--fg-tertiary)",
              fontFamily: "ui-monospace, SFMono-Regular, monospace",
              wordBreak: "break-all",
            }}
          >
            {path}
          </p>
        ) : null}
      </div>
    </main>
  );
}
