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

// Mock dependencies
vi.mock('react-i18next', () => ({
  useTranslation: () => ({ t: (key: string, val: string) => val || key }),
}));

// Mock Lucide icons
vi.mock('lucide-react', () => ({
  Clock: () => <span data-testid="icon-clock" />,
  Users: () => <span data-testid="icon-users" />,
  MoreVertical: () => <span data-testid="icon-more" />,
  Pencil: () => <span data-testid="icon-pencil" />,
  Trash2: () => <span data-testid="icon-trash" />,
  GripVertical: () => <span data-testid="icon-grip" />,
  DollarSign: () => <span data-testid="icon-dollar" />,
  AlertCircle: () => <span data-testid="icon-alert" />,
}));

const mockService: Service = {
  id: '1',
  name: 'Test Service',
  description: 'Test Description',
  durationMinutes: 60,
  price: 50,
  variable_pricing: false,
  all_resources: true,
  resource_ids: [],
  category: { id: 'cat1', name: 'Category 1' }
} as any; // Cast to avoid strict type checks on missing optional fields

describe('ServiceListItem', () => {
  it('renders service details correctly', () => {
    render(
      <ServiceListItem 
        service={mockService} 
        onEdit={vi.fn()} 
        onDelete={vi.fn()} 
      />
    );

    expect(screen.getByText('Test Service')).toBeInTheDocument();
    expect(screen.getByText('Test Description')).toBeInTheDocument();
    expect(screen.getByText('Category 1')).toBeInTheDocument();
    expect(screen.getByText('1h')).toBeInTheDocument(); // 60 mins
    expect(screen.getByText('$50.00')).toBeInTheDocument();
  });

  it('renders variable pricing correctly', () => {
    const variableService = { ...mockService, variable_pricing: true };
    render(
      <ServiceListItem 
        service={variableService} 
        onEdit={vi.fn()} 
        onDelete={vi.fn()} 
      />
    );

    expect(screen.getByText('Variable')).toBeInTheDocument();
  });

  it('triggers action callbacks', () => {
    const onEdit = vi.fn();
    const onDelete = vi.fn();

    render(
      <ServiceListItem 
        service={mockService} 
        onEdit={onEdit} 
        onDelete={onDelete} 
      />
    );

    fireEvent.click(screen.getByTitle('Edit'));
    expect(onEdit).toHaveBeenCalledWith(mockService);

    fireEvent.click(screen.getByTitle('Delete'));
    expect(onDelete).toHaveBeenCalledWith(mockService);
  });
});
