import { describe, it, expect, beforeEach, jest } from '@jest/globals';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import { Badge } from './badge';

describe('Badge', () => {
  beforeEach(() => {
    jest.clearAllMocks();
  });

  describe('Rendering', () => {
    it('should render badge with text', () => {
      render(<Badge>Test Badge</Badge>);
      expect(screen.getByText('Test Badge')).toBeInTheDocument();
    });

    it('should render as span by default', () => {
      const { container } = render(<Badge>Badge</Badge>);
      const badge = container.querySelector('span');
      expect(badge).toBeInTheDocument();
    });

    it('should have data-slot attribute', () => {
      const { container } = render(<Badge>Badge</Badge>);
      const badge = container.querySelector('[data-slot="badge"]');
      expect(badge).toBeInTheDocument();
    });
  });

  describe('Variants', () => {
    it('should render default variant', () => {
      const { container } = render(<Badge>Default</Badge>);
      const badge = container.querySelector('[data-variant="default"]');
      expect(badge).toBeInTheDocument();
    });

    it('should render secondary variant', () => {
      const { container } = render(<Badge variant="secondary">Secondary</Badge>);
      const badge = container.querySelector('[data-variant="secondary"]');
      expect(badge).toBeInTheDocument();
    });

    it('should render error variant', () => {
      const { container } = render(<Badge variant="error">Error</Badge>);
      const badge = container.querySelector('[data-variant="error"]');
      expect(badge).toBeInTheDocument();
    });

    it('should render outline variant', () => {
      const { container } = render(<Badge variant="outline">Outline</Badge>);
      const badge = container.querySelector('[data-variant="outline"]');
      expect(badge).toBeInTheDocument();
    });

    it('should render ghost variant', () => {
      const { container } = render(<Badge variant="ghost">Ghost</Badge>);
      const badge = container.querySelector('[data-variant="ghost"]');
      expect(badge).toBeInTheDocument();
    });

    it('should render success variant', () => {
      const { container } = render(<Badge variant="success">Success</Badge>);
      const badge = container.querySelector('[data-variant="success"]');
      expect(badge).toBeInTheDocument();
    });

    it('should render warning variant', () => {
      const { container } = render(<Badge variant="warning">Warning</Badge>);
      const badge = container.querySelector('[data-variant="warning"]');
      expect(badge).toBeInTheDocument();
    });

    it('should render info variant', () => {
      const { container } = render(<Badge variant="info">Info</Badge>);
      const badge = container.querySelector('[data-variant="info"]');
      expect(badge).toBeInTheDocument();
    });
  });

  describe('Styling', () => {
    it('should apply custom className', () => {
      const { container } = render(<Badge className="custom-class">Badge</Badge>);
      const badge = container.querySelector('.custom-class');
      expect(badge).toBeInTheDocument();
    });

    it('should have rounded-full class', () => {
      const { container } = render(<Badge>Badge</Badge>);
      // Badge 使用 rounded-sm（shadcn/ui 规范）
      const badge = container.querySelector('.rounded-sm');
      expect(badge).toBeInTheDocument();
    });

    it('should have inline-flex class', () => {
      const { container } = render(<Badge>Badge</Badge>);
      const badge = container.querySelector('.inline-flex');
      expect(badge).toBeInTheDocument();
    });
  });

  describe('AsChild', () => {
    it('should render as child component when asChild is true', () => {
      const { container } = render(
        <Badge asChild>
          <button>Button Badge</button>
        </Badge>
      );
      const button = container.querySelector('button');
      expect(button).toBeInTheDocument();
      expect(button).toHaveTextContent('Button Badge');
    });
  });
});