import React from 'react';
import { describe, it, expect } from 'vitest';
import { Provider } from 'react-redux';
import { store } from '@/state/store';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import { MemoryRouter, Route, Routes } from 'react-router-dom';
import { render, screen, waitFor } from '@testing-library/react';
import { http, HttpResponse } from 'msw';
import { server } from '../msw/server';
import { EditPost } from '@/pages/EditPost/EditPost';

describe('EditPost — wiki canonical loading', () => {
  it('loads canonical content by identifier across names', async () => {
    // BLOG owner + settings
    server.use(
      http.get('/arbitrary/resources', ({ request }) => {
        const url = new URL(request.url);
        if (
          url.searchParams.get('service') === 'BLOG' &&
          url.searchParams.get('identifier') === 'q-blog-myblog'
        ) {
          return HttpResponse.json([{ name: 'alice', identifier: 'q-blog-myblog' }]);
        }
        return HttpResponse.json([]);
      }),
      http.get('/arbitrary/BLOG/:name/:id', ({ params }) => {
        const { name, id } = params as any;
        if (name === 'alice' && id === 'q-blog-myblog') {
          return HttpResponse.json({ wikiEnabled: true });
        }
        return HttpResponse.json({}, { status: 404 });
      }),
      // Search across names by full identifier
      http.get('/arbitrary/resources/search', ({ request }) => {
        const url = new URL(request.url);
        if (
          url.searchParams.get('service') === 'BLOG_POST' &&
          url.searchParams.get('identifier') === 'q-blog-myblog-post-123'
        ) {
          return HttpResponse.json([
            { name: 'alice', identifier: 'q-blog-myblog-post-123', updated: 1000 },
            { name: 'carol', identifier: 'q-blog-myblog-post-123', updated: 2000 },
          ]);
        }
        return HttpResponse.json([]);
      }),
      // Canonical chosen should be carol (newer)
      http.get('/arbitrary/BLOG_POST/:name/:fullId', ({ params }) => {
        const { name, fullId } = params as any;
        if (name === 'carol' && fullId === 'q-blog-myblog-post-123') {
          return HttpResponse.json({
            title: 'Newer Title',
            createdAt: 1,
            postContent: [{ type: 'editor', version: 1, id: 'e1', content: [{ text: 'Hello' }] }],
          });
        }
        return HttpResponse.json({}, { status: 404 });
      }),
    );

    render(
      <Provider store={store}>
        <ThemeProvider theme={createTheme()}>
          <MemoryRouter initialEntries={[`/bob/myblog/123/edit`]}>
            <Routes>
              <Route path="/:user/:blog/:postId/edit" element={<EditPost />} />
            </Routes>
          </MemoryRouter>
        </ThemeProvider>
      </Provider>,
    );

    // Title input should pick canonical content's title
    const titleInput = await screen.findByDisplayValue('Newer Title');
    expect(titleInput).toBeInTheDocument();
  });
});