import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import OperationalReportCards from '@/pages/doormile/reports/OperationalReportCards';

// Mock DropdownMenu for clean testing in jsdom
jest.mock('@/components/ui/dropdown-menu', () => ({
  DropdownMenu: ({ children }) => <div>{children}</div>,
  DropdownMenuTrigger: ({ children }) => <div>{children}</div>,
  DropdownMenuContent: ({ children }) => <div>{children}</div>,
  DropdownMenuItem: ({ children, onClick }) => (
    <button type="button" onClick={onClick}>
      {children}
    </button>
  ),
  DropdownMenuLabel: ({ children }) => <div>{children}</div>,
  DropdownMenuSeparator: () => <hr />,
}));

// Stub lucide-react icons for Jest
jest.mock('lucide-react', () => {
  return new Proxy(
    {},
    {
      get: (target, prop) => {
        if (prop === '__esModule') return true;
        return (props) => <span data-testid={`icon-${String(prop)}`} {...props} />;
      },
    }
  );
});

// Mock api calls
jest.mock('@/api/doormile/queries', () => ({
  fetchDeliveries: jest.fn().mockResolvedValue({
    rows: [
      {
        orderheaderid: '1',
        orderid: 'DM-1001',
        orderdate: '2026-09-20T10:00:00Z',
        tenantname: 'Acme Logistics',
        deliverycustomer: 'John Doe',
        pickupaddress: '123 Main St',
        deliveryaddress: '456 Market St',
        ridername: 'Rider Dave',
        kms: 5.2,
        deliverycharges: 120,
        orderstatus: 'delivered',
      },
    ],
  }),
}));

// Mock pdf generator
jest.mock('@/lib/ordersPdfGenerator', () => ({
  generateOrdersPdfReport: jest.fn().mockResolvedValue(true),
}));

describe('OperationalReportCards Component', () => {
  it('renders section title and all 3 operational report cards', () => {
    render(<OperationalReportCards onSelectRange={() => {}} />);

    expect(screen.getByText('OPERATIONAL REPORTS')).toBeInTheDocument();
    expect(screen.getByText('Last 7 Days Orders Report')).toBeInTheDocument();
    expect(screen.getByText('Last 15 Days Orders Report')).toBeInTheDocument();
    expect(screen.getByText('Last 30 Days Orders Report')).toBeInTheDocument();

    const badges = screen.getAllByText('Operational');
    expect(badges.length).toBe(3);

    const exportButtons = screen.getAllByText('Export');
    expect(exportButtons.length).toBe(3);
  });

  it('displays trailing duration metadata on each card', () => {
    render(<OperationalReportCards onSelectRange={() => {}} />);

    expect(screen.getByText('Trailing 7d · PDF · XLSX')).toBeInTheDocument();
    expect(screen.getByText('Trailing 15d · PDF · XLSX')).toBeInTheDocument();
    expect(screen.getByText('Trailing 30d · PDF · XLSX')).toBeInTheDocument();
  });

  it('notifies parent onSelectRange when choosing View in Table', async () => {
    const handleSelectRange = jest.fn();
    render(<OperationalReportCards onSelectRange={handleSelectRange} />);

    // Click Export on the first card
    const exportButtons = screen.getAllByText('Export');
    fireEvent.pointerDown(exportButtons[0]);

    // Choose View in Table Below
    const viewInTableItems = screen.getAllByText('View in Table Below');
    fireEvent.click(viewInTableItems[0]);

    expect(handleSelectRange).toHaveBeenCalledWith(
      expect.objectContaining({
        from: expect.any(String),
        to: expect.any(String),
      })
    );
  });
});