import { render } from '@testing-library/react';
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';

import type { components } from '@/lib/gen';

import MarketplaceChatMessage from './MarketplaceChatMessage';

type Message = components['schemas']['MessageResponse'];

describe('MarketplaceChatMessage', () => {
  // Mock toLocaleTimeString to return consistent values across timezones
  const originalToLocaleTimeString = Date.prototype.toLocaleTimeString;

  beforeEach(() => {
    Date.prototype.toLocaleTimeString = function () {
      return '12:00:00 PM';
    };
  });

  afterEach(() => {
    Date.prototype.toLocaleTimeString = originalToLocaleTimeString;
  });

  const baseMessage: Message = {
    id: 'msg-123',
    content: 'This is a test message',
    created_at: '2024-01-01T12:00:00Z',
    sender_id: 123,
    sender_handle: 'testuser',
    sender_display_name: 'Test User',
    sender_role: 'creator',
    project_id: 'project-123',
    media_references: [],
  };

  const uniqueTimeRanges = [
    {
      start: 0,
      end: 10,
      firstMessageId: 'msg-1',
      firstCreatedAt: '2024-01-01T12:00:00Z',
    },
    {
      start: 10,
      end: 20,
      firstMessageId: 'msg-2',
      firstCreatedAt: '2024-01-01T12:01:00Z',
    },
  ];

  it('renders creator message', () => {
    const { asFragment } = render(
      <MarketplaceChatMessage
        message={baseMessage}
        uniqueTimeRanges={uniqueTimeRanges}
        _isCurrentUser={false}
      />
    );
    expect(asFragment()).toMatchSnapshot();
  });

  it('renders fulfiller message', () => {
    const { asFragment } = render(
      <MarketplaceChatMessage
        message={{ ...baseMessage, sender_role: 'fulfiller' }}
        uniqueTimeRanges={uniqueTimeRanges}
        _isCurrentUser={false}
      />
    );
    expect(asFragment()).toMatchSnapshot();
  });

  it('renders with avatar', () => {
    const { asFragment } = render(
      <MarketplaceChatMessage
        message={{
          ...baseMessage,
          sender_avatar_url: 'https://example.com/avatar.jpg',
        }}
        uniqueTimeRanges={uniqueTimeRanges}
        _isCurrentUser={false}
      />
    );
    expect(asFragment()).toMatchSnapshot();
  });

  it('renders with media title and color', () => {
    const { asFragment } = render(
      <MarketplaceChatMessage
        message={baseMessage}
        uniqueTimeRanges={uniqueTimeRanges}
        _isCurrentUser={false}
        mediaId='media-123'
        mediaTitle='Test Track'
        mediaColor='#ff0000'
      />
    );
    expect(asFragment()).toMatchSnapshot();
  });

  it('renders with time range', () => {
    const { asFragment } = render(
      <MarketplaceChatMessage
        message={{
          ...baseMessage,
          time_range: { start: 5, end: 15 },
        }}
        uniqueTimeRanges={uniqueTimeRanges}
        _isCurrentUser={false}
        mediaId='media-123'
      />
    );
    expect(asFragment()).toMatchSnapshot();
  });

  it('renders with delete button for current user', () => {
    const handleDelete = vi.fn();
    const { asFragment } = render(
      <MarketplaceChatMessage
        message={baseMessage}
        uniqueTimeRanges={uniqueTimeRanges}
        _isCurrentUser={true}
        onDelete={handleDelete}
      />
    );
    expect(asFragment()).toMatchSnapshot();
  });

  it('renders with all callbacks', () => {
    const handleDelete = vi.fn();
    const handleUserClick = vi.fn();
    const handleTimeRangeClick = vi.fn();
    const handleMediaClick = vi.fn();

    const { asFragment } = render(
      <MarketplaceChatMessage
        message={{
          ...baseMessage,
          time_range: { start: 5, end: 15 },
        }}
        uniqueTimeRanges={uniqueTimeRanges}
        _isCurrentUser={true}
        mediaId='media-123'
        mediaTitle='Test Track'
        mediaColor='#ff0000'
        onDelete={handleDelete}
        onUserClick={handleUserClick}
        onTimeRangeClick={handleTimeRangeClick}
        onMediaClick={handleMediaClick}
      />
    );
    expect(asFragment()).toMatchSnapshot();
  });

  it('renders without display name', () => {
    const { asFragment } = render(
      <MarketplaceChatMessage
        message={{
          ...baseMessage,
          sender_display_name: undefined,
        }}
        uniqueTimeRanges={uniqueTimeRanges}
        _isCurrentUser={false}
      />
    );
    expect(asFragment()).toMatchSnapshot();
  });
});