{title}

/**
 * UXB-301 vocab-contract test.
 *
 * Asserts that the page <Head> title and the EditorialPageHeader title for
 * notification-settings.show derive from CANONICAL_ROUTE_LABELS — so the
 * label drift (UXB-301) can never regress on the page side.
 *
 * Coverage: page Head title + EditorialPageHeader h1. The DashboardLayout
 * user-menu label is verified at code level (DashboardLayout.tsx calls
 * getRouteCanonicalLabel('notification-settings.show') directly) but is not
 * rendered here because DashboardLayout is mocked as a passthrough.
 *
 * This is a STATIC / import-level contract test: it reads the actual runtime
 * value of CANONICAL_ROUTE_LABELS and then renders the page component in
 * isolation to assert the rendered text matches. No network, no router.
 */

import { render, screen } from '@testing-library/react';
import { describe, it, expect, vi } from 'vitest';

import { CANONICAL_ROUTE_LABELS, getRouteCanonicalLabel } from '@/config/site-navigation';

// ─── Mocks ────────────────────────────────────────────────────────────────────

vi.mock('@/lib/analytics', () => ({ trackProductEvent: vi.fn() }));
vi.mock('@/lib/toast-config', () => ({ fireToast: vi.fn() }));

vi.mock('@inertiajs/react', async () => {
  const actual = await vi.importActual('@inertiajs/react');
  return {
    ...actual,
    Head: ({ title }: { title: string }) => <title>{title}</title>,
    useForm: (initialData: Record<string, unknown>) => ({
      data: initialData,
      setData: vi.fn(),
      patch: vi.fn(),
      processing: false,
      errors: {},
      isDirty: false,
    }),
    usePage: () => ({
      props: {
        flash: {},
        sites: [],
        features: { teams: false, billing: false, notifications: true },
      },
    }),
  };
});

vi.mock('@/Layouts/DashboardLayout', () => ({
  default: ({ children }: { children: React.ReactNode }) => (
    <div data-testid="dashboard-layout">{children}</div>
  ),
}));

// ─── Tests ────────────────────────────────────────────────────────────────────

const ROUTE = 'notification-settings.show';
const CANONICAL = CANONICAL_ROUTE_LABELS[ROUTE];

describe('UXB-301: notification-settings.show vocabulary contract', () => {
  it('CANONICAL_ROUTE_LABELS has a non-empty entry for notification-settings.show', () => {
    expect(CANONICAL).toBeDefined();
    expect(typeof CANONICAL).toBe('string');
    expect(CANONICAL.length).toBeGreaterThan(0);
  });

  it('getRouteCanonicalLabel returns the same value as CANONICAL_ROUTE_LABELS direct access', () => {
    expect(getRouteCanonicalLabel(ROUTE)).toBe(CANONICAL);
  });

  describe('Settings/Notifications page', () => {
    const baseSite = { id: 1, name: 'Test Site' };
    const props = { site: baseSite, settings: null, flash: {} };

    it('page <Head> title includes the canonical label', async () => {
      vi.stubGlobal('route', () => '/mocked/route/1');

      const { default: Notifications } = await import('./Notifications');
      render(<Notifications {...props} />);

      const titleEl = document.querySelector('title');
      expect(titleEl?.textContent).toContain(CANONICAL);
    });

    it('EditorialPageHeader title equals the canonical label', async () => {
      vi.stubGlobal('route', () => '/mocked/route/1');

      const { default: Notifications } = await import('./Notifications');
      render(<Notifications {...props} />);

      // EditorialPageHeader renders the title as an h1
      const heading = screen.getByRole('heading', { level: 1 });
      expect(heading.textContent).toBe(CANONICAL);
    });
  });
});