"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).
 */

import { logout } from "@/lib/logout";

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

export function NoAccessScreen({ variant, path }: NoAccessScreenProps) {
  const title =
    variant === "session"
      ? "Сессия истекла"
      : variant === "trial"
        ? "Пробный доступ закончился"
        : variant === "error"
          ? "Не удалось проверить доступ"
          : "Доступа нет";

  const subtitle =
    variant === "session"
      ? "Сессия истекла или вы не авторизованы. Нажмите «Войти снова», чтобы пройти авторизацию заново."
      : variant === "error"
        ? "Возникла техническая проблема при проверке доступа. Проверьте подключение к интернету и обновите страницу. Если ошибка повторяется — обратитесь к администратору GenDesign."
        : variant === "user"
          ? "Учётная запись не привязана к роли. Обратитесь к администратору GenDesign — kopylov."
          : variant === "path"
            ? "У вашей роли нет доступа к этому разделу. Вернитесь на главную или обратитесь к администратору."
            : null;

  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,
          }}
        >
          {title}
        </h1>
        {variant === "trial" ? (
          <p
            style={{
              margin: 0,
              fontSize: 14,
              color: "var(--fg-secondary)",
              lineHeight: 1.6,
            }}
          >
            Пробный доступ к сервису «Мера» закончился. Чтобы продлить доступ
            или получить полную версию — напишите Артёму Копылову:{" "}
            <a
              href="https://t.me/ArtemKopylov87"
              target="_blank"
              rel="noreferrer"
              style={{
                color: "var(--accent)",
                textDecoration: "underline",
              }}
            >
              @ArtemKopylov87
            </a>
            .
          </p>
        ) : (
          <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}
        {/* Always-available primary action — иначе locked/no-access юзер заперт:
            UserMenu (где обычно «Выйти») на этом экране не рендерится.
            session/error — сбой временный (истёкшая сессия / сетевой сбой),
            поэтому CTA — повторить попытку через reload, а не logout.
            basic_auth Caddy: reload на top-level navigation триггерит
            повторный auth-challenge браузера при отклонённых creds. */}
        {variant === "session" || variant === "error" ? (
          <button
            type="button"
            onClick={() => window.location.reload()}
            style={{
              marginTop: 20,
              background: "var(--accent)",
              color: "#FFFFFF",
              border: "none",
              borderRadius: 8,
              padding: "10px 16px",
              fontSize: 14,
              fontWeight: 500,
              cursor: "pointer",
              fontFamily: "inherit",
            }}
          >
            {variant === "session" ? "Войти снова" : "Обновить страницу"}
          </button>
        ) : (
          <button
            type="button"
            onClick={() => logout()}
            style={{
              marginTop: 20,
              background: "var(--accent)",
              color: "#FFFFFF",
              border: "none",
              borderRadius: 8,
              padding: "10px 16px",
              fontSize: 14,
              fontWeight: 500,
              cursor: "pointer",
              fontFamily: "inherit",
            }}
          >
            Выйти
          </button>
        )}
      </div>
    </main>
  );
}
