import { render, screen, fireEvent } from '@testing-library/react';
import { describe, it, expect, vi } from 'vitest';
import { Alert } from './alert';

describe('Alert Component', () => {
  it('renders alert with default variant', () => {
    render(<Alert>Default alert message</Alert>);

    const alert = screen.getByRole('alert');
    expect(alert).toBeInTheDocument();
    expect(alert).toHaveTextContent('Default alert message');
    expect(alert).toHaveClass('bg-kodo-steel/10');
  });

  it('renders with title', () => {
    render(<Alert title="Alert Title">Alert message</Alert>);

    expect(screen.getByText('Alert Title')).toBeInTheDocument();
    expect(screen.getByText('Alert message')).toBeInTheDocument();
  });

  it('renders info variant', () => {
    render(<Alert variant="info">Info message</Alert>);

    const alert = screen.getByRole('alert');
    expect(alert).toHaveClass('bg-kodo-steel/10');
    expect(alert).toHaveClass('text-kodo-steel');
  });

  it('renders success variant', () => {
    render(<Alert variant="success">Success message</Alert>);

    const alert = screen.getByRole('alert');
    expect(alert).toHaveClass('bg-kodo-lime/10');
    expect(alert).toHaveClass('text-kodo-lime');
  });

  it('renders warning variant', () => {
    render(<Alert variant="warning">Warning message</Alert>);

    const alert = screen.getByRole('alert');
    expect(alert).toHaveClass('bg-kodo-gold/10');
    expect(alert).toHaveClass('text-kodo-gold');
  });

  it('renders error variant', () => {
    render(<Alert variant="error">Error message</Alert>);

    const alert = screen.getByRole('alert');
    expect(alert).toHaveClass('bg-kodo-red/10');
    expect(alert).toHaveClass('text-kodo-red');
  });

  it('handles onClose callback', () => {
    const handleClose = vi.fn();
    render(<Alert onClose={handleClose}>Closable alert</Alert>);

    const closeButton = screen.getByRole('button');
    fireEvent.click(closeButton);

    expect(handleClose).toHaveBeenCalledTimes(1);
  });

  it('does not show close button when onClose is not provided', () => {
    render(<Alert>Non-closable alert</Alert>);

    const closeButton = screen.queryByRole('button');
    expect(closeButton).not.toBeInTheDocument();
  });

  it('maps destructive variant to error', () => {
    render(<Alert variant="destructive">Destructive message</Alert>);

    const alert = screen.getByRole('alert');
    expect(alert).toHaveClass('bg-kodo-red/10');
  });

  it('applies custom className', () => {
    render(<Alert className="custom-alert">Custom alert</Alert>);

    const alert = screen.getByRole('alert');
    expect(alert).toHaveClass('custom-alert');
  });
});