import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import { describe, it, expect, vi } from 'vitest';
import GrainOilDashboard from '@/client/home/pages/SupplyChainDashboards/GrainOilDashboard';

// Mock child components
vi.mock('@/client/home/pages/SupplyChainDashboards/components/SupplyChainMap', () => ({
  default: ({ onPointClick }: { onPointClick: (point: any) => void }) => (
    <div data-testid="supply-chain-map">
      <button onClick={() => onPointClick({ id: 'test-point', type: 'base', position: { x: 100, y: 100 } })}>
        Test Point
      </button>
    </div>
  )
}));

vi.mock('@/client/home/pages/SupplyChainDashboards/components/SupplyChainModel', () => ({
  default: () => <div data-testid="supply-chain-model">Supply Chain Model</div>
}));

vi.mock('@/client/home/pages/SupplyChainDashboards/components/KeyMetrics', () => ({
  default: () => <div data-testid="key-metrics">Key Metrics</div>
}));

describe('GrainOilDashboard', () => {
  it('should render the dashboard with all components', () => {
    render(<GrainOilDashboard />);

    // Check if main container is rendered
    const container = screen.getByRole('generic');
    expect(container).toHaveClass('h-[1080px]');
    expect(container).toHaveClass('w-[1920px]');

    // Check if all child components are rendered
    expect(screen.getByTestId('supply-chain-map')).toBeInTheDocument();
    expect(screen.getByTestId('supply-chain-model')).toBeInTheDocument();
    expect(screen.getByTestId('key-metrics')).toBeInTheDocument();
  });

  it('should render navigation with default active tab', () => {
    render(<GrainOilDashboard />);

    // Check if navigation is rendered
    const navigation = screen.getByText('粮食');
    expect(navigation).toBeInTheDocument();

    // Check if grain tab is active by default
    const grainText = screen.getByText('粮食').closest('div');
    expect(grainText).toHaveClass('text-white');

    // Check if oil tab is inactive
    const oilText = screen.getByText('油脂').closest('div');
    expect(oilText).toHaveClass('text-[rgba(255,255,255,0.5)]');
  });

  it('should handle navigation tab switching', () => {
    render(<GrainOilDashboard />);

    // Find and click the oil tab
    const oilTab = screen.getByText('油脂').closest('div[class*="cursor-pointer"]');
    expect(oilTab).toBeInTheDocument();

    if (oilTab) {
      fireEvent.click(oilTab);

      // After clicking, the oil tab should become active
      const oilText = screen.getByText('油脂').closest('div');
      expect(oilText).toHaveClass('text-white');

      // And grain tab should become inactive
      const grainText = screen.getByText('粮食').closest('div');
      expect(grainText).toHaveClass('text-[rgba(255,255,255,0.5)]');
    }
  });

  it('should handle map point clicks', () => {
    const consoleSpy = vi.spyOn(console, 'log');

    render(<GrainOilDashboard />);

    // Click on a test point in the map
    const testPoint = screen.getByText('Test Point');
    fireEvent.click(testPoint);

    // Check if the click handler was called
    expect(consoleSpy).toHaveBeenCalledWith('点击定位点:', {
      id: 'test-point',
      type: 'base',
      position: { x: 100, y: 100 }
    });

    consoleSpy.mockRestore();
  });

  it('should render with correct background and styling', () => {
    render(<GrainOilDashboard />);

    const container = screen.getByRole('generic');

    // Check background color
    expect(container).toHaveClass('bg-[#0a1a3a]');

    // Check dimensions
    expect(container).toHaveClass('h-[1080px]');
    expect(container).toHaveClass('w-[1920px]');

    // Check positioning
    expect(container).toHaveClass('relative');
    expect(container).toHaveClass('overflow-hidden');
  });

  it('should render title and header elements', () => {
    render(<GrainOilDashboard />);

    // Check if title is rendered
    const title = screen.getByText('粮食•油脂');
    expect(title).toBeInTheDocument();
    expect(title).toHaveClass('text-white');
    expect(title).toHaveClass('text-[34px]');
  });
});