import React from 'react';
import { describe, it, expect, vi } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import { SettingsProfilePage } from '@/pages/SettingsProfile';

vi.mock('@/store/authStore', () => ({
  useAuthStore: () => ({
    user: {
      id: '1', email: 'max@mustermann.de', first_name: 'Max', last_name: 'Mustermann',
      avatar_url: '',
    },
  }),
}));

const mockUpdateUser = vi.fn().mockResolvedValue({});

vi.mock('@/api/hooks', () => ({
  useUpdateUser: () => ({ mutateAsync: mockUpdateUser, isPending: false }),
}));

vi.mock('@/components/ui/Toast', () => ({
  useToast: () => ({ success: vi.fn(), error: vi.fn(), info: vi.fn() }),
}));

describe('SettingsProfilePage', () => {
  it('renders profile page', () => {
    render(<MemoryRouter><SettingsProfilePage /></MemoryRouter>);
    expect(screen.getByTestId('settings-profile-page')).toBeInTheDocument();
  });

  it('renders first name field', () => {
    render(<MemoryRouter><SettingsProfilePage /></MemoryRouter>);
    expect(screen.getByLabelText(/Vorname/)).toBeInTheDocument();
  });

  it('renders last name field', () => {
    render(<MemoryRouter><SettingsProfilePage /></MemoryRouter>);
    expect(screen.getByLabelText(/Nachname/)).toBeInTheDocument();
  });

  it('renders email field', () => {
    render(<MemoryRouter><SettingsProfilePage /></MemoryRouter>);
    expect(screen.getByLabelText(/E-Mail/)).toBeInTheDocument();
  });

  it('renders avatar upload section', () => {
    render(<MemoryRouter><SettingsProfilePage /></MemoryRouter>);
    expect(screen.getByTestId('avatar-upload')).toBeInTheDocument();
  });

  it('renders password change section', () => {
    render(<MemoryRouter><SettingsProfilePage /></MemoryRouter>);
    expect(screen.getByTestId('current-password')).toBeInTheDocument();
    expect(screen.getByTestId('new-password')).toBeInTheDocument();
    expect(screen.getByTestId('confirm-password')).toBeInTheDocument();
  });

  it('renders save button for profile', () => {
    render(<MemoryRouter><SettingsProfilePage /></MemoryRouter>);
    expect(screen.getByTestId('profile-save-btn')).toBeInTheDocument();
  });

  it('renders password change button', () => {
    render(<MemoryRouter><SettingsProfilePage /></MemoryRouter>);
    expect(screen.getByTestId('password-change-btn')).toBeInTheDocument();
  });

  it('save button is disabled when profile is not dirty', () => {
    render(<MemoryRouter><SettingsProfilePage /></MemoryRouter>);
    expect(screen.getByTestId('profile-save-btn')).toBeDisabled();
  });

  it('save button is enabled when profile fields change', () => {
    render(<MemoryRouter><SettingsProfilePage /></MemoryRouter>);
    const firstNameInput = screen.getByTestId('profile-first-name');
    fireEvent.change(firstNameInput, { target: { value: 'Maximilian' } });
    expect(screen.getByTestId('profile-save-btn')).not.toBeDisabled();
  });

  it('pre-fills form with user data', () => {
    render(<MemoryRouter><SettingsProfilePage /></MemoryRouter>);
    const firstNameInput = screen.getByTestId('profile-first-name') as HTMLInputElement;
    const lastNameInput = screen.getByTestId('profile-last-name') as HTMLInputElement;
    const emailInput = screen.getByTestId('profile-email') as HTMLInputElement;
    expect(firstNameInput.value).toBe('Max');
    expect(lastNameInput.value).toBe('Mustermann');
    expect(emailInput.value).toBe('max@mustermann.de');
  });
});