import { describe, it, expect, vi } from 'vitest';
import { mountSuspended } from '@nuxt/test-utils/runtime';
import SlugPage from './[...slug].vue';

// Mock useDataJson
const mockPageContent = ref<{ title: string; description: string; meta?: { layout?: string } } | null>(null);
const mockPageData = ref<Record<string, unknown> | null>(null);

vi.mock('~/composables/useDataJson', () => ({
  useDataJson: vi.fn((prefix: string) => {
    if (prefix === 'page') {
      return {
        getPageContent: vi.fn(async () => mockPageContent),
      };
    }
    if (prefix === 'page-data') {
      return {
        getJsonData: vi.fn(async () => mockPageData),
      };
    }
    return {
      getPageContent: vi.fn(async () => mockPageContent),
      getJsonData: vi.fn(async () => mockPageData),
    };
  }),
}));

// Mock useMeta
vi.mock('~/composables/useMeta', () => ({
  useMeta: vi.fn(),
}));

describe('Slug Page (Catch-all)', () => {
  describe('rendering', () => {
    it('should render the page when content exists', async () => {
      mockPageContent.value = {
        title: 'Test Page',
        description: 'A test page',
      };

      const wrapper = await mountSuspended(SlugPage);

      expect(wrapper.exists()).toBe(true);
    });

    it('should show not found message when page is null', async () => {
      mockPageContent.value = null;

      const wrapper = await mountSuspended(SlugPage);

      expect(wrapper.text()).toContain('Page not found');
    });
  });

  describe('layout selection', () => {
    it('should use default layout when no custom layout specified', async () => {
      mockPageContent.value = {
        title: 'Test Page',
        description: 'A test page',
      };

      const wrapper = await mountSuspended(SlugPage);

      expect(wrapper.exists()).toBe(true);
    });

    it('should use custom layout when specified in meta', async () => {
      mockPageContent.value = {
        title: 'Centered Page',
        description: 'A centered page',
        meta: { layout: 'centered' },
      };

      const wrapper = await mountSuspended(SlugPage);

      expect(wrapper.exists()).toBe(true);
    });
  });

  describe('page data injection', () => {
    it('should provide pageData to child components', async () => {
      mockPageContent.value = {
        title: 'Vocal Synthesis',
        description: 'Vocal synthesis projects',
      };
      mockPageData.value = {
        projects: [{ title: 'Project 1' }],
        tools: [{ name: 'Tool 1' }],
      };

      const wrapper = await mountSuspended(SlugPage);

      // Page data should be provided for MDC components
      expect(wrapper.exists()).toBe(true);
    });
  });

  describe('content rendering', () => {
    it('should render ContentRenderer when page exists', async () => {
      mockPageContent.value = {
        title: 'Test Content',
        description: 'Test description',
      };

      const wrapper = await mountSuspended(SlugPage);

      expect(wrapper.exists()).toBe(true);
    });
  });

  describe('SEO meta', () => {
    it('should call useMeta with page title and description', async () => {
      const { useMeta } = await import('~/composables/useMeta');

      mockPageContent.value = {
        title: 'SEO Test Page',
        description: 'Testing SEO metadata',
      };

      await mountSuspended(SlugPage);

      // useMeta should have been called
      expect(useMeta).toHaveBeenCalled();
    });
  });
});