import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { describe, it, expect, vi } from 'vitest';
import { Button } from '@/Components/ui/button';

describe('Button', () => {
    it('renders children', () => {
        render(<Button>Click Me</Button>);
        expect(screen.getByText('Click Me')).toBeInTheDocument();
    });

    it('has data-slot="button"', () => {
        render(<Button>Test</Button>);
        expect(screen.getByRole('button', { name: 'Test' })).toHaveAttribute('data-slot', 'button');
    });

    it('default variant includes bg-primary', () => {
        render(<Button>Default</Button>);
        expect(screen.getByRole('button').className).toContain('bg-primary');
    });

    it('destructive variant includes bg-destructive', () => {
        render(<Button variant="destructive">Destructive</Button>);
        expect(screen.getByRole('button').className).toContain('bg-destructive');
    });

    it('outline variant includes border-input', () => {
        render(<Button variant="outline">Outline</Button>);
        expect(screen.getByRole('button').className).toContain('border-input');
    });

    it('ghost variant includes hover:bg-accent', () => {
        render(<Button variant="ghost">Ghost</Button>);
        expect(screen.getByRole('button').className).toContain('hover:bg-accent');
    });

    it('link variant includes underline-offset-4', () => {
        render(<Button variant="link">Link</Button>);
        expect(screen.getByRole('button').className).toContain('underline-offset-4');
    });

    it('sm size includes h-8', () => {
        render(<Button size="sm">Small</Button>);
        expect(screen.getByRole('button').className).toContain('h-8');
    });

    it('lg size includes h-11', () => {
        render(<Button size="lg">Large</Button>);
        expect(screen.getByRole('button').className).toContain('h-11');
    });

    it('xl size includes h-12', () => {
        render(<Button size="xl">XL</Button>);
        expect(screen.getByRole('button').className).toContain('h-12');
    });

    it('asChild renders as child element', () => {
        render(
            <Button asChild>
                <a href="/x">Link Button</a>
            </Button>,
        );
        const link = screen.getByRole('link', { name: 'Link Button' });
        expect(link.tagName).toBe('A');
        expect(link).toHaveAttribute('data-slot', 'button');
        expect(link).toHaveAttribute('href', '/x');
    });

    it('disabled button does not fire onClick', async () => {
        const onClick = vi.fn();
        render(<Button disabled onClick={onClick}>Disabled</Button>);
        await userEvent.click(screen.getByRole('button'));
        expect(onClick).not.toHaveBeenCalled();
    });

    it('merges custom className', () => {
        render(<Button className="extra-class">Custom</Button>);
        expect(screen.getByRole('button').className).toContain('extra-class');
    });
});