"use client";

/**
 * TopNav — top-level навигация на landing (gendsgn.ru/).
 *
 * Айтемы фильтруются через `isPathAllowed(allowed, deny, href)` по scope
 * текущего юзера из `/api/v1/me`. Источник правды — `auth/roles.yaml`:
 *   - admin: видит всё
 *   - pilot: «Админ» (`/admin/**`) скрыт, остальное видно
 *   - 401 (dev без Caddy): пропускаем фильтрацию, показываем всё
 *   - 403 (юзер не в roles) — этот компонент не дойдёт до рендера: RouteGuard
 *     раньше перехватит и покажет NoAccessScreen на весь экран.
 *
 * Кнопка «Запросить пилот» — public CTA, не фильтруется.
 */

import Link from "next/link";

import { HTTPError } from "@/lib/api";
import { isPathAllowed } from "@/lib/isPathAllowed";
import { useMe } from "@/lib/useMe";

interface NavItem {
  href: string;
  label: string;
  /**
   * true → путь обслуживает ОТДЕЛЬНОЕ приложение за Caddy (не этот Next-фронт),
   * рендерим plain `<a>` без prefetch/client-navigation. Иначе Next
   * префетчит RSC для чужого маршрута → «Failed to fetch RSC payload» +
   * ChunkLoadError в консоли (Caddy отдаёт 307 стороннего приложения).
   */
  external?: boolean;
}

const NAV_ITEMS: NavItem[] = [
  { href: "/analytics", label: "Аналитика" },
  { href: "/site-finder", label: "Site Finder" },
  // /trade-in/** проксируется Caddy в отдельный tradein-frontend (basePath
  // /trade-in, canonical /trade-in/v2). Для ЭТОГО приложения — внешняя ссылка.
  { href: "/trade-in/v2", label: "Trade-In", external: true },
  { href: "/concept", label: "Концепция" },
  { href: "/admin/scrape/all", label: "Админ" },
];

interface TopNavProps {
  /** Slot справа от ссылок — обычно «Запросить пилот» CTA. */
  rightSlot?: React.ReactNode;
}

export function TopNav({ rightSlot }: TopNavProps) {
  const { data, error } = useMe();

  // Dev (без Caddy) — 401, показываем все айтемы. В проде Caddy basic_auth
  // всегда ставит header → 401 невозможен.
  // Если /me ещё грузится или вернул ошибку без scope — показываем nav без
  // фильтрации (RouteGuard уже перехватит 403 на весь экран, так что в
  // реальности этот fallback срабатывает только в dev/loading).
  const isDev401 = error instanceof HTTPError && error.status === 401;
  const items =
    data && !isDev401
      ? NAV_ITEMS.filter((item) =>
          isPathAllowed(data.allowed_paths, data.deny_paths, item.href),
        )
      : NAV_ITEMS;

  return (
    <nav
      style={{
        background: "var(--bg-card)",
        borderBottom: "1px solid var(--border-card)",
        padding: "0 24px",
        height: 56,
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
        position: "sticky",
        top: 0,
        zIndex: 100,
      }}
    >
      <Link
        href="/"
        style={{
          fontWeight: 700,
          fontSize: 17,
          color: "var(--fg-primary)",
          textDecoration: "none",
        }}
      >
        GenDesign
      </Link>
      <div style={{ display: "flex", gap: 24, alignItems: "center" }}>
        {items.map((item) => {
          const linkStyle = {
            fontSize: 14,
            color: "var(--fg-secondary)",
            textDecoration: "none",
          } as const;
          // Внешний маршрут (за Caddy → другое приложение): plain <a>, без
          // Next prefetch/RSC — иначе ChunkLoadError в консоли лендинга.
          return item.external ? (
            <a key={item.href} href={item.href} style={linkStyle}>
              {item.label}
            </a>
          ) : (
            <Link key={item.href} href={item.href} style={linkStyle}>
              {item.label}
            </Link>
          );
        })}
        {rightSlot}
      </div>
    </nav>
  );
}
