import { describe, it, expect, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import ResourceDashboard from '../ResourceDashboard';

// Mock react-router-dom hooks
const mockOutletContext = vi.fn();

vi.mock('react-router-dom', async () => {
  const actual = await vi.importActual('react-router-dom');
  return {
    ...actual,
    useOutletContext: () => mockOutletContext(),
  };
});

// Mock data
vi.mock('../../../mockData', () => ({
  APPOINTMENTS: [
    {
      id: '1',
      resourceId: 'r1',
      serviceId: 's1',
      customerName: 'John Doe',
      startTime: new Date().toISOString(),
      durationMinutes: 60,
      status: 'CONFIRMED'
    },
    {
      id: '2',
      resourceId: 'r1',
      serviceId: 's1',
      customerName: 'Jane Smith',
      startTime: new Date().toISOString(),
      durationMinutes: 30,
      status: 'COMPLETED'
    },
  ],
  RESOURCES: [
    { id: 'r1', name: 'Test Resource', userId: 'u1' },
    { id: 'r2', name: 'Other Resource', userId: 'u2' },
  ],
  SERVICES: [
    { id: 's1', name: 'Test Service' },
  ],
}));

describe('ResourceDashboard', () => {
  beforeEach(() => {
    vi.clearAllMocks();
  });

  const validContext = {
    user: { id: 'u1', email: 'test@test.com', role: 'resource' },
  };

  const noResourceContext = {
    user: { id: 'u999', email: 'unknown@test.com', role: 'resource' },
  };

  it('renders dashboard heading', () => {
    mockOutletContext.mockReturnValue(validContext);
    render(
      <MemoryRouter>
        <ResourceDashboard />
      </MemoryRouter>
    );
    expect(screen.getByText('Dashboard')).toBeInTheDocument();
  });

  it('renders welcome message with resource name', () => {
    mockOutletContext.mockReturnValue(validContext);
    render(
      <MemoryRouter>
        <ResourceDashboard />
      </MemoryRouter>
    );
    expect(screen.getByText(/Welcome, Test Resource/)).toBeInTheDocument();
  });

  it('renders stat cards', () => {
    mockOutletContext.mockReturnValue(validContext);
    render(
      <MemoryRouter>
        <ResourceDashboard />
      </MemoryRouter>
    );
    expect(screen.getByText('Completed This Week')).toBeInTheDocument();
    expect(screen.getByText('No-Show Rate (Weekly)')).toBeInTheDocument();
    expect(screen.getByText('Hours Booked This Week')).toBeInTheDocument();
  });

  it('renders today\'s agenda section', () => {
    mockOutletContext.mockReturnValue(validContext);
    render(
      <MemoryRouter>
        <ResourceDashboard />
      </MemoryRouter>
    );
    expect(screen.getByText("Today's Agenda")).toBeInTheDocument();
  });

  it('renders appointments for today', () => {
    mockOutletContext.mockReturnValue(validContext);
    render(
      <MemoryRouter>
        <ResourceDashboard />
      </MemoryRouter>
    );
    expect(screen.getByText('John Doe')).toBeInTheDocument();
    expect(screen.getByText('Jane Smith')).toBeInTheDocument();
  });

  it('renders service names for appointments', () => {
    mockOutletContext.mockReturnValue(validContext);
    render(
      <MemoryRouter>
        <ResourceDashboard />
      </MemoryRouter>
    );
    const serviceNames = screen.getAllByText('Test Service');
    expect(serviceNames.length).toBeGreaterThan(0);
  });

  it('shows error when resource not found', () => {
    mockOutletContext.mockReturnValue(noResourceContext);
    render(
      <MemoryRouter>
        <ResourceDashboard />
      </MemoryRouter>
    );
    expect(screen.getByText('Error: Resource not found for this user.')).toBeInTheDocument();
  });

  it('renders duration for appointments', () => {
    mockOutletContext.mockReturnValue(validContext);
    render(
      <MemoryRouter>
        <ResourceDashboard />
      </MemoryRouter>
    );
    expect(screen.getByText('60 minutes')).toBeInTheDocument();
    expect(screen.getByText('30 minutes')).toBeInTheDocument();
  });
});
