// src/features/flyer/FlyerDisplay.test.tsx
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { FlyerDisplay } from './FlyerDisplay';
import type { Store } from '../../types';

const mockStore: Store = {
  store_id: 1,
  name: 'SuperMart',
  logo_url: 'http://example.com/logo.png',
  created_at: new Date().toISOString(),
};

const mockOnOpenCorrectionTool = vi.fn();

const defaultProps = {
  imageUrl: 'http://example.com/flyer.jpg',
  store: mockStore,
  validFrom: '2023-10-26',
  validTo: '2023-11-01',
  storeAddress: '123 Main St, Anytown',
  onOpenCorrectionTool: mockOnOpenCorrectionTool,
};

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

  it('should render all elements when all props are provided', () => {
    render(<FlyerDisplay {...defaultProps} />);

    // Check for store info
    expect(screen.getByRole('heading', { name: 'SuperMart' })).toBeInTheDocument();
    expect(screen.getByAltText('SuperMart Logo')).toHaveAttribute('src', mockStore.logo_url);
    expect(screen.getByText('123 Main St, Anytown')).toBeInTheDocument();

    // Check for date range
    expect(screen.getByText('Deals valid from October 26, 2023 to November 1, 2023')).toBeInTheDocument();

    // Check for flyer image
    expect(screen.getByAltText('Grocery Flyer')).toHaveAttribute('src', defaultProps.imageUrl);
  });

  it('should render a placeholder when imageUrl is null', () => {
    render(<FlyerDisplay {...defaultProps} imageUrl={null} />);
    expect(screen.getByText('Flyer image will be displayed here')).toBeInTheDocument();
  });

  it('should not render the header if store and date info are missing', () => {
    render(<FlyerDisplay imageUrl={defaultProps.imageUrl} onOpenCorrectionTool={mockOnOpenCorrectionTool} />);
    expect(screen.queryByRole('heading')).not.toBeInTheDocument();
  });

  it('should render without a logo if store.logo_url is not provided', () => {
    render(<FlyerDisplay {...defaultProps} store={{ ...mockStore, logo_url: null }} />);
    expect(screen.getByRole('heading', { name: 'SuperMart' })).toBeInTheDocument();
    expect(screen.queryByAltText('SuperMart Logo')).not.toBeInTheDocument();
  });

  it('should format a single day validity correctly', () => {
    render(<FlyerDisplay {...defaultProps} validFrom="2023-10-26" validTo="2023-10-26" />);
    expect(screen.getByText('Valid on October 26, 2023')).toBeInTheDocument();
  });

  it('should format correctly with only a start date', () => {
    render(<FlyerDisplay {...defaultProps} validTo={null} />);
    expect(screen.getByText('Deals start October 26, 2023')).toBeInTheDocument();
  });

  it('should format correctly with only an end date', () => {
    render(<FlyerDisplay {...defaultProps} validFrom={null} />);
    expect(screen.getByText('Deals end November 1, 2023')).toBeInTheDocument();
  });

  it('should apply dark mode image styles', () => {
    render(<FlyerDisplay {...defaultProps} />);
    const image = screen.getByAltText('Grocery Flyer');
    expect(image).toHaveClass('dark:invert');
    expect(image).toHaveClass('dark:hue-rotate-180');
  });

  describe('"Correct Data" Button', () => {
    it('should be visible when the header is rendered', () => {
      render(<FlyerDisplay {...defaultProps} />);
      expect(screen.getByRole('button', { name: /correct data/i })).toBeInTheDocument();
    });

    it('should not be visible when the header is not rendered', () => {
      render(<FlyerDisplay imageUrl={defaultProps.imageUrl} onOpenCorrectionTool={mockOnOpenCorrectionTool} />);
      expect(screen.queryByRole('button', { name: /correct data/i })).not.toBeInTheDocument();
    });

    it('should call onOpenCorrectionTool when clicked', () => {
      render(<FlyerDisplay {...defaultProps} />);
      fireEvent.click(screen.getByRole('button', { name: /correct data/i }));
      expect(mockOnOpenCorrectionTool).toHaveBeenCalledTimes(1);
    });
  });
});