import React from 'react';
import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import { Input } from '@/components/ui/Input';

describe('Input', () => {
  it('renders with label', () => {
    render(<Input label="Name" />);
    expect(screen.getByText('Name')).toBeInTheDocument();
  });

  it('renders error message with role=alert', () => {
    render(<Input label="Email" error="Ungültige E-Mail" />);
    expect(screen.getByRole('alert')).toHaveTextContent('Ungültige E-Mail');
  });

  it('renders helper text', () => {
    render(<Input label="Passwort" helperText="Mindestens 8 Zeichen" />);
    expect(screen.getByText('Mindestens 8 Zeichen')).toBeInTheDocument();
  });

  it('does not render helper text when error is present', () => {
    render(<Input label="Passwort" error="Fehler" helperText="Hilfetext" />);
    expect(screen.queryByText('Hilfetext')).not.toBeInTheDocument();
  });

  it('marks input as required with aria-required', () => {
    render(<Input label="Name" required />);
    expect(screen.getByLabelText(/Name/)).toHaveAttribute('aria-required', 'true');
  });

  it('sets aria-invalid when error present', () => {
    render(<Input label="Email" error="Fehler" />);
    expect(screen.getByLabelText(/Email/)).toHaveAttribute('aria-invalid', 'true');
  });

  it('has min-h-touch for 44px target', () => {
    render(<Input label="Test" />);
    expect(screen.getByLabelText(/Test/).className).toContain('min-h-touch');
  });

  it('links error via aria-describedby', () => {
    render(<Input label="Email" error="Fehler" />);
    const input = screen.getByLabelText(/Email/);
    const errorId = input.getAttribute('aria-describedby');
    expect(errorId).toBeTruthy();
    expect(document.getElementById(errorId!)).toHaveTextContent('Fehler');
  });
});
