import React from 'react';
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen, waitFor } from '@testing-library/react';

vi.mock('@/api/calendar', () => ({
  fetchCalendars: vi.fn().mockResolvedValue([
    { id: 'cal1', name: 'Personal', type: 'personal', color: '#3b82f6', owner_id: 'u1', shared: false, share_permissions: [] },
    { id: 'cal2', name: 'Team', type: 'team', color: '#10b981', owner_id: 'u1', shared: true, share_permissions: [] },
  ]),
  createCalendar: vi.fn().mockResolvedValue({ id: 'cal3', name: 'New', type: 'personal', color: '#000', owner_id: 'u1', shared: false, share_permissions: [] }),
  listEntries: vi.fn().mockResolvedValue([
    { id: 'e1', calendar_id: 'cal1', entry_type: 'appointment', subtype: 'normal', title: 'Team Meeting', all_day: false, priority: 'medium', status: 'open', start: '2024-07-01T10:00:00Z', end: '2024-07-01T11:00:00Z', created_by: 'u1' },
  ]),
  updateEntry: vi.fn().mockResolvedValue({}),
  deleteEntry: vi.fn().mockResolvedValue({}),
}));

vi.mock('@/components/calendar/CalendarTree', () => ({
  CalendarTree: () => <div data-testid="calendar-tree-stub">CalendarTree</div>,
}));
vi.mock('@/components/calendar/MonthView', () => ({
  MonthView: () => <div data-testid="month-view-stub">MonthView</div>,
}));
vi.mock('@/components/calendar/WeekView', () => ({
  WeekView: () => <div data-testid="week-view-stub">WeekView</div>,
}));
vi.mock('@/components/calendar/DayView', () => ({
  DayView: () => <div data-testid="day-view-stub">DayView</div>,
}));
vi.mock('@/components/calendar/RangeView', () => ({
  RangeView: () => <div data-testid="range-view-stub">RangeView</div>,
}));
vi.mock('@/components/calendar/CalendarDetail', () => ({
  CalendarDetail: () => <div data-testid="calendar-detail-stub">CalendarDetail</div>,
}));
vi.mock('@/components/calendar/AppointmentModal', () => ({
  AppointmentModal: () => <div data-testid="appointment-modal-stub">AppointmentModal</div>,
}));
vi.mock('@/components/calendar/IcsControls', () => ({
  IcsControls: () => <div data-testid="ics-controls-stub">IcsControls</div>,
}));
vi.mock('@/components/calendar/SharingSettings', () => ({
  SharingSettings: () => <div data-testid="sharing-settings-stub">SharingSettings</div>,
}));
vi.mock('@/components/ui/ResizablePanel', () => ({
  ResizablePanel: ({ children, ...props }: any) => <div data-testid={props['data-testid']}>{children}</div>,
}));
vi.mock('@/components/ui/ConfirmDialog', () => ({
  ConfirmDialog: () => null,
}));
vi.mock('@/components/ui/Toast', () => ({
  useToast: () => ({ success: vi.fn(), error: vi.fn(), info: vi.fn() }),
}));

import { CalendarPage } from '@/pages/Calendar';

describe('CalendarPage', () => {
  it('renders calendar page container', async () => {
    render(<CalendarPage />);
    expect(screen.getByTestId('calendar-page')).toBeInTheDocument();
  });

  it('renders calendar tree pane', async () => {
    render(<CalendarPage />);
    await waitFor(() => {
      expect(screen.getByTestId('calendar-tree-pane')).toBeInTheDocument();
    });
  });

  it('renders calendar view pane', async () => {
    render(<CalendarPage />);
    await waitFor(() => {
      expect(screen.getByTestId('calendar-view-pane')).toBeInTheDocument();
    });
  });

  it('renders calendar detail pane', async () => {
    render(<CalendarPage />);
    await waitFor(() => {
      expect(screen.getByTestId('calendar-detail-pane')).toBeInTheDocument();
    });
  });

  it('renders CalendarTree component', async () => {
    render(<CalendarPage />);
    // CalendarTree is rendered inside both desktop and mobile panes
    await waitFor(() => {
      expect(screen.getAllByTestId('calendar-tree-stub').length).toBeGreaterThan(0);
    });
  });

  it('renders MonthView by default', async () => {
    render(<CalendarPage />);
    await waitFor(() => {
      expect(screen.getByTestId('month-view-stub')).toBeInTheDocument();
    });
  });

  it('renders mobile calendar tree pane', async () => {
    render(<CalendarPage />);
    expect(screen.getByTestId('mobile-calendar-tree-pane')).toBeInTheDocument();
  });

  it('renders mobile calendar view pane only after navigation', async () => {
    render(<CalendarPage />);
    // Mobile view starts on 'tree', so view pane should not be visible initially
    expect(screen.queryByTestId('mobile-calendar-view-pane')).not.toBeInTheDocument();
  });
});