import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import { ThemeProvider } from 'styled-components';
import { I18nextProvider } from 'react-i18next';
import { describe, it, expect, vi } from 'vitest';
import '@testing-library/jest-dom';
import i18n from '@/locales/i18n';
import { LocaleProvider } from '@/app/providers/LocaleProvider';
import { AvatarUploadSection } from '@/features/profile/components/AvatarUploadSection';
import { lightTheme } from '@/styles/theme';

vi.mock('@/features/profile/services/profileService', () => ({
  profileService: {
    uploadAvatar: vi.fn(),
    deleteAvatar: vi.fn(),
  },
}));

function renderSection(props?: Partial<React.ComponentProps<typeof AvatarUploadSection>>) {
  return render(
    <I18nextProvider i18n={i18n}>
      <LocaleProvider>
        <ThemeProvider theme={lightTheme}>
          <AvatarUploadSection
            name="Test User"
            avatarUrl={null}
            onUpdated={vi.fn()}
            {...props}
          />
        </ThemeProvider>
      </LocaleProvider>
    </I18nextProvider>,
  );
}

describe('AvatarUploadSection', () => {
  it('renders change photo action', () => {
    renderSection();
    expect(screen.getByRole('button', { name: /change photo/i })).toBeInTheDocument();
  });

  it('rejects invalid file type', async () => {
    renderSection();
    const input = document.querySelector('input[type="file"]') as HTMLInputElement;
    const file = new File(['hello'], 'notes.txt', { type: 'text/plain' });

    fireEvent.change(input, { target: { files: [file] } });

    expect(await screen.findByRole('alert')).toHaveTextContent(/jpg|png|webp/i);
  });
});