import { fireEvent, render, screen } from '@testing-library/react';
import { describe, expect, it, vi } from 'vitest';
import { ExecutionGraphCard } from '@/pages/Chat/ExecutionGraphCard';
import { getToolVisibilityId } from '@/pages/Chat/chat-transcript';
import type { TaskStep } from '@/pages/Chat/task-visualization';

vi.mock('react-i18next', async (importOriginal) => {
  const actual = await importOriginal<typeof import('react-i18next')>();
  return {
    ...actual,
    useTranslation: () => ({
      t: (key: string) => key,
    }),
  };
});

describe('ExecutionGraphCard', () => {
  it('drives the real graph step detail from the shared visibility set', () => {
    const visibilityId = getToolVisibilityId('msg_assistant', 'tool-read', 0);
    const onStepExpandedChange = vi.fn();
    const step: TaskStep = {
      id: 'tool-read',
      visibilityId,
      label: 'read',
      status: 'completed',
      kind: 'tool',
      detail: '{"file":"README.md"}',
      depth: 1,
    };
    const { rerender } = render(
      <ExecutionGraphCard
        agentLabel="Makelore"
        steps={[step]}
        active={false}
        expanded
        expandedStepIds={new Set()}
        onStepExpandedChange={onStepExpandedChange}
      />,
    );

    expect(screen.queryByText(/README\.md/)).not.toBeInTheDocument();
    fireEvent.click(screen.getByRole('button', { name: /read/i }));
    expect(onStepExpandedChange).toHaveBeenCalledWith(visibilityId, true);

    rerender(
      <ExecutionGraphCard
        agentLabel="Makelore"
        steps={[step]}
        active={false}
        expanded
        expandedStepIds={new Set([visibilityId])}
        onStepExpandedChange={onStepExpandedChange}
      />,
    );
    expect(screen.getByText(/"file": "README\.md"/)).toBeInTheDocument();
  });

  it('notifies the parent when an uncontrolled active graph auto-collapses', () => {
    const onExpandedChange = vi.fn();
    const step: TaskStep = {
      id: 'tool-read',
      label: 'read',
      status: 'running',
      kind: 'tool',
      detail: '{"file":"README.md"}',
      depth: 1,
    };
    const { rerender } = render(
      <ExecutionGraphCard
        agentLabel="娉ュ湡"
        steps={[step]}
        active
        onExpandedChange={onExpandedChange}
      />,
    );
    expect(screen.getByTestId('chat-execution-graph')).toHaveAttribute(
      'data-collapsed',
      'false',
    );

    rerender(
      <ExecutionGraphCard
        agentLabel="娉ュ湡"
        steps={[{ ...step, status: 'completed' }]}
        active={false}
        onExpandedChange={onExpandedChange}
      />,
    );

    expect(screen.getByTestId('chat-execution-graph')).toHaveAttribute(
      'data-collapsed',
      'true',
    );
    expect(onExpandedChange).toHaveBeenCalledWith(false);
  });

  it('notifies the parent when a completed uncontrolled graph mounts collapsed', () => {
    const onExpandedChange = vi.fn();
    render(
      <ExecutionGraphCard
        agentLabel="娉ュ湡"
        steps={[{
          id: 'tool-read',
          label: 'read',
          status: 'completed',
          kind: 'tool',
          detail: '{"file":"README.md"}',
          depth: 1,
        }]}
        active={false}
        onExpandedChange={onExpandedChange}
      />,
    );

    expect(onExpandedChange).toHaveBeenCalledWith(false);
  });
});