import {
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  computed,
  effect,
  inject,
  Injector,
  input,
  model,
  OnInit,
  output,
  untracked,
} from "@angular/core";
import { toSignal } from "@angular/core/rxjs-interop";
import { AuditRecord } from "../../../features/change-history/model/audit-record";
import { ActivatedRoute, Router, RouterLink } from "@angular/router";
import {
  ColumnGroupsConfig,
  FilterConfig,
  GroupConfig,
} from "../EntityListConfig";
import { Entity, EntityConstructor } from "../../entity/model/entity";
import { FormFieldConfig } from "../../common-components/entity-form/FormConfig";
import { EntityRegistry } from "../../entity/database-entity.decorator";
import { ScreenWidthObserver } from "../../../utils/media/screen-size-observer.service";
import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
import { FilterOverlayComponent } from "../../filter/filter-overlay/filter-overlay.component";
import { MatDialog } from "@angular/material/dialog";
import { NgStyle, NgTemplateOutlet } from "@angular/common";
import { MatButtonModule } from "@angular/material/button";
import { Angulartics2OnModule } from "angulartics2";
import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
import { MatMenuModule } from "@angular/material/menu";
import { MatTabsModule } from "@angular/material/tabs";
import { MatFormFieldModule } from "@angular/material/form-field";
import { MatInputModule } from "@angular/material/input";
import { FormsModule } from "@angular/forms";
import { FilterComponent } from "../../filter/filter/filter.component";
import { TabStateModule } from "../../../utils/tab-state/tab-state.module";
import { ViewTitleComponent } from "../../common-components/view-title/view-title.component";
import { ExportDialogComponent } from "../../export/export-dialog/export-dialog.component";
import { DisableEntityOperationDirective } from "../../permissions/permission-directive/disable-entity-operation.directive";
import { DuplicateRecordService } from "../duplicate-records/duplicate-records.service";
import { MatTooltipModule } from "@angular/material/tooltip";
import { Sort } from "@angular/material/sort";
import { ExportColumnsService } from "../../export/export-columns.service";
import { RouteTarget } from "../../../route-target";
import { EntitiesTableComponent } from "../../common-components/entities-table/entities-table.component";
import { DataFilter } from "../../filter/filters/filters";
import { EntityCreateButtonComponent } from "../../common-components/entity-create-button/entity-create-button.component";
import { ViewActionsComponent } from "../../common-components/view-actions/view-actions.component";
import { LoaderMethod } from "../../entity/entity-special-loader/entity-special-loader.service";
import { AblePipe } from "../../permissions/permission-pipe/able.pipe";
import { FormDialogService } from "../../form-dialog/form-dialog.service";
import { PublicFormConfig } from "#src/app/features/public-form/public-form-config";
import { PublicFormsService } from "#src/app/features/public-form/public-forms.service";
import { EntityAbility } from "../../permissions/ability/entity-ability";
import { ImportMetadata } from "../../import/import-metadata";
import { EntityBulkActionsComponent } from "../../entity-details/entity-bulk-actions/entity-bulk-actions.component";
import { resolveLocaleText } from "../../language/active-locale";
import {
  FeaturePermissionDialogComponent,
  FeaturePermissionDialogData,
} from "../../permissions/feature-permission/feature-permission-dialog/feature-permission-dialog.component";
import { PermissionsConfigService } from "../../permissions/permissions-config.service";
import { DataSourceType } from "#src/app/core/common-components/entities-table/data-source/available-data-sources";
import { resolveDataSource } from "#src/app/core/common-components/entities-table/data-source/data-source-resolver";
import { InMemoryDataSource } from "#src/app/core/common-components/entities-table/data-source/in-memory-data-source";

/**
 * The column group shown on small screens: the one with the fewest columns
 * (the first of them if several have the same number).
 */
function indexOfGroupWithFewestColumns(groups: GroupConfig[]): number {
  return groups.reduce(
    (fewest, group, index) =>
      group.columns.length < groups[fewest].columns.length ? index : fewest,
    0,
  );
}

/**
 * This component allows to create a full-blown table with pagination, filtering, searching and grouping.
 * The filter and grouping settings are written into the URL params to allow going back to the previous view.
 * The pagination settings are stored for each user.
 * The columns can be any kind of component.
 * The column components will be provided with the Entity object, the id for this column, as well as its static config.
 *
 * The component can be either used inside a template, or directly in a route through the config object.
 */
@RouteTarget("EntityList")
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: "app-entity-list",
  templateUrl: "./entity-list.component.html",
  styleUrls: ["./entity-list.component.scss"],
  providers: [DuplicateRecordService],
  imports: [
    NgStyle,
    MatButtonModule,
    Angulartics2OnModule,
    FontAwesomeModule,
    MatMenuModule,
    NgTemplateOutlet,
    MatTabsModule,
    MatFormFieldModule,
    MatInputModule,
    EntitiesTableComponent,
    FormsModule,
    FilterComponent,
    TabStateModule,
    ViewTitleComponent,
    DisableEntityOperationDirective,
    RouterLink,
    MatTooltipModule,
    EntityCreateButtonComponent,
    AblePipe,
    ViewActionsComponent,
    EntityBulkActionsComponent,
  ],
})
@UntilDestroy()
export class EntityListComponent<T extends Entity> implements OnInit {
  private screenWidthObserver = inject(ScreenWidthObserver);
  private router = inject(Router);
  private activatedRoute = inject(ActivatedRoute);
  private entities = inject(EntityRegistry);
  private dialog = inject(MatDialog);
  private readonly exportColumnsService = inject(ExportColumnsService);
  private readonly formDialog = inject(FormDialogService);
  private readonly cdr = inject(ChangeDetectorRef);
  private readonly publicFormsService = inject(PublicFormsService);
  private readonly ability = inject(EntityAbility);
  private readonly permissionsConfig = inject(PermissionsConfigService);
  private readonly injector = inject(Injector);

  /** the audit data the change log reads, as the permission subject to ask about */
  protected readonly auditRecordType = AuditRecord.ENTITY_TYPE;

  /** public forms for this entity type, with titles resolved for display */
  public publicForms: { config: PublicFormConfig; title: string }[] = [];

  /**
   * Whether the current user may import records of this type.
   * Requires create permission on both the entity type and the ImportMetadata
   * history record that every import writes at the end.
   */
  canImport = computed(() => {
    if (!this.ability.initialized) {
      return true;
    }
    const entityConstructor = this.entityConstructor();
    return (
      !!entityConstructor &&
      this.ability.can("create", entityConstructor) &&
      this.ability.can("create", ImportMetadata)
    );
  });

  /** whether the current user may review and edit who can access this entity type */
  readonly canManagePermissions = toSignal(
    this.permissionsConfig.canManagePermissions$,
    { initialValue: false },
  );

  /**
   * Internal entity types are "features" (e.g. Email Templates) that exist only to
   * be configured by admins, so their permissions get a dedicated button here.
   * For regular entity types the same dialog is offered in the overflow menu.
   */
  readonly isFeatureType = computed(
    () => !!this.entityConstructor()?.isInternalEntity,
  );

  entityType = input<string>();
  entityConstructor = model<EntityConstructor<T>>();
  defaultSort = input<Sort>();
  dataSource = input<DataSourceType>();
  recordsDataSource = computed(() =>
    resolveDataSource<T>(
      this.injector,
      this.dataSource(),
      this.loaderMethod(),
      this.entityConstructor(),
    ),
  );
  showFreetextFilter = computed(
    () => this.recordsDataSource() instanceof InMemoryDataSource,
  );

  /**
   * The special service or method to load data via an index or other special method.
   */
  loaderMethod = input<LoaderMethod>();

  clickMode = input<"navigate" | "popup" | "popup-details" | "none">(
    "navigate",
  );

  /** initial / default state whether to include archived records in the list */
  showInactive = input<boolean>();

  elementClick = output<T>();
  addNewClick = output<void>();
  selectedRows = model<T[] | undefined>(undefined);

  isDesktop: boolean;

  title = model<string>("");
  columns = input<(FormFieldConfig | string)[]>([]);

  /** Analytics event name for the "Add New" button; `title` comes from config and may not be a string. */
  protected addNewAnalyticsAction = computed(
    () =>
      String(this.title() ?? "")
        .toLowerCase()
        .replace(" ", "_") + "_add_new",
  );

  columnGroups = input<ColumnGroupsConfig>();
  groups: GroupConfig[] = [];
  /** the same groups with their names resolved, for the tab labels */
  displayGroups: { name: string; columns: string[] }[] = [];
  filters = input<FilterConfig[]>([]);

  /**
   * Whether the list's default row coloring should reflect each entity's color.
   */
  showEntityColor = input<boolean>(false);

  columnsToDisplay: string[];

  filterObj = model<DataFilter<T>>({});
  filterString = "";

  get selectedColumnGroupIndex(): number {
    return this.selectedColumnGroupIndex_;
  }

  set selectedColumnGroupIndex(newValue: number) {
    this.selectedColumnGroupIndex_ = newValue;
    this.columnsToDisplay = this.groups[newValue].columns;
  }

  selectedColumnGroupIndex_: number = 0;

  /**
   * defines the bottom margin of the topmost row in the
   * desktop version. This has to be bigger when there are
   * several column groups since there are
   * tabs with zero top-padding in this case
   */
  get offsetFilterStyle(): object {
    const bottomMargin = this.groups.length > 1 ? 29 : 14;
    return {
      "margin-bottom": `${bottomMargin}px`,
    };
  }

  constructor() {
    effect(() => {
      this.entityType();
      this.columns();
      this.columnGroups();
      this.loaderMethod();
      // untracked: internal signals set during build (title, allEntities) must not re-trigger this effect
      void untracked(() => this.buildComponentFromConfig());
    });
    effect(() => {
      this.recordsDataSource().loadRecordConfig.set({
        entityCtr: this.entityConstructor(),
        loaderMethod: this.loaderMethod(),
      });
    });

    this.screenWidthObserver
      .platform()
      .pipe(untilDestroyed(this))
      .subscribe((isDesktop) => {
        // groups are not set yet on the initial emit during construction
        if (this.groups.length > 0) {
          const mobileIndex = indexOfGroupWithFewestColumns(this.groups);
          if (!isDesktop) {
            this.selectedColumnGroupIndex = mobileIndex;
          } else if (this.selectedColumnGroupIndex === mobileIndex) {
            this.selectedColumnGroupIndex = 0;
          }
        }

        this.isDesktop = isDesktop;
        this.cdr.markForCheck();
      });
  }

  async ngOnInit() {
    await this.loadPublicFormConfig();
  }

  private async loadPublicFormConfig() {
    const allForms = await this.publicFormsService.getAllPublicFormConfigs();
    this.publicForms = allForms
      .filter(
        (config) =>
          config.entity &&
          config.entity.toLowerCase() ===
            this.entityConstructor()?.ENTITY_TYPE?.toLowerCase(),
      )
      .map((config) => ({
        config,
        title: resolveLocaleText(config.title) ?? "",
      }));
    this.cdr.markForCheck();
  }

  /** Review and edit which user roles have access to this entity type. */
  openPermissionsDialog() {
    const entityConstructor = this.entityConstructor();
    if (!entityConstructor) {
      return;
    }

    this.dialog.open(FeaturePermissionDialogComponent, {
      data: {
        entityType: entityConstructor.ENTITY_TYPE,
        entityLabel: entityConstructor.labelPlural,
      } as FeaturePermissionDialogData,
      maxWidth: "720px",
    });
  }

  async copyPublicFormLinkForEntityType(config: PublicFormConfig) {
    await this.publicFormsService.copyPublicFormLinkFromConfig(config);
  }

  private async buildComponentFromConfig() {
    const entityType = this.entityType();
    if (entityType) {
      this.entityConstructor.set(
        this.entities.get(entityType) as EntityConstructor<T>,
      );
    }

    this.initColumnGroups(this.columnGroups());
    this.selectedColumnGroupIndex = this.screenWidthObserver.isDesktop()
      ? 0
      : indexOfGroupWithFewestColumns(this.groups);

    if (!this.title()) {
      this.title.set(this.entityConstructor()?.labelPlural);
    }
  }

  private initColumnGroups(columnGroup?: ColumnGroupsConfig) {
    if (columnGroup && columnGroup.groups.length > 0) {
      this.groups = columnGroup.groups;
    } else {
      this.groups = [
        {
          name: "default",
          columns: this.columns().map((c) =>
            typeof c === "string" ? c : c.id,
          ),
        },
      ];
    }

    this.displayGroups = this.groups.map((group) => ({
      ...group,
      name: resolveLocaleText(group.name) ?? "",
    }));
  }

  applyFilter(filterValue: string) {
    this.recordsDataSource().filter = filterValue.trim().toLowerCase();
  }

  /**
   * Calling this function will display the filters in a popup
   */
  openFilterOverlay() {
    this.dialog.open(FilterOverlayComponent, {
      data: {
        filterConfig: this.filters(),
        entityType: this.entityConstructor(),
        entities: this.recordsDataSource().allRecords(),
        useUrlQueryParams: true,
        filterObjChange: (filter: DataFilter<T>) => this.filterObj.set(filter),
      },
    });
  }

  addNew(newEntity?: T) {
    const entityConstructor = this.entityConstructor();
    if (!entityConstructor) {
      return;
    }
    if (!newEntity) {
      newEntity = new entityConstructor();
    }

    switch (this.clickMode()) {
      case "navigate":
        this.router.navigate(["new"], { relativeTo: this.activatedRoute });
        break;
      case "popup":
        this.formDialog.openFormPopup(newEntity, this.columns());
        break;
      case "popup-details":
        this.formDialog.openView(newEntity);
        break;
    }

    this.addNewClick.emit();
  }

  onRowClick(row: T) {
    this.elementClick.emit(row);
  }

  openExportDialog() {
    const cols = this.columnsToDisplay ?? [];
    const availableColumns = this.columns() ?? [];
    const schema = this.entityConstructor()?.schema;

    const { allAvailableColumns, preselectedExportConfig } =
      this.exportColumnsService.buildExportColumns({
        schema,
        visibleColIds: cols,
        availableColumns,
      });

    this.dialog.open(ExportDialogComponent, {
      data: {
        allEntities: () => this.recordsDataSource().getAllData(false),
        filteredData: () => this.recordsDataSource().getAllData(true),
        exportConfig: allAvailableColumns,
        preselectedExportConfig,
        columnGroups: this.columnGroups(),
        filename: String(this.title() ?? "").replaceAll(" ", ""),
      },
    });
  }
}