import { render, screen, within } from '@testing-library/react';
import { describe, expect, it, vi } from 'vitest';
import { ProjectSessionTree } from '@/components/opencode/ProjectSessionTree';

describe('ProjectSessionTree visual style', () => {
  it('uses the NiTu plaza surface treatment for an active project and its sessions', () => {
    render(
      <ProjectSessionTree
        projects={[
          {
            id: 'project-1',
            name: 'go-thailand',
            path: 'D:/datas/othersprojects/go-thailand',
            createdAt: '2026-07-01T00:00:00.000Z',
            updatedAt: '2026-07-01T00:00:00.000Z',
            lastOpenedAt: '2026-07-02T00:00:00.000Z',
          },
        ]}
        activeProject={{
          id: 'project-1',
          name: 'go-thailand',
          path: 'D:/datas/othersprojects/go-thailand',
          createdAt: '2026-07-01T00:00:00.000Z',
          updatedAt: '2026-07-01T00:00:00.000Z',
          lastOpenedAt: '2026-07-02T00:00:00.000Z',
        }}
        sessions={[{ id: 'session-1', title: '构建文件清单', updatedAt: '2026-07-02T01:00:00.000Z' }]}
        selectedSessionId="session-1"
        sessionStatuses={{ 'session-1': { type: 'busy' } }}
        runtimeState="running"
        loading={false}
        onSelectProject={vi.fn()}
        onCreateSession={vi.fn()}
        onSelectSession={vi.fn()}
      />,
    );

    const projectNode = screen.getByTestId('opencode-project-node-project-1');
    expect(projectNode).toHaveClass('border-[#26384D]', 'bg-[#DCE6EF]', 'shadow-[4px_4px_0_#26384D]');

    const sessionNode = within(projectNode).getByTestId('opencode-session-node-session-1');
    expect(sessionNode).toHaveClass('border-[#26384D]', 'bg-[#EEF3F7]');
  });
});