import '@testing-library/jest-dom/vitest';
import { fireEvent, render, screen } from '@testing-library/svelte';
import { describe, expect, it, vi } from 'vitest';
import ServerLogin from './ServerLogin.svelte';

describe('ServerLogin', () => {
  it('renders server, account, and password fields', () => {
    render(ServerLogin, { props: { apiBase: 'http://localhost:8080' } });

    expect(screen.getByLabelText('Server IP or domain')).toBeInTheDocument();
    expect(screen.getByLabelText('Email or username')).toBeInTheDocument();
    expect(screen.getByLabelText('Password')).toBeInTheDocument();
    expect(screen.getByRole('button', { name: 'Log in' })).toBeInTheDocument();
  });

  it('normalizes server address and emits login details', async () => {
    const onLogin = vi.fn();
    render(ServerLogin, {
      props: {
        apiBase: 'localhost:8080',
        onLogin,
      },
    });

    await fireEvent.input(screen.getByLabelText('Server IP or domain'), {
      target: { value: '10.0.0.12:8080' },
    });
    await fireEvent.input(screen.getByLabelText('Email or username'), {
      target: { value: 'david@example.com' },
    });
    await fireEvent.input(screen.getByLabelText('Password'), {
      target: { value: 'secret' },
    });
    await fireEvent.click(screen.getByRole('button', { name: 'Log in' }));

    expect(onLogin).toHaveBeenCalledWith({
      apiBase: 'http://10.0.0.12:8080',
      account: 'david@example.com',
    });
  });

  it('shows an error when account or password is missing', async () => {
    render(ServerLogin, { props: { apiBase: 'http://localhost:8080' } });

    await fireEvent.click(screen.getByRole('button', { name: 'Log in' }));

    expect(screen.getByText('Enter an account and password.')).toBeInTheDocument();
  });
});