import { DOCUMENT } from '@angular/common';
import { Component, computed, effect, inject } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { RouterOutlet } from '@angular/router';

import { TenantService } from './core/services/tenant.service';
import { DEFAULT_TENANT_BRANDING } from './core/services/tenant-ssr-cache.store';
import { GlobalLoadingComponent } from './shared/components/global-loading/global-loading.component';
import { ModalHostComponent } from './shared/components/modal-host/modal-host.component';
import { ToastContainerComponent } from './shared/components/toast-container/toast-container.component';

function hexToRgb(hex: string): string {
  const cleanHex = hex.replace('#', '').trim();
  let r = 0, g = 0, b = 0;
  if (cleanHex.length === 3) {
    r = parseInt(cleanHex[0] + cleanHex[0], 16);
    g = parseInt(cleanHex[1] + cleanHex[1], 16);
    b = parseInt(cleanHex[2] + cleanHex[2], 16);
  } else if (cleanHex.length >= 6) {
    r = parseInt(cleanHex.slice(0, 2), 16);
    g = parseInt(cleanHex.slice(2, 4), 16);
    b = parseInt(cleanHex.slice(4, 6), 16);
  }
  return `${r}, ${g}, ${b}`;
}

@Component({
  selector: 'app-root',
  imports: [
    RouterOutlet,
    ToastContainerComponent,
    ModalHostComponent,
    GlobalLoadingComponent
  ],
  templateUrl: './app.html',
  styleUrl: './app.scss',
  host: {
    '[style.--tenant-primary]': 'tenantPrimaryColor()',
    '[style.--tenant-secondary]': 'tenantSecondaryColor()',
    '[style.--tenant-danger]': 'tenantDangerColor()',
    '[style.--tenant-success]': 'tenantSuccessColor()',
    '[style.--color-primary]': 'tenantPrimaryColor()',
    '[style.--color-secondary]': 'tenantSecondaryColor()',
    '[style.--color-danger]': 'tenantDangerColor()',
    '[style.--color-success]': 'tenantSuccessColor()',
    '[style.--tenant-primary-rgb]': 'tenantPrimaryColorRgb()',
    '[style.--tenant-secondary-rgb]': 'tenantSecondaryColorRgb()',
    '[style.--tenant-danger-rgb]': 'tenantDangerColorRgb()',
    '[style.--tenant-success-rgb]': 'tenantSuccessColorRgb()',
    '[style.--color-primary-rgb]': 'tenantPrimaryColorRgb()',
    '[style.--color-secondary-rgb]': 'tenantSecondaryColorRgb()',
    '[style.--color-danger-rgb]': 'tenantDangerColorRgb()',
    '[style.--color-success-rgb]': 'tenantSuccessColorRgb()',
    '[style.--tenant-header-bg]': 'tenantHeaderBgColor()',
    '[style.--tenant-footer-bg]': 'tenantFooterBgColor()',
    '[style.--color-header-bg]': 'tenantHeaderBgColor()',
    '[style.--color-footer-bg]': 'tenantFooterBgColor()'
  }
})
export class App {
  private readonly tenantService = inject(TenantService);
  private readonly document = inject(DOCUMENT);
  private readonly title = inject(Title);

  constructor() {
    effect(() => {
      const tenant = this.tenantService.tenant();
      const siteTitle = tenant?.site_title?.trim() || 'ShopitFront';
      const faviconHref = tenant?.favicon || 'favicon.ico';

      this.title.setTitle(siteTitle);

      let favicon = this.document.head.querySelector<HTMLLinkElement>('link[rel~="icon"]');

      if (!favicon) {
        favicon = this.document.createElement('link');
        favicon.setAttribute('rel', 'icon');
        this.document.head.appendChild(favicon);
      }

      favicon.setAttribute('href', faviconHref);
    });
  }

  protected readonly status = this.tenantService.status;

  protected readonly tenantPrimaryColor = computed(
    () => this.tenantService.tenant()?.primary_color ?? DEFAULT_TENANT_BRANDING.primaryColor
  );
  protected readonly tenantSecondaryColor = computed(
    () => this.tenantService.tenant()?.secondary_color ?? DEFAULT_TENANT_BRANDING.secondaryColor
  );
  protected readonly tenantDangerColor = computed(
    () => this.tenantService.tenant()?.danger_color ?? DEFAULT_TENANT_BRANDING.dangerColor
  );
  protected readonly tenantSuccessColor = computed(
    () => this.tenantService.tenant()?.success_color ?? DEFAULT_TENANT_BRANDING.successColor
  );
  protected readonly tenantPrimaryColorRgb = computed(() =>
    hexToRgb(this.tenantPrimaryColor())
  );
  protected readonly tenantSecondaryColorRgb = computed(() =>
    hexToRgb(this.tenantSecondaryColor())
  );
  protected readonly tenantDangerColorRgb = computed(() =>
    hexToRgb(this.tenantDangerColor())
  );
  protected readonly tenantSuccessColorRgb = computed(() =>
    hexToRgb(this.tenantSuccessColor())
  );
  protected readonly tenantHeaderBgColor = computed(
    () =>
      this.tenantService.tenant()?.header_bg_color ??
      DEFAULT_TENANT_BRANDING.headerBgColor
  );
  protected readonly tenantFooterBgColor = computed(
    () =>
      this.tenantService.tenant()?.footer_bg_color ??
      DEFAULT_TENANT_BRANDING.footerBgColor
  );
}