import { ComponentFixture, TestBed } from '@angular/core/testing';
import { describe, it, expect, beforeEach } from 'vitest';
import { OrderConfirmationItemListComponent } from './order-confirmation-item-list.component';
import { OrderType } from '@isa/checkout/data-access';
import { DisplayOrder } from '@isa/oms/data-access';
import { DebugElement, signal } from '@angular/core';
import { By } from '@angular/platform-browser';
import { OrderConfiramtionStore } from '../reward-order-confirmation.store';
import { provideHttpClient } from '@angular/common/http';
import { provideRouter } from '@angular/router';
import { provideProductImageUrl } from '@isa/shared/product-image';
import { provideProductRouterLinkBuilder } from '@isa/shared/product-router-link';

describe('OrderConfirmationItemListComponent', () => {
  let component: OrderConfirmationItemListComponent;
  let fixture: ComponentFixture<OrderConfirmationItemListComponent>;
  let mockStore: {
    orders: ReturnType<typeof signal>;
  };

  beforeEach(() => {
    // Create mock store with orders signal
    mockStore = {
      orders: signal([]),
    };

    TestBed.configureTestingModule({
      imports: [OrderConfirmationItemListComponent],
      providers: [
        { provide: OrderConfiramtionStore, useValue: mockStore },
        provideRouter([]),
        provideProductImageUrl('https://test.example.com'),
        provideProductRouterLinkBuilder((ean: string) => `/product/${ean}`),
        provideHttpClient(),
      ],
    });

    fixture = TestBed.createComponent(OrderConfirmationItemListComponent);
    component = fixture.componentInstance;
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should expose orders signal from store', () => {
    const testOrders: DisplayOrder[] = [
      {
        id: 1,
        features: { orderType: OrderType.Delivery },
        items: [],
      } as DisplayOrder,
    ];

    mockStore.orders.set(testOrders);

    expect(component.orders()).toEqual(testOrders);
  });

  it('should have getOrderTypeIcon function', () => {
    expect(component.getOrderTypeIcon).toBeDefined();
    expect(typeof component.getOrderTypeIcon).toBe('function');
  });

  it('should have getOrderTypeFeature function', () => {
    expect(component.getOrderTypeFeature).toBeDefined();
    expect(typeof component.getOrderTypeFeature).toBe('function');
  });

  describe('template rendering', () => {
    it('should render order groups for each order', () => {
      // Arrange
      const orders: DisplayOrder[] = [
        {
          id: 1,
          features: { orderType: OrderType.Delivery },
          items: [
            {
              id: 1,
              product: { ean: '123', name: 'Product 1', catalogProductNumber: 'CAT-1' },
              quantity: 1,
            } as any,
          ],
        } as DisplayOrder,
        {
          id: 2,
          features: { orderType: OrderType.Pickup },
          targetBranch: { name: 'Test Branch' },
          items: [
            {
              id: 2,
              product: { ean: '456', name: 'Product 2', catalogProductNumber: 'CAT-2' },
              quantity: 2,
            } as any,
          ],
        } as DisplayOrder,
      ];

      mockStore.orders.set(orders);

      // Act
      fixture.detectChanges();

      // Assert
      const deliveryGroups = fixture.debugElement.queryAll(
        By.css('[data-what="delivery-type-group"]')
      );
      expect(deliveryGroups.length).toBe(2);
    });

    it('should render order type header with icon', () => {
      // Arrange
      const orders: DisplayOrder[] = [
        {
          id: 1,
          features: { orderType: OrderType.Delivery },
          items: [],
        } as DisplayOrder,
      ];

      mockStore.orders.set(orders);

      // Act
      fixture.detectChanges();

      // Assert
      const icon = fixture.debugElement.query(By.css('ng-icon'));
      expect(icon).toBeTruthy();
    });

    it('should render items for each order', () => {
      // Arrange
      const orders: DisplayOrder[] = [
        {
          id: 1,
          features: { orderType: OrderType.Delivery },
          items: [
            {
              id: 1,
              product: { ean: '123', name: 'Product 1', catalogProductNumber: 'CAT-1' },
              quantity: 1,
            } as any,
            {
              id: 2,
              product: { ean: '456', name: 'Product 2', catalogProductNumber: 'CAT-2' },
              quantity: 2,
            } as any,
          ],
        } as DisplayOrder,
      ];

      mockStore.orders.set(orders);

      // Act
      fixture.detectChanges();

      // Assert
      const items = fixture.debugElement.queryAll(
        By.css('checkout-order-confirmation-item-list-item')
      );
      expect(items.length).toBe(2);
    });

    it('should render nothing when orders array is empty', () => {
      // Arrange
      mockStore.orders.set([]);

      // Act
      fixture.detectChanges();

      // Assert
      const deliveryGroups = fixture.debugElement.queryAll(
        By.css('[data-what="delivery-type-group"]')
      );
      expect(deliveryGroups.length).toBe(0);
    });
  });
});
