import { signal } from '@angular/core';
import { TestBed } from '@angular/core/testing';
import { describe, expect, it, vi } from 'vitest';
import { ReutilizablesTestPageComponent } from './reutilizables-test-page.component';
import { Tenant } from '../../../../core/services/tenant.interface';
import { TenantService } from '../../../../core/services/tenant.service';

const tenant: Tenant = {
  id: 1,
  codigo: 'test',
  nombre: 'Test Tenant',
  dominio: 'localhost',
  primary_color: '#6376F3',
  secondary_color: '#A0A0A0',
  danger_color: '#FF8888',
  success_color: '#198754',
  header_bg_color: '#313131',
  footer_bg_color: '#313131',
  header_logo: 'https://example.com/header.png',
  footer_logo: 'https://example.com/footer.png'
};

function createTenantServiceStub(currentTenant: Tenant | null) {
  const tenantState = signal(currentTenant);
  const statusState = signal<'ready' | 'not-found'>('ready');

  return {
    tenant: tenantState.asReadonly(),
    status: statusState.asReadonly(),
    getTenant: () => tenantState(),
    bootstrap: vi.fn().mockResolvedValue(undefined)
  };
}

describe('ReutilizablesTestPageComponent', () => {
  it('renders the tenant configuration section with logo sources and swatch colors', async () => {
    await TestBed.configureTestingModule({
      imports: [ReutilizablesTestPageComponent],
      providers: [
        {
          provide: TenantService,
          useValue: createTenantServiceStub(tenant)
        }
      ]
    }).compileComponents();

    const fixture = TestBed.createComponent(ReutilizablesTestPageComponent);
    fixture.detectChanges();

    const element = fixture.nativeElement as HTMLElement;
    
    // Check section title
    const sectionTitle = element.querySelector('.configuracion-tennant h2');
    expect(sectionTitle?.textContent).toContain('Configuración Tenant');

    // Check header logo source
    const headerImg = element.querySelector('.tenant-logo-card img[alt="Header Logo"]') as HTMLImageElement;
    expect(headerImg?.src).toBe(tenant.header_logo);

    // Check footer logo source
    const footerImg = element.querySelector('.tenant-logo-card img[alt="Footer Logo"]') as HTMLImageElement;
    expect(footerImg?.src).toBe(tenant.footer_logo);

    // Check color hex values
    expect(element.textContent).toContain(tenant.primary_color);
    expect(element.textContent).toContain(tenant.secondary_color);
    expect(element.textContent).toContain(tenant.danger_color);
    expect(element.textContent).toContain(tenant.success_color);
  });

  it('renders the paginator demo with the initial page status', async () => {
    await TestBed.configureTestingModule({
      imports: [ReutilizablesTestPageComponent],
      providers: [
        {
          provide: TenantService,
          useValue: createTenantServiceStub(tenant)
        }
      ]
    }).compileComponents();

    const fixture = TestBed.createComponent(ReutilizablesTestPageComponent);
    fixture.detectChanges();

    const element = fixture.nativeElement as HTMLElement;

    expect(element.querySelector('app-paginator')).not.toBeNull();
    expect(element.querySelector('[data-testid="paginator-status"]')?.textContent?.trim()).toBe('1/8');
  });
});