import { Component, Output, EventEmitter } from '@angular/core';
import { RunView, LogError } from '@memberjunction/core';
import { Subject, BehaviorSubject } from 'rxjs';
import { debounceTime, takeUntil, distinctUntilChanged } from 'rxjs/operators';
import { UUIDsEqual } from '@memberjunction/global';
import * as i0 from "@angular/core";
import * as i1 from "@progress/kendo-angular-buttons";
import * as i2 from "@progress/kendo-angular-inputs";
import * as i3 from "@memberjunction/ng-container-directives";
import * as i4 from "@memberjunction/ng-shared-generic";
const _forTrack0 = ($index, $item) => $item.ID;
function CategoriesListViewComponent_ng_template_10_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "i", 11);
} }
function CategoriesListViewComponent_Conditional_12_For_1_Conditional_6_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 18);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const category_r2 = i0.ɵɵnextContext().$implicit;
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate1(" ", category_r2.Description, " ");
} }
function CategoriesListViewComponent_Conditional_12_For_1_Template(rf, ctx) { if (rf & 1) {
    const _r1 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 13);
    i0.ɵɵlistener("click", function CategoriesListViewComponent_Conditional_12_For_1_Template_div_click_0_listener() { const category_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.openCategory(category_r2)); });
    i0.ɵɵelementStart(1, "div", 14)(2, "div", 15);
    i0.ɵɵelement(3, "i", 16);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(4, "h3", 17);
    i0.ɵɵtext(5);
    i0.ɵɵelementEnd()();
    i0.ɵɵconditionalCreate(6, CategoriesListViewComponent_Conditional_12_For_1_Conditional_6_Template, 2, 1, "div", 18);
    i0.ɵɵelementStart(7, "div", 19)(8, "div", 20)(9, "span", 21);
    i0.ɵɵtext(10);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(11, "span", 22);
    i0.ɵɵtext(12, "Total Actions");
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(13, "div", 20)(14, "span", 23);
    i0.ɵɵtext(15);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(16, "span", 22);
    i0.ɵɵtext(17, "Active");
    i0.ɵɵelementEnd()()();
    i0.ɵɵelementStart(18, "div", 24)(19, "button", 25);
    i0.ɵɵlistener("click", function CategoriesListViewComponent_Conditional_12_For_1_Template_button_click_19_listener($event) { const category_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.viewActions(category_r2, $event)); });
    i0.ɵɵelement(20, "i", 26);
    i0.ɵɵtext(21, " View Actions ");
    i0.ɵɵelementEnd()()();
} if (rf & 2) {
    const category_r2 = ctx.$implicit;
    i0.ɵɵadvance(5);
    i0.ɵɵtextInterpolate(category_r2.Name);
    i0.ɵɵadvance();
    i0.ɵɵconditional(category_r2.Description ? 6 : -1);
    i0.ɵɵadvance(4);
    i0.ɵɵtextInterpolate(category_r2.actionCount || 0);
    i0.ɵɵadvance(5);
    i0.ɵɵtextInterpolate(category_r2.activeActionCount || 0);
    i0.ɵɵadvance(4);
    i0.ɵɵproperty("fillMode", "outline")("size", "small");
} }
function CategoriesListViewComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵrepeaterCreate(0, CategoriesListViewComponent_Conditional_12_For_1_Template, 22, 6, "div", 12, _forTrack0);
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext();
    i0.ɵɵrepeater(ctx_r2.filteredCategories);
} }
function CategoriesListViewComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 9);
    i0.ɵɵelement(1, "i", 3);
    i0.ɵɵelementStart(2, "h3");
    i0.ɵɵtext(3, "No categories found");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(4, "p");
    i0.ɵɵtext(5, "Try adjusting your search criteria");
    i0.ɵɵelementEnd()();
} }
function CategoriesListViewComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 10);
    i0.ɵɵelement(1, "mj-loading", 27);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    i0.ɵɵadvance();
    i0.ɵɵproperty("showText", false);
} }
export class CategoriesListViewComponent {
    openEntityRecord = new EventEmitter();
    isLoading = true;
    categories = [];
    filteredCategories = [];
    searchTerm$ = new BehaviorSubject('');
    destroy$ = new Subject();
    constructor() { }
    ngOnInit() {
        this.setupSearch();
        this.loadData();
    }
    ngOnDestroy() {
        this.destroy$.next();
        this.destroy$.complete();
    }
    setupSearch() {
        this.searchTerm$.pipe(debounceTime(300), distinctUntilChanged(), takeUntil(this.destroy$)).subscribe(() => {
            this.applyFilter();
        });
    }
    async loadData() {
        try {
            this.isLoading = true;
            console.log('Loading categories data...');
            const rv = new RunView();
            const [categoriesResult, actionsResult] = await rv.RunViews([
                {
                    EntityName: 'MJ: Action Categories',
                    OrderBy: 'Name'
                },
                {
                    EntityName: 'MJ: Actions',
                    OrderBy: 'Name'
                }
            ]);
            console.log('Categories result:', categoriesResult);
            console.log('Actions result for categories:', actionsResult);
            if (!categoriesResult.Success) {
                throw new Error('Failed to load categories: ' + categoriesResult.ErrorMessage);
            }
            const categories = (categoriesResult.Results || []);
            const actions = (actionsResult.Results || []);
            console.log(`Loaded ${categories.length} categories and ${actions.length} actions`);
            // Calculate stats for each category
            this.categories = categories.map(category => {
                const categoryActions = actions.filter(a => UUIDsEqual(a.CategoryID, category.ID));
                return {
                    ...category,
                    actionCount: categoryActions.length,
                    activeActionCount: categoryActions.filter(a => a.Status === 'Active').length
                };
            });
            this.applyFilter();
        }
        catch (error) {
            console.error('Error loading categories data:', error);
            LogError('Failed to load categories data', undefined, error);
            this.categories = [];
            this.filteredCategories = [];
        }
        finally {
            this.isLoading = false;
        }
    }
    applyFilter() {
        const searchTerm = this.searchTerm$.value.toLowerCase();
        if (!searchTerm) {
            this.filteredCategories = [...this.categories];
        }
        else {
            this.filteredCategories = this.categories.filter(category => category.Name.toLowerCase().includes(searchTerm) ||
                (category.Description || '').toLowerCase().includes(searchTerm));
        }
    }
    onSearchChange(searchTerm) {
        this.searchTerm$.next(searchTerm);
    }
    openCategory(category) {
        this.openEntityRecord.emit({
            entityName: 'MJ: Action Categories',
            recordId: category.ID
        });
    }
    viewActions(category, event) {
        event.stopPropagation();
        // This could navigate to the actions list with a pre-applied category filter
        // For now, just open the category
        this.openCategory(category);
    }
    static ɵfac = function CategoriesListViewComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CategoriesListViewComponent)(); };
    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CategoriesListViewComponent, selectors: [["mj-categories-list-view"]], outputs: { openEntityRecord: "openEntityRecord" }, standalone: false, decls: 15, vars: 5, consts: [["mjFillContainer", "", 1, "categories-list-view"], [1, "list-header"], [1, "header-title"], [1, "fa-solid", "fa-sitemap"], [1, "results-count"], [1, "search-container"], ["placeholder", "Search categories...", 3, "valueChange", "value"], ["kendoTextBoxPrefixTemplate", ""], [1, "categories-grid"], [1, "empty-state"], [1, "loading-overlay"], [1, "fa-solid", "fa-search"], [1, "category-card"], [1, "category-card", 3, "click"], [1, "category-header"], [1, "category-icon"], [1, "fa-solid", "fa-folder"], [1, "category-name"], [1, "category-description"], [1, "category-stats"], [1, "stat-item"], [1, "stat-value"], [1, "stat-label"], [1, "stat-value", "active"], [1, "category-footer"], ["kendoButton", "", 3, "click", "fillMode", "size"], [1, "fa-solid", "fa-cogs"], ["size", "large", 3, "showText"]], template: function CategoriesListViewComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "h2");
            i0.ɵɵelement(4, "i", 3);
            i0.ɵɵtext(5, " Action Categories");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(6, "div", 4);
            i0.ɵɵtext(7);
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(8, "div", 5)(9, "kendo-textbox", 6);
            i0.ɵɵlistener("valueChange", function CategoriesListViewComponent_Template_kendo_textbox_valueChange_9_listener($event) { return ctx.onSearchChange($event); });
            i0.ɵɵtemplate(10, CategoriesListViewComponent_ng_template_10_Template, 1, 0, "ng-template", 7);
            i0.ɵɵelementEnd()()();
            i0.ɵɵelementStart(11, "div", 8);
            i0.ɵɵconditionalCreate(12, CategoriesListViewComponent_Conditional_12_Template, 2, 0)(13, CategoriesListViewComponent_Conditional_13_Template, 6, 0, "div", 9);
            i0.ɵɵelementEnd();
            i0.ɵɵconditionalCreate(14, CategoriesListViewComponent_Conditional_14_Template, 2, 1, "div", 10);
            i0.ɵɵelementEnd();
        } if (rf & 2) {
            i0.ɵɵadvance(7);
            i0.ɵɵtextInterpolate2("", ctx.filteredCategories.length, " of ", ctx.categories.length, " categories");
            i0.ɵɵadvance(2);
            i0.ɵɵproperty("value", ctx.searchTerm$.value);
            i0.ɵɵadvance(3);
            i0.ɵɵconditional(ctx.filteredCategories.length > 0 ? 12 : !ctx.isLoading ? 13 : -1);
            i0.ɵɵadvance(2);
            i0.ɵɵconditional(ctx.isLoading ? 14 : -1);
        } }, dependencies: [i1.ButtonComponent, i2.TextBoxComponent, i2.TextBoxPrefixTemplateDirective, i3.FillContainer, i4.LoadingComponent], styles: [".categories-list-view[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 1.5rem;\n      padding: 1.5rem;\n      height: 100%;\n      overflow-y: auto;\n\n      .list-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        flex-wrap: wrap;\n        gap: 1rem;\n\n        .header-title {\n          display: flex;\n          align-items: baseline;\n          gap: 1rem;\n\n          h2 {\n            margin: 0;\n            font-size: 1.5rem;\n            font-weight: 600;\n            display: flex;\n            align-items: center;\n            gap: 0.5rem;\n\n            i {\n              color: var(--kendo-color-primary);\n            }\n          }\n\n          .results-count {\n            color: var(--kendo-color-subtle);\n            font-size: 0.875rem;\n          }\n        }\n\n        .search-container {\n          min-width: 250px;\n          \n          kendo-textbox {\n            width: 100%;\n          }\n        }\n      }\n\n      .categories-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n        gap: 1.5rem;\n        flex: 1;\n        align-content: start;\n\n        .category-card {\n          background: var(--kendo-color-surface);\n          border: 1px solid var(--kendo-color-border);\n          border-radius: 0.75rem;\n          padding: 1.5rem;\n          cursor: pointer;\n          transition: all 0.2s ease;\n          display: flex;\n          flex-direction: column;\n          gap: 1rem;\n\n          &:hover {\n            transform: translateY(-2px);\n            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n            border-color: var(--kendo-color-primary);\n          }\n\n          .category-header {\n            display: flex;\n            align-items: center;\n            gap: 1rem;\n\n            .category-icon {\n              display: flex;\n              align-items: center;\n              justify-content: center;\n              width: 3rem;\n              height: 3rem;\n              background: var(--kendo-color-primary-subtle);\n              border-radius: 0.5rem;\n\n              i {\n                color: var(--kendo-color-primary);\n                font-size: 1.25rem;\n              }\n            }\n\n            .category-name {\n              margin: 0;\n              font-size: 1.125rem;\n              font-weight: 600;\n              flex: 1;\n            }\n          }\n\n          .category-description {\n            color: var(--kendo-color-subtle);\n            font-size: 0.875rem;\n            line-height: 1.5;\n            display: -webkit-box;\n            -webkit-line-clamp: 2;\n            -webkit-box-orient: vertical;\n            overflow: hidden;\n          }\n\n          .category-stats {\n            display: flex;\n            gap: 2rem;\n            padding: 1rem;\n            background: var(--kendo-color-app-surface);\n            border-radius: 0.5rem;\n\n            .stat-item {\n              display: flex;\n              flex-direction: column;\n              gap: 0.25rem;\n\n              .stat-value {\n                font-size: 1.5rem;\n                font-weight: 700;\n                color: var(--kendo-color-on-app-surface);\n\n                &.active {\n                  color: var(--kendo-color-success);\n                }\n              }\n\n              .stat-label {\n                font-size: 0.75rem;\n                color: var(--kendo-color-subtle);\n                font-weight: 600;\n              }\n            }\n          }\n\n          .category-footer {\n            display: flex;\n            justify-content: flex-end;\n            margin-top: auto;\n          }\n        }\n      }\n\n      .empty-state {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        padding: 4rem;\n        text-align: center;\n        color: var(--kendo-color-subtle);\n\n        i {\n          font-size: 3rem;\n          margin-bottom: 1rem;\n          opacity: 0.5;\n        }\n\n        h3 {\n          margin: 0 0 0.5rem 0;\n          font-size: 1.25rem;\n          font-weight: 600;\n        }\n\n        p {\n          margin: 0;\n          font-size: 0.875rem;\n        }\n      }\n\n      .loading-overlay {\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        background: rgba(255, 255, 255, 0.8);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        z-index: 1000;\n      }\n    }\n\n    @media (max-width: 768px) {\n      .categories-list-view[_ngcontent-%COMP%] {\n        padding: 1rem;\n\n        .list-header {\n          flex-direction: column;\n          align-items: stretch;\n\n          .search-container {\n            min-width: unset;\n          }\n        }\n\n        .categories-grid {\n          grid-template-columns: 1fr;\n          gap: 1rem;\n        }\n      }\n    }"] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CategoriesListViewComponent, [{
        type: Component,
        args: [{ standalone: false, selector: 'mj-categories-list-view', template: `
    <div class="categories-list-view" mjFillContainer>
      <!-- Header with search -->
      <div class="list-header">
        <div class="header-title">
          <h2><i class="fa-solid fa-sitemap"></i> Action Categories</h2>
          <div class="results-count">{{ filteredCategories.length }} of {{ categories.length }} categories</div>
        </div>
        
        <div class="search-container">
          <kendo-textbox 
            placeholder="Search categories..." 
            [value]="searchTerm$.value"
            (valueChange)="onSearchChange($event)">
            <ng-template kendoTextBoxPrefixTemplate>
              <i class="fa-solid fa-search"></i>
            </ng-template>
          </kendo-textbox>
        </div>
      </div>

      <!-- Categories Grid -->
      <div class="categories-grid">
        @if (filteredCategories.length > 0) {
          @for (category of filteredCategories; track category.ID) {
            <div class="category-card" (click)="openCategory(category)">
              <div class="category-header">
                <div class="category-icon">
                  <i class="fa-solid fa-folder"></i>
                </div>
                <h3 class="category-name">{{ category.Name }}</h3>
              </div>
              
              @if (category.Description) {
                <div class="category-description">
                  {{ category.Description }}
                </div>
              }
              
              <div class="category-stats">
                <div class="stat-item">
                  <span class="stat-value">{{ category.actionCount || 0 }}</span>
                  <span class="stat-label">Total Actions</span>
                </div>
                <div class="stat-item">
                  <span class="stat-value active">{{ category.activeActionCount || 0 }}</span>
                  <span class="stat-label">Active</span>
                </div>
              </div>
              
              <div class="category-footer">
                <button kendoButton 
                  [fillMode]="'outline'" 
                  [size]="'small'"
                  (click)="viewActions(category, $event)">
                  <i class="fa-solid fa-cogs"></i> View Actions
                </button>
              </div>
            </div>
          }
        } @else if (!isLoading) {
          <div class="empty-state">
            <i class="fa-solid fa-sitemap"></i>
            <h3>No categories found</h3>
            <p>Try adjusting your search criteria</p>
          </div>
        }
      </div>

      @if (isLoading) {
        <div class="loading-overlay">
          <mj-loading [showText]="false" size="large"></mj-loading>
        </div>
      }
    </div>
  `, styles: ["\n    .categories-list-view {\n      display: flex;\n      flex-direction: column;\n      gap: 1.5rem;\n      padding: 1.5rem;\n      height: 100%;\n      overflow-y: auto;\n\n      .list-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        flex-wrap: wrap;\n        gap: 1rem;\n\n        .header-title {\n          display: flex;\n          align-items: baseline;\n          gap: 1rem;\n\n          h2 {\n            margin: 0;\n            font-size: 1.5rem;\n            font-weight: 600;\n            display: flex;\n            align-items: center;\n            gap: 0.5rem;\n\n            i {\n              color: var(--kendo-color-primary);\n            }\n          }\n\n          .results-count {\n            color: var(--kendo-color-subtle);\n            font-size: 0.875rem;\n          }\n        }\n\n        .search-container {\n          min-width: 250px;\n          \n          kendo-textbox {\n            width: 100%;\n          }\n        }\n      }\n\n      .categories-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n        gap: 1.5rem;\n        flex: 1;\n        align-content: start;\n\n        .category-card {\n          background: var(--kendo-color-surface);\n          border: 1px solid var(--kendo-color-border);\n          border-radius: 0.75rem;\n          padding: 1.5rem;\n          cursor: pointer;\n          transition: all 0.2s ease;\n          display: flex;\n          flex-direction: column;\n          gap: 1rem;\n\n          &:hover {\n            transform: translateY(-2px);\n            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n            border-color: var(--kendo-color-primary);\n          }\n\n          .category-header {\n            display: flex;\n            align-items: center;\n            gap: 1rem;\n\n            .category-icon {\n              display: flex;\n              align-items: center;\n              justify-content: center;\n              width: 3rem;\n              height: 3rem;\n              background: var(--kendo-color-primary-subtle);\n              border-radius: 0.5rem;\n\n              i {\n                color: var(--kendo-color-primary);\n                font-size: 1.25rem;\n              }\n            }\n\n            .category-name {\n              margin: 0;\n              font-size: 1.125rem;\n              font-weight: 600;\n              flex: 1;\n            }\n          }\n\n          .category-description {\n            color: var(--kendo-color-subtle);\n            font-size: 0.875rem;\n            line-height: 1.5;\n            display: -webkit-box;\n            -webkit-line-clamp: 2;\n            -webkit-box-orient: vertical;\n            overflow: hidden;\n          }\n\n          .category-stats {\n            display: flex;\n            gap: 2rem;\n            padding: 1rem;\n            background: var(--kendo-color-app-surface);\n            border-radius: 0.5rem;\n\n            .stat-item {\n              display: flex;\n              flex-direction: column;\n              gap: 0.25rem;\n\n              .stat-value {\n                font-size: 1.5rem;\n                font-weight: 700;\n                color: var(--kendo-color-on-app-surface);\n\n                &.active {\n                  color: var(--kendo-color-success);\n                }\n              }\n\n              .stat-label {\n                font-size: 0.75rem;\n                color: var(--kendo-color-subtle);\n                font-weight: 600;\n              }\n            }\n          }\n\n          .category-footer {\n            display: flex;\n            justify-content: flex-end;\n            margin-top: auto;\n          }\n        }\n      }\n\n      .empty-state {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        padding: 4rem;\n        text-align: center;\n        color: var(--kendo-color-subtle);\n\n        i {\n          font-size: 3rem;\n          margin-bottom: 1rem;\n          opacity: 0.5;\n        }\n\n        h3 {\n          margin: 0 0 0.5rem 0;\n          font-size: 1.25rem;\n          font-weight: 600;\n        }\n\n        p {\n          margin: 0;\n          font-size: 0.875rem;\n        }\n      }\n\n      .loading-overlay {\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        background: rgba(255, 255, 255, 0.8);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        z-index: 1000;\n      }\n    }\n\n    @media (max-width: 768px) {\n      .categories-list-view {\n        padding: 1rem;\n\n        .list-header {\n          flex-direction: column;\n          align-items: stretch;\n\n          .search-container {\n            min-width: unset;\n          }\n        }\n\n        .categories-grid {\n          grid-template-columns: 1fr;\n          gap: 1rem;\n        }\n      }\n    }\n  "] }]
    }], () => [], { openEntityRecord: [{
            type: Output
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CategoriesListViewComponent, { className: "CategoriesListViewComponent", filePath: "src/Actions/components/categories-list-view.component.ts", lineNumber: 303 }); })();
//# sourceMappingURL=categories-list-view.component.js.map