import React from 'react';
import { render, screen } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import { ThemeProvider } from 'styled-components';
import ConversationDetailCard from './ConversationDetailCard';

const darkTheme = {
  main: '#336699',
  focus: '#224466',
  darkMode: true,
  colors: {
    text: '#ffffff',
    cardBackground: 'rgba(0,0,0,0.3)',
    cardBorder: 'rgba(255,255,255,0.1)',
  },
};

const lightTheme = {
  main: '#336699',
  focus: '#224466',
  darkMode: false,
  colors: {
    text: '#111111',
    cardBackground: 'rgba(255,255,255,0.8)',
    cardBorder: 'rgba(0,0,0,0.1)',
  },
};

const renderCard = (
  props: {
    message: string;
    user_created: boolean;
  },
  theme: typeof darkTheme = darkTheme
) =>
  render(
    <MemoryRouter>
      <ThemeProvider theme={theme as never}>
        <ConversationDetailCard {...props} />
      </ThemeProvider>
    </MemoryRouter>
  );

describe('ConversationDetailCard', () => {
  it('renders assistant message without token meta', () => {
    renderCard({
      message: 'Hello from the model',
      user_created: false,
    });
    expect(screen.getByText('Hello from the model')).toBeInTheDocument();
    expect(screen.queryByTestId('message-token-usage')).not.toBeInTheDocument();
    expect(screen.queryByText(/Tokens in/i)).not.toBeInTheDocument();
  });

  it('renders user message without token meta', () => {
    renderCard({
      message: 'Hi',
      user_created: true,
    });
    expect(screen.getByText('Hi')).toBeInTheDocument();
    expect(screen.queryByTestId('message-token-usage')).not.toBeInTheDocument();
  });

  it('shows a friendly upgrade bubble for RAG feature_not_allowed errors (#85)', () => {
    renderCard({
      message: JSON.stringify({
        type: 'error',
        code: 'feature_not_allowed',
        content: 'Your plan does not include rag document search.',
        details: { feature: 'rag' },
      }),
      user_created: false,
    });

    expect(
      screen.getByText('Your plan does not include rag document search.')
    ).toBeInTheDocument();
    const upgradeLink = screen.getByRole('link', { name: /upgrade your plan/i });
    expect(upgradeLink).toBeInTheDocument();
    expect(upgradeLink).toHaveAttribute('href', '/account/');
  });

  it('renders unrelated feature_not_allowed errors as a normal inline error, not the upgrade bubble', () => {
    renderCard({
      message: JSON.stringify({
        type: 'error',
        code: 'feature_not_allowed',
        content: 'Your plan does not include image generation.',
        details: { feature: 'image_generation' },
      }),
      user_created: false,
    });

    expect(screen.queryByRole('link', { name: /upgrade your plan/i })).not.toBeInTheDocument();
    expect(screen.getByText(/image generation/i)).toBeInTheDocument();
  });

  it('uses theme text color for agent bubble in light mode (#88)', () => {
    renderCard(
      { message: 'Light mode reply', user_created: false },
      lightTheme
    );
    const message = screen.getByText('Light mode reply');
    const agentBubble = message.closest('div');
    expect(agentBubble).not.toBeNull();
    expect(getComputedStyle(agentBubble!).color).toBe('rgb(17, 17, 17)');
  });

  it('keeps light agent text in dark mode (#88)', () => {
    renderCard(
      { message: 'Dark mode reply', user_created: false },
      darkTheme
    );
    const message = screen.getByText('Dark mode reply');
    const agentBubble = message.closest('div');
    expect(agentBubble).not.toBeNull();
    expect(getComputedStyle(agentBubble!).color).toBe('rgb(255, 255, 255)');
  });

  it('renders activity label instead of dots when stage is set (#96)', () => {
    render(
      <MemoryRouter>
        <ThemeProvider theme={darkTheme as never}>
          <ConversationDetailCard
            message=""
            user_created={false}
            activityStage="searching"
            activityLabel="Searching the web"
            activityDetail="Taylor Swift wedding"
          />
        </ThemeProvider>
      </MemoryRouter>,
    );
    expect(screen.getByText('Searching the web')).toBeInTheDocument();
    expect(screen.getByText('Taylor Swift wedding')).toBeInTheDocument();
    expect(screen.queryByTestId('activity-dots-fallback')).not.toBeInTheDocument();
  });

  it('falls back to dots when empty message has no activity stage (#96)', () => {
    render(
      <MemoryRouter>
        <ThemeProvider theme={darkTheme as never}>
          <ConversationDetailCard message="" user_created={false} />
        </ThemeProvider>
      </MemoryRouter>,
    );
    expect(screen.getByTestId('activity-dots-fallback')).toBeInTheDocument();
  });
});
