import {
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  computed,
  effect,
  inject,
  Injector,
  input,
  model,
  OnInit,
  output,
  untracked,
} from "@angular/core";
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 { AsyncPipe, 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 { AblePurePipe } from "@casl/angular";
import { FormDialogService } from "../../form-dialog/form-dialog.service";
import { EntityLoadPipe } from "../../common-components/entity-load/entity-load.pipe";
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 { 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";

/**
 * 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,
    AsyncPipe,
    AblePurePipe,
    ViewActionsComponent,
    EntityLoadPipe,
    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 injector = inject(Injector);

  public publicFormConfigs: PublicFormConfig[] = [];

  /**
   * 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)
    );
  });

  entityType = input<string>();
  entityConstructor = model<EntityConstructor<T>>();
  defaultSort = input<Sort>();
  dataSource = input<DataSourceType>();
  recordsDataSource = computed(() =>
    resolveDataSource<T>(this.injector, this.dataSource(), this.loaderMethod()),
  );
  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)[]>([]);
  columnGroups = input<ColumnGroupsConfig>();
  groups: GroupConfig[] = [];
  defaultColumnGroup = "";
  mobileColumnGroup = "";
  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) => {
        if (!isDesktop) {
          this.displayColumnGroupByName(this.mobileColumnGroup);
        } else if (
          this.selectedColumnGroupIndex ===
          this.getSelectedColumnIndexByName(this.mobileColumnGroup)
        ) {
          this.displayColumnGroupByName(this.defaultColumnGroup);
        }

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

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

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

  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.displayColumnGroupByName(
      this.screenWidthObserver.isDesktop()
        ? this.defaultColumnGroup
        : this.mobileColumnGroup,
    );

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

  private initColumnGroups(columnGroup?: ColumnGroupsConfig) {
    if (columnGroup && columnGroup.groups.length > 0) {
      this.groups = columnGroup.groups;
      this.defaultColumnGroup =
        columnGroup.default && this.configuredTabExists(columnGroup.default)
          ? columnGroup.default
          : columnGroup.groups[0].name;

      this.mobileColumnGroup =
        columnGroup.mobile && this.configuredTabExists(columnGroup.mobile)
          ? columnGroup.mobile
          : columnGroup.groups[0].name;
    } else {
      this.groups = [
        {
          name: "default",
          columns: this.columns().map((c) =>
            typeof c === "string" ? c : c.id,
          ),
        },
      ];
      this.defaultColumnGroup = "default";
      this.mobileColumnGroup = "default";
    }
  }

  private configuredTabExists(groupName: string): boolean {
    return this.groups.some((group) => group.name === groupName);
  }

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

  private displayColumnGroupByName(columnGroupName: string) {
    const selectedColumnIndex =
      this.getSelectedColumnIndexByName(columnGroupName);
    if (selectedColumnIndex !== -1) {
      this.selectedColumnGroupIndex = selectedColumnIndex;
    }
  }

  private getSelectedColumnIndexByName(columnGroupName: string) {
    return this.groups.findIndex((c) => c.name === columnGroupName);
  }

  /**
   * 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: (this.title() ?? "").replaceAll(" ", ""),
      },
    });
  }
}