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

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

vi.mock('@/lib/useApi', () => ({ useApi: mockUseApi }));
vi.mock('next/link', () => ({
  default: (props: { href?: string; children: React.ReactNode }) => props.children,
}));
vi.mock('@/app/(dashboard)/medicines/OrganizerTab', () => ({
  OrganizerTab: ({ householdId }: { householdId: string }) => (
    <div data-testid="organizer-tab">{householdId}</div>
  ),
}));

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

describe('OrganizerPage', () => {
  it('shows skeleton when loading', () => {
    mockUseApi.mockReturnValue({ householdId: null, isLoading: true });
    render(<OrganizerPage />);
    expect(screen.getByText('Pill Organizer')).toBeInTheDocument();
    expect(screen.queryByTestId('organizer-tab')).not.toBeInTheDocument();
  });

  it('shows household prompt when no householdId', () => {
    mockUseApi.mockReturnValue({ householdId: null, isLoading: false });
    render(<OrganizerPage />);
    expect(screen.getByText(/create or join a household/)).toBeInTheDocument();
  });

  it('renders OrganizerTab when householdId exists', () => {
    mockUseApi.mockReturnValue({ householdId: 'hh1', isLoading: false });
    render(<OrganizerPage />);
    expect(screen.getByTestId('organizer-tab')).toHaveTextContent('hh1');
  });
});