import { fireEvent, render, screen } from '@testing-library/react';
import { describe, expect, it, vi } from 'vitest';
import { Chat } from '@/pages/Chat';
import { TemplateProjectMenu } from '@/pages/Home/TemplateProjectMenu';

vi.mock('@/pages/Chat/OpencodeChatPanel', () => ({
  OpencodeChatPanel: () => <div data-testid="mock-chat-panel" className="flex-1" />,
}));

describe('Home template menu', () => {
  it('renders template project choices', () => {
    render(<TemplateProjectMenu />);

    expect(screen.getByTestId('home-template-project-menu')).toBeInTheDocument();
    expect(screen.getByRole('button', { name: 'Agent App' })).toBeInTheDocument();
    expect(screen.getByRole('button', { name: 'Web App' })).toBeInTheDocument();
    expect(screen.getByRole('button', { name: 'Desktop App' })).toBeInTheDocument();
    expect(screen.getByRole('button', { name: 'CLI Tool' })).toBeInTheDocument();
    expect(screen.queryByTestId('mock-chat-panel')).not.toBeInTheDocument();
  });

  it('keeps the selected template item local to the home menu', () => {
    render(<TemplateProjectMenu />);

    const agentTemplate = screen.getByRole('button', { name: 'Agent App' });
    const cliTemplate = screen.getByRole('button', { name: 'CLI Tool' });

    expect(agentTemplate).toHaveAttribute('aria-pressed', 'true');
    expect(cliTemplate).toHaveAttribute('aria-pressed', 'false');

    fireEvent.click(cliTemplate);

    expect(agentTemplate).toHaveAttribute('aria-pressed', 'false');
    expect(cliTemplate).toHaveAttribute('aria-pressed', 'true');
  });

  it('keeps the chat operation page separate from the home menu', () => {
    render(<Chat />);

    expect(screen.queryByTestId('home-template-project-menu')).not.toBeInTheDocument();
    expect(screen.getByTestId('mock-chat-panel')).toBeInTheDocument();
  });

  it('lets the chat operation page fill the padded main content to the bottom edge', () => {
    render(<Chat />);

    const chatPage = screen.getByTestId('chat-operation-page');
    expect(chatPage).toHaveClass('-m-6');
    expect(chatPage).toHaveClass('h-[calc(100%_+_3rem)]');
  });
});