import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';

// ═══════════════════════════════════════════════════════════════════════════════
// UI COMPONENT TESTS — Card
// ═══════════════════════════════════════════════════════════════════════════════

describe('Card', () => {
  it('should render with children', () => {
    render(<Card data-testid="card">Hello World</Card>);
    expect(screen.getByTestId('card')).toHaveTextContent('Hello World');
  });

  it('should accept custom className', () => {
    render(<Card data-testid="card" className="custom-class">Test</Card>);
    expect(screen.getByTestId('card')).toHaveClass('custom-class');
  });

  it('should have data-slot attribute', () => {
    render(<Card data-testid="card">Test</Card>);
    expect(screen.getByTestId('card')).toHaveAttribute('data-slot', 'card');
  });

  it('should render CardHeader with children', () => {
    render(
      <Card>
        <CardHeader data-testid="header">Header Text</CardHeader>
      </Card>,
    );
    expect(screen.getByTestId('header')).toHaveTextContent('Header Text');
  });

  it('should render CardTitle', () => {
    render(
      <Card>
        <CardHeader>
          <CardTitle data-testid="title">My Title</CardTitle>
        </CardHeader>
      </Card>,
    );
    expect(screen.getByTestId('title')).toHaveTextContent('My Title');
  });

  it('should render CardDescription', () => {
    render(
      <Card>
        <CardHeader>
          <CardDescription data-testid="desc">Description text</CardDescription>
        </CardHeader>
      </Card>,
    );
    expect(screen.getByTestId('desc')).toHaveTextContent('Description text');
  });

  it('should render CardContent', () => {
    render(
      <Card>
        <CardContent data-testid="content">Content here</CardContent>
      </Card>,
    );
    expect(screen.getByTestId('content')).toHaveTextContent('Content here');
  });

  it('should render CardFooter', () => {
    render(
      <Card>
        <CardFooter data-testid="footer">Footer text</CardFooter>
      </Card>,
    );
    expect(screen.getByTestId('footer')).toHaveTextContent('Footer text');
  });
});

// ═══════════════════════════════════════════════════════════════════════════════
// UI COMPONENT TESTS — Button
// ═══════════════════════════════════════════════════════════════════════════════

describe('Button', () => {
  it('should render with children text', () => {
    render(<Button data-testid="btn">Click Me</Button>);
    expect(screen.getByTestId('btn')).toHaveTextContent('Click Me');
  });

  it('should have button role', () => {
    render(<Button data-testid="btn">Test</Button>);
    expect(screen.getByTestId('btn').tagName).toBe('BUTTON');
  });

  it('should apply variant classes', () => {
    render(<Button data-testid="btn" variant="destructive">Delete</Button>);
    expect(screen.getByTestId('btn')).toHaveClass('bg-destructive');
  });

  it('should apply size classes', () => {
    render(<Button data-testid="btn" size="sm">Small</Button>);
    expect(screen.getByTestId('btn')).toHaveClass('h-8');
  });

  it('should apply custom className', () => {
    render(<Button data-testid="btn" className="custom">Custom</Button>);
    expect(screen.getByTestId('btn')).toHaveClass('custom');
  });

  it('should render as child component when asChild is true', () => {
    render(
      <Button asChild data-testid="btn">
        <a href="/test">Link Button</a>
      </Button>,
    );
    const el = screen.getByTestId('btn');
    expect(el.tagName).toBe('A');
    expect(el).toHaveAttribute('href', '/test');
  });

  it('should have data-slot attribute', () => {
    render(<Button data-testid="btn">Test</Button>);
    expect(screen.getByTestId('btn')).toHaveAttribute('data-slot', 'button');
  });
});

// ═══════════════════════════════════════════════════════════════════════════════
// UI COMPONENT TESTS — Badge
// ═══════════════════════════════════════════════════════════════════════════════

describe('Badge', () => {
  it('should render with children text', () => {
    render(<Badge data-testid="badge">New</Badge>);
    expect(screen.getByTestId('badge')).toHaveTextContent('New');
  });

  it('should render as span by default', () => {
    render(<Badge data-testid="badge">Test</Badge>);
    expect(screen.getByTestId('badge').tagName).toBe('SPAN');
  });

  it('should apply default variant classes', () => {
    render(<Badge data-testid="badge">Default</Badge>);
    expect(screen.getByTestId('badge')).toHaveClass('bg-primary');
  });

  it('should apply destructive variant', () => {
    render(<Badge data-testid="badge" variant="destructive">Error</Badge>);
    expect(screen.getByTestId('badge')).toHaveClass('bg-destructive');
  });

  it('should apply outline variant', () => {
    render(<Badge data-testid="badge" variant="outline">Outline</Badge>);
    expect(screen.getByTestId('badge')).toHaveClass('text-foreground');
  });

  it('should apply secondary variant', () => {
    render(<Badge data-testid="badge" variant="secondary">Secondary</Badge>);
    expect(screen.getByTestId('badge')).toHaveClass('bg-secondary');
  });

  it('should apply custom className', () => {
    render(<Badge data-testid="badge" className="custom-badge">Custom</Badge>);
    expect(screen.getByTestId('badge')).toHaveClass('custom-badge');
  });

  it('should accept asChild prop', () => {
    render(
      <Badge asChild data-testid="badge">
        <a href="/link">Link Badge</a>
      </Badge>,
    );
    const el = screen.getByTestId('badge');
    expect(el.tagName).toBe('A');
  });

  it('should have data-slot attribute', () => {
    render(<Badge data-testid="badge">Test</Badge>);
    expect(screen.getByTestId('badge')).toHaveAttribute('data-slot', 'badge');
  });
});
