import React from 'react';
import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import { Pagination, PaginationContent, PaginationItem, PaginationPrevious, PaginationNext } from '@/components/ui/pagination';
import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink } from '@/components/ui/breadcrumb';
import { Spinner } from '@/components/ui/Spinner';
import { Button } from '@/components/ui/button';

describe('UI Components Localization and Accessibility', () => {
  describe('Pagination', () => {
    it('has German aria-label for nav', () => {
      render(
        <Pagination>
          <PaginationContent>
            <PaginationItem>
              <PaginationPrevious href="#" />
            </PaginationItem>
            <PaginationItem>
              <PaginationNext href="#" />
            </PaginationItem>
          </PaginationContent>
        </Pagination>
      );

      const nav = screen.getByRole('navigation');
      expect(nav).toHaveAttribute('aria-label', 'Seitennummerierung');
    });

    it('has German labels for Previous and Next buttons', () => {
      render(
        <Pagination>
          <PaginationContent>
            <PaginationItem>
              <PaginationPrevious href="#" />
            </PaginationItem>
            <PaginationItem>
              <PaginationNext href="#" />
            </PaginationItem>
          </PaginationContent>
        </Pagination>
      );

      const prev = screen.getByLabelText('Vorherige Seite');
      expect(prev).toBeInTheDocument();
      expect(prev).toHaveTextContent('Zurück');

      const next = screen.getByLabelText('Nächste Seite');
      expect(next).toBeInTheDocument();
      expect(next).toHaveTextContent('Weiter');
    });
  });

  describe('Breadcrumb', () => {
    it('has German aria-label for nav', () => {
      render(
        <Breadcrumb>
          <BreadcrumbList>
            <BreadcrumbItem>
              <BreadcrumbLink href="/">Home</BreadcrumbLink>
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>
      );

      const nav = screen.getByRole('navigation');
      expect(nav).toHaveAttribute('aria-label', 'Navigationspfad');
    });
  });

  describe('Spinner', () => {
    it('has German aria-label', () => {
      render(<Spinner />);
      const spinner = screen.getByRole('status');
      expect(spinner).toHaveAttribute('aria-label', 'Wird geladen...');
    });
  });

  describe('Button loading state', () => {
    it('shows spinner when loading', () => {
      render(<Button loading>Click me</Button>);
      const button = screen.getByRole('button');
      expect(button).toBeDisabled();
      expect(button).toHaveAttribute('aria-busy', 'true');
      expect(screen.queryByText('Click me')).not.toBeInTheDocument();
      expect(screen.getByRole('status')).toBeInTheDocument(); // Spinner
      expect(screen.getByLabelText('Wird geladen...')).toBeInTheDocument();
    });
  });
});