import React from 'react';
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { MemoryRouter } from 'react-router-dom';
import { LoginPage } from '@/pages/Login';

vi.mock('@/api/hooks', () => ({
  useLogin: () => ({
    mutateAsync: vi.fn().mockResolvedValue({ user: { id: '1', email: 'test@test.de' } }),
    isPending: false,
  }),
}));

vi.mock('@/store/uiStore', () => ({
  useUIStore: () => ({
    addToast: vi.fn(),
    removeToast: vi.fn(),
  }),
}));

function renderLogin() {
  return render(
    <MemoryRouter initialEntries={['/login']}>
      <LoginPage />
    </MemoryRouter>
  );
}

describe('LoginPage', () => {
  beforeEach(() => {
    vi.clearAllMocks();
  });

  it('renders email and password form', () => {
    renderLogin();
    expect(screen.getByLabelText(/E-Mail-Adresse/)).toBeInTheDocument();
    expect(screen.getByLabelText(/Passwort/)).toBeInTheDocument();
    expect(screen.getByRole('button', { name: /Anmelden/ })).toBeInTheDocument();
  });

  it('has forgot password link', () => {
    renderLogin();
    expect(screen.getByText(/Passwort vergessen/)).toBeInTheDocument();
  });

  it('form has noValidate attribute', () => {
    renderLogin();
    const form = screen.getByRole('form');
    expect(form).toHaveAttribute('noValidate');
  });

  it('email input has type=email', () => {
    renderLogin();
    const emailInput = screen.getByLabelText(/E-Mail-Adresse/);
    expect(emailInput).toHaveAttribute('type', 'email');
  });

  it('password input has type=password', () => {
    renderLogin();
    const passwordInput = screen.getByLabelText(/Passwort/);
    expect(passwordInput).toHaveAttribute('type', 'password');
  });

  it('submit button has min-h-touch for 44px target', () => {
    renderLogin();
    const btn = screen.getByRole('button', { name: /Anmelden/ });
    expect(btn.className).toContain('min-h-touch');
  });
});
