// @vitest-environment jsdom
/**
 * The movement group header in the conversation shows the movement's execution
 * time (e.g. "1m 30s"). Users also want to see WHEN the movement finished, so
 * the header renders the completion date/time next to the duration.
 */
import '../../test/dom-setup';
import { describe, it, expect } from 'vitest';
import { render } from '@testing-library/react';
import { MovementGroupExpanded, type ChatItem } from './MovementGroup';
import type { LocalTaskComment } from '../../api';

function completionComment(createdAt: string): LocalTaskComment {
  return {
    id: 1,
    taskId: 1,
    author: 'agent',
    kind: 'progress',
    body: JSON.stringify({ movement: 'execute', tools: { Read: 2 }, durationMs: 90000 }),
    createdAt,
    injectedAt: null,
  };
}

function movementItem(createdAt: string): ChatItem & { type: 'movement' } {
  const c = completionComment(createdAt);
  return {
    type: 'movement',
    movementName: 'execute',
    summary: { movement: 'execute', tools: { Read: 2 }, durationMs: 90000 },
    inner: [],
    completionComment: c,
  };
}

describe('MovementGroupExpanded header', () => {
  it('shows the movement completion date/time alongside the duration', () => {
    const iso = '2026-07-06T01:23:45.000Z';
    const { container } = render(
      <MovementGroupExpanded
        item={movementItem(iso)}
        taskId={1}
        isLast={false}
        isRunning={false}
        animatingIdx={-1}
        startIdx={0}
      />,
    );
    // Duration still present.
    expect(container.textContent).toContain('1m 30s');
    // The completion timestamp, formatted for the local locale, is shown too.
    const expected = new Date(iso).toLocaleString();
    expect(container.textContent).toContain(expected);
  });
});
