/**
 * Tests for AuthFormField Component
 * FE-TEST-005: Test auth form field component
 */

import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import { AuthFormField } from './AuthFormField';

describe('AuthFormField', () => {
  it('should render label and children', () => {
    render(
      <AuthFormField label="Email">
        <input type="email" />
      </AuthFormField>,
    );

    expect(screen.getByText('Email')).toBeInTheDocument();
    expect(screen.getByRole('textbox')).toBeInTheDocument();
  });

  it('should show required indicator', () => {
    render(
      <AuthFormField label="Email" required>
        <input type="email" />
      </AuthFormField>,
    );

    const label = screen.getByText('Email');
    expect(label).toBeInTheDocument();
    // Check for required asterisk (it's in a span with aria-label="required")
    expect(screen.getByLabelText('required')).toBeInTheDocument();
  });

  it('should display error message', () => {
    render(
      <AuthFormField label="Email" error="Email is required">
        <input type="email" />
      </AuthFormField>,
    );

    expect(screen.getByText('Email is required')).toBeInTheDocument();
    expect(screen.getByText('Email is required')).toHaveAttribute(
      'role',
      'alert',
    );
  });

  it('should display help text when no error', () => {
    render(
      <AuthFormField label="Email" helpText="Enter your email address">
        <input type="email" />
      </AuthFormField>,
    );

    expect(screen.getByText('Enter your email address')).toBeInTheDocument();
  });

  it('should not display help text when error is present', () => {
    render(
      <AuthFormField
        label="Email"
        error="Email is required"
        helpText="Enter your email address"
      >
        <input type="email" />
      </AuthFormField>,
    );

    expect(screen.getByText('Email is required')).toBeInTheDocument();
    expect(
      screen.queryByText('Enter your email address'),
    ).not.toBeInTheDocument();
  });

  it('should use custom htmlFor', () => {
    render(
      <AuthFormField label="Email" htmlFor="custom-email">
        <input id="custom-email" type="email" />
      </AuthFormField>,
    );

    const label = screen.getByText('Email');
    expect(label).toHaveAttribute('for', 'custom-email');
  });

  it('should generate field id if htmlFor not provided', () => {
    render(
      <AuthFormField label="Email">
        <input type="email" />
      </AuthFormField>,
    );

    const label = screen.getByText('Email');
    expect(label).toHaveAttribute('for');
    expect(label.getAttribute('for')).toMatch(/^auth-field-/);
  });

  it('should apply custom className', () => {
    const { container } = render(
      <AuthFormField label="Email" className="custom-class">
        <input type="email" />
      </AuthFormField>,
    );

    const fieldContainer = container.querySelector('.custom-class');
    expect(fieldContainer).toBeInTheDocument();
  });

  it('should associate error message with field', () => {
    render(
      <AuthFormField label="Email" error="Email is required">
        <input type="email" />
      </AuthFormField>,
    );

    const errorMessage = screen.getByText('Email is required');
    const errorId = errorMessage.getAttribute('id');
    expect(errorId).toMatch(/-error$/);
  });
});