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

const { mockUseApi } = vi.hoisted(() => ({
  mockUseApi: vi.fn(),
}));

vi.mock('@/lib/useApi', () => ({ useApi: mockUseApi }));

vi.mock('next/link', () => {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  return { default: (props: any) => props.children };
});

import MedicinesPage from '../../../../src/app/(dashboard)/medicines/page';

beforeEach(() => vi.clearAllMocks());

describe('MedicinesPage', () => {
  it('shows skeleton when loading', () => {
    mockUseApi.mockReturnValue({ householdId: null, isLoading: true });

    render(<MedicinesPage />);

    expect(screen.getByText('Medicines')).toBeInTheDocument();
    // Should show skeleton, not section cards
    expect(screen.queryByText('Library')).not.toBeInTheDocument();
  });

  it('shows household prompt when no householdId', () => {
    mockUseApi.mockReturnValue({ householdId: null, isLoading: false });

    render(<MedicinesPage />);

    expect(screen.getByText(/create or join a household/)).toBeInTheDocument();
  });

  it('renders section cards when household exists', () => {
    mockUseApi.mockReturnValue({ householdId: 'hh1', isLoading: false });

    render(<MedicinesPage />);

    expect(screen.getByText('Library')).toBeInTheDocument();
    expect(screen.getByText('Cabinet')).toBeInTheDocument();
    expect(screen.getByText('Regimens')).toBeInTheDocument();
    expect(screen.getByText('Organizer')).toBeInTheDocument();
    expect(screen.getByText('Activity')).toBeInTheDocument();
  });
});