import { describe, it, expect, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

// Mock scrollIntoView
Element.prototype.scrollIntoView = vi.fn();

// Mock history store
vi.mock('@/lib/store/history-store', () => ({
  useHistoryStore: (selector?: Function) => {
    const state = {
      drafts: [],
      loading: false,
      hasMore: true,
      error: null,
      selectedDraft: null,
      loadMore: vi.fn(),
      refreshHistory: vi.fn(),
      selectDraft: vi.fn(),
      closeDetail: vi.fn(),
      clearError: vi.fn()
    };
    return selector ? selector(state) : state;
  },
}));

// Mock chat store for copyDraftToClipboard
vi.mock('@/lib/store/chat-store', () => ({
  useChatStore: (selector?: Function) => {
    const state = {
      messages: [],
      isLoading: false,
      isTyping: false,
      currentDraft: null,
      showDraftView: false,
      copyDraftToClipboard: vi.fn(),
      hydrate: vi.fn(),
    };
    return selector ? selector(state) : state;
  },
}));

// Mock Journal components
vi.mock('@/components/features/journal', () => ({
  HistoryFeed: () => <div data-testid="history-feed">History Feed Mock</div>,
  HistoryDetailSheet: () => <div data-testid="history-detail-sheet">Detail Sheet Mock</div>,
}));

import Home from './page';

describe('Home Page', () => {
  it('renders page with My Journal header', () => {
    render(<Home />);
    expect(screen.getByText('My Journal')).toBeInTheDocument();
  });

  it('renders HistoryFeed component', () => {
    render(<Home />);
    expect(screen.getByTestId('history-feed')).toBeInTheDocument();
  });

  it('renders HistoryDetailSheet component', () => {
    render(<Home />);
    expect(screen.getByTestId('history-detail-sheet')).toBeInTheDocument();
  });

  it('renders FAB (Floating Action Button) for new vent', () => {
    render(<Home />);
    const fab = screen.getByRole('link', { name: /start new vent/i });
    expect(fab).toBeInTheDocument();
    expect(fab).toHaveAttribute('href', '/chat');
  });

  it('has correct page structure', () => {
    const { container } = render(<Home />);

    // Check for main containers
    expect(container.querySelector('.bg-slate-50')).toBeInTheDocument();
    expect(container.querySelector('header')).toBeInTheDocument();
    expect(container.querySelector('main')).toBeInTheDocument();
  });
});
