import { describe, it, expect } from 'vitest';
import { screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { http, HttpResponse } from 'msw';
import { server } from '../test/server';
import { ProfilePage } from './ProfilePage';
import { renderWithProviders } from '../test/test-utils';

const API = '/api/v1';

describe('ProfilePage', () => {
  it('renders user profile', async () => {
    renderWithProviders(<ProfilePage />, { route: '/profile' });
    expect(await screen.findByText('Профиль')).toBeInTheDocument();
    expect(await screen.findByText('user@test.com')).toBeInTheDocument();
    expect(await screen.findByText('user')).toBeInTheDocument();
  });

  it('shows user name in input', async () => {
    renderWithProviders(<ProfilePage />, { route: '/profile' });
    const input = await screen.findByDisplayValue('Test User');
    expect(input).toBeInTheDocument();
  });

  it('updates profile on save', async () => {
    const user = userEvent.setup();
    renderWithProviders(<ProfilePage />, { route: '/profile' });

    const input = await screen.findByDisplayValue('Test User');
    await user.clear(input);
    await user.type(input, 'Updated User');
    await user.click(screen.getByRole('button', { name: 'Сохранить' }));

    expect(await screen.findByText('Профиль обновлён')).toBeInTheDocument();
  });

  it('shows error message on failed update', async () => {
    server.use(http.patch(`${API}/auth/me`, () => new HttpResponse(null, { status: 500 })));
    const user = userEvent.setup();
    renderWithProviders(<ProfilePage />, { route: '/profile' });

    const input = await screen.findByDisplayValue('Test User');
    await user.clear(input);
    await user.type(input, 'New Name');
    await user.click(screen.getByRole('button', { name: 'Сохранить' }));

    expect(await screen.findByText('Не удалось обновить профиль')).toBeInTheDocument();
  });

  it('shows saving state', async () => {
    server.use(http.patch(`${API}/auth/me`, () => new Promise(() => {})));
    const user = userEvent.setup();
    renderWithProviders(<ProfilePage />, { route: '/profile' });

    const input = await screen.findByDisplayValue('Test User');
    await user.clear(input);
    await user.type(input, 'New Name');
    await user.click(screen.getByRole('button', { name: 'Сохранить' }));

    expect(await screen.findByText('Сохранение...')).toBeInTheDocument();
  });
});