import { __esDecorate, __runInitializers } from "tslib";
/* eslint-disable max-len */
import { html, LitElement } from 'lit';
import { state, property } from 'lit/decorators.js';
// Template metadata imports
import ecommercePlatformMetadata from '@api-client/domain-templates/meta/ecommerce-platform.json' with { type: 'json' };
import blogPublishingPlatformMetadata from '@api-client/domain-templates/meta/blog-publishing-platform.json' with { type: 'json' };
import healthcareManagementPlatformMetadata from '@api-client/domain-templates/meta/healthcare-management-platform.json' with { type: 'json' };
import financialServicesPlatformMetadata from '@api-client/domain-templates/meta/financial-services-platform.json' with { type: 'json' };
import educationManagementPlatformMetadata from '@api-client/domain-templates/meta/education-management-platform.json' with { type: 'json' };
import realEstateManagementPlatformMetadata from '@api-client/domain-templates/meta/real-estate-management-platform.json' with { type: 'json' };
import manufacturingPlatformMetadata from '@api-client/domain-templates/meta/manufacturing-platform.json' with { type: 'json' };
import hospitalityPlatformMetadata from '@api-client/domain-templates/meta/hospitality-platform.json' with { type: 'json' };
import legalServicesPlatformMetadata from '@api-client/domain-templates/meta/legal-services-platform.json' with { type: 'json' };
import nonProfitPlatformMetadata from '@api-client/domain-templates/meta/non-profit-platform.json' with { type: 'json' };
import iotSmartHomePlatformMetadata from '@api-client/domain-templates/meta/iot-smart-home-platform.json' with { type: 'json' };
import gamingPlatformMetadata from '@api-client/domain-templates/meta/gaming-platform.json' with { type: 'json' };
import { templatesByVertical } from '@api-client/domain-templates';
/**
 * Registry of all available template metadata
 */
export const TEMPLATE_METADATA_REGISTRY = {
    'ecommerce-platform': ecommercePlatformMetadata,
    'blog-publishing-platform': blogPublishingPlatformMetadata,
    'healthcare-management-platform': healthcareManagementPlatformMetadata,
    'financial-services-platform': financialServicesPlatformMetadata,
    'education-management-platform': educationManagementPlatformMetadata,
    'real-estate-management-platform': realEstateManagementPlatformMetadata,
    'manufacturing-platform': manufacturingPlatformMetadata,
    'hospitality-platform': hospitalityPlatformMetadata,
    'legal-services-platform': legalServicesPlatformMetadata,
    'non-profit-platform': nonProfitPlatformMetadata,
    'iot-smart-home-platform': iotSmartHomePlatformMetadata,
    'gaming-platform': gamingPlatformMetadata,
};
export const availableCategories = Object.keys(templatesByVertical);
/**
 * Generates an icon name for the DomainProperty that illustrate its primary purpose.
 */
export function getPropertyIcon(p) {
    if (p.primary) {
        return 'key';
    }
    switch (p.type) {
        // case 'integer':
        case 'number':
            return 'number';
        case 'date':
            return 'calendarToday';
        case 'time':
            return 'schedule';
        case 'datetime':
            return 'event';
        case 'boolean':
            return 'checkCircle';
        case 'binary':
            return 'draft';
        default:
            return 'textFields';
    }
}
function searchTemplates(query) {
    const searchTerm = query.toLowerCase();
    return Object.values(templatesByVertical)
        .flat()
        .filter((template) => template.name.toLowerCase().includes(searchTerm) ||
        template.description.toLowerCase().includes(searchTerm) ||
        template.tags.some((tag) => tag.toLowerCase().includes(searchTerm)));
}
function getVerticalName(id) {
    switch (id) {
        case 'businessServices':
            return 'Business Services';
        case 'educationTraining':
            return 'Education & Training';
        case 'healthcareLifeSciences':
            return 'Healthcare & Life Sciences';
        case 'manufacturingLogistics':
            return 'Manufacturing & Logistics';
        case 'publicSector':
            return 'Public Sector';
        case 'realEstateConstruction':
            return 'Real Estate & Construction';
        case 'technologyMedia':
            return 'Technology & Media';
        default:
            return id;
    }
}
let DomainTemplateBrowser = (() => {
    let _classSuper = LitElement;
    let _query_decorators;
    let _query_initializers = [];
    let _query_extraInitializers = [];
    let _category_decorators;
    let _category_initializers = [];
    let _category_extraInitializers = [];
    let _templates_decorators;
    let _templates_initializers = [];
    let _templates_extraInitializers = [];
    let _previewTemplate_decorators;
    let _previewTemplate_initializers = [];
    let _previewTemplate_extraInitializers = [];
    return class DomainTemplateBrowser extends _classSuper {
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _query_decorators = [property({ type: String })];
            _category_decorators = [property({ type: String })];
            _templates_decorators = [state()];
            _previewTemplate_decorators = [state()];
            __esDecorate(this, null, _query_decorators, { kind: "accessor", name: "query", static: false, private: false, access: { has: obj => "query" in obj, get: obj => obj.query, set: (obj, value) => { obj.query = value; } }, metadata: _metadata }, _query_initializers, _query_extraInitializers);
            __esDecorate(this, null, _category_decorators, { kind: "accessor", name: "category", static: false, private: false, access: { has: obj => "category" in obj, get: obj => obj.category, set: (obj, value) => { obj.category = value; } }, metadata: _metadata }, _category_initializers, _category_extraInitializers);
            __esDecorate(this, null, _templates_decorators, { kind: "accessor", name: "templates", static: false, private: false, access: { has: obj => "templates" in obj, get: obj => obj.templates, set: (obj, value) => { obj.templates = value; } }, metadata: _metadata }, _templates_initializers, _templates_extraInitializers);
            __esDecorate(this, null, _previewTemplate_decorators, { kind: "accessor", name: "previewTemplate", static: false, private: false, access: { has: obj => "previewTemplate" in obj, get: obj => obj.previewTemplate, set: (obj, value) => { obj.previewTemplate = value; } }, metadata: _metadata }, _previewTemplate_initializers, _previewTemplate_extraInitializers);
            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
        }
        #query_accessor_storage = __runInitializers(this, _query_initializers, void 0);
        /**
         * The user entered search query to filter the templates.
         * If not set, all templates are shown (unless filtered by category).
         * @attribute
         */
        get query() { return this.#query_accessor_storage; }
        set query(value) { this.#query_accessor_storage = value; }
        #category_accessor_storage = (__runInitializers(this, _query_extraInitializers), __runInitializers(this, _category_initializers, void 0));
        /**
         * The selected template category to filter the list.
         * If not set, all categories are included.
         * @attribute
         */
        get category() { return this.#category_accessor_storage; }
        set category(value) { this.#category_accessor_storage = value; }
        #templates_accessor_storage = (__runInitializers(this, _category_extraInitializers), __runInitializers(this, _templates_initializers, [...Object.values(templatesByVertical)].flat()
        /**
         * The currently previewed template. When set, the component renders the preview view instead of the list.
         */
        ));
        /**
         * The internal list of filtered templates to render in the UI.
         * This is computed based on `query` and `category`.
         */
        get templates() { return this.#templates_accessor_storage; }
        set templates(value) { this.#templates_accessor_storage = value; }
        #previewTemplate_accessor_storage = (__runInitializers(this, _templates_extraInitializers), __runInitializers(this, _previewTemplate_initializers, void 0));
        /**
         * The currently previewed template. When set, the component renders the preview view instead of the list.
         */
        get previewTemplate() { return this.#previewTemplate_accessor_storage; }
        set previewTemplate(value) { this.#previewTemplate_accessor_storage = value; }
        /**
         * Handles keydown events on the search input.
         * Triggers a search on Enter or resets on Escape.
         */
        handleSearchKeydown(e) {
            const input = e.currentTarget;
            const value = input.value.trim();
            if (e.key === 'Enter' && value) {
                this.search(value);
            }
            else if (e.key === 'Escape') {
                e.preventDefault();
                e.stopPropagation();
                input.value = '';
                this.search();
            }
        }
        /**
         * Performs an in-memory search for templates matching the provided query.
         * Updates the `templates` state with the search results.
         *
         * @param value The search query. If empty, resets the search.
         */
        search(value) {
            this.query = value;
            if (!value) {
                this.templates = [...Object.values(templatesByVertical)].flat();
            }
            else {
                this.templates = searchTemplates(value);
            }
        }
        handleFilterClick(e) {
            const target = e.target;
            const value = target.dataset.value;
            // Toggle category selection
            if (this.category === value) {
                return;
            }
            if (value === '') {
                this.category = undefined;
                this.templates = [...Object.values(templatesByVertical)].flat();
            }
            else {
                this.category = value;
                this.templates = templatesByVertical[this.category].flat();
            }
        }
        handleTemplateSelect(e) {
            const templateId = e.currentTarget.dataset.id;
            if (!templateId) {
                return;
            }
            // Dispatch selection event
            this.dispatchEvent(new CustomEvent('selectionchange', {
                detail: { selected: templateId },
                bubbles: false,
            }));
        }
        handleTemplatePreview(e) {
            e.stopPropagation();
            const templateId = e.currentTarget.dataset.id;
            if (!templateId) {
                return;
            }
            const value = TEMPLATE_METADATA_REGISTRY[templateId];
            if (!value) {
                return;
            }
            this.previewTemplate = value;
        }
        handleClosePreview() {
            this.previewTemplate = undefined;
        }
        render() {
            if (this.previewTemplate) {
                return this.renderPreviewMode();
            }
            return html `
      <div class="controls">${this.renderTopControls()} ${this.renderCategoryFilters()}</div>
      ${this.templates.length > 0 ? this.renderTemplatesGrid() : this.renderEmptyState()}
    `;
        }
        renderTopControls() {
            return html `
      <div class="top-row">
        <div class="search-group">${this.renderSearchInput()}</div>
      </div>
    `;
        }
        renderSearchInput() {
            return html `
      <ui-outlined-text-field
        id="template-search"
        label="Search templates..."
        type="search"
        class="search"
        .value="${this.query ?? ''}"
        @keydown="${this.handleSearchKeydown}"
      >
        <ui-icon slot="prefix">search</ui-icon>
      </ui-outlined-text-field>
    `;
        }
        renderCategoryFilters() {
            return html `
      <div class="category-tabs">
        <ui-button-group type="connected">
          <ui-button
            color="tonal"
            size="s"
            toggle
            data-value=""
            ?selected="${!this.category}"
            @click="${this.handleFilterClick}"
          >
            All
          </ui-button>
          ${availableCategories.map((category) => {
                const isSelected = this.category === category;
                return html `<ui-button
              color="tonal"
              size="s"
              toggle
              data-value="${category}"
              ?selected="${isSelected}"
              @click="${this.handleFilterClick}"
            >
              ${getVerticalName(category)}
            </ui-button>`;
            })}
        </ui-button-group>
      </div>
    `;
        }
        renderTemplatesGrid() {
            return html `
      <div class="templates-grid">${this.templates.map((template) => this.renderTemplateCard(template))}</div>
    `;
        }
        renderTemplateCard(template) {
            // Use available properties from DomainTemplate interface
            const templateName = template.name || 'Unnamed Template';
            const templateDescription = template.description || 'No description available';
            return html `
      <div class="template-card">
        <div class="meta">
          <span class="value body-small" title="Updated at">${new Date(template.updatedAt).toLocaleDateString()}</span>
          <span class="value body-small" title="Version">v${template.version}</span>
        </div>
        <h3 class="template-title display-small">${templateName}</h3>
        <p class="template-description body-medium">${templateDescription}</p>

        <div class="template-actions">
          <ui-button data-id="${template.id}" color="outlined" size="s" @click="${this.handleTemplatePreview}">
            Details
          </ui-button>
          <ui-button color="filled" size="s" data-id="${template.id}" @click="${this.handleTemplateSelect}">
            Use template
          </ui-button>
        </div>
      </div>
    `;
        }
        renderEmptyState() {
            const message = this.query
                ? `No templates found for "${this.query}"`
                : this.category
                    ? `No templates found in "${this.category}" category`
                    : 'No templates available';
            const description = this.query || this.category ? 'Try adjusting your search or filters' : 'Templates will appear here when available';
            return html `
      <div class="empty-state">
        <ui-icon class="empty-icon">search_off</ui-icon>
        <h3 class="empty-title title-large">${message}</h3>
        <p class="empty-description body-large">${description}</p>
      </div>
    `;
        }
        renderPreviewMode() {
            return html `
      <div class="preview-header">
        <ui-button color="text" @click="${this.handleClosePreview}">
          <ui-icon slot="icon">arrow_back</ui-icon>
          Back to Templates
        </ui-button>
      </div>
      <div class="preview-main">${this.renderTemplateDetails(this.previewTemplate)}</div>
    `;
        }
        renderTemplateDetails(template) {
            return html `
      <div class="template-details">
        <h1 class="template-details-title display-small">${template.name}</h1>
        <div class="template-details-header">
          <div class="template-details-info">
            <p class="template-details-description">${template.description}</p>
            <div class="template-metadata">
              <div class="metadata-item">
                <span class="metadata-label">Author:</span>
                <span class="metadata-value">${template.author}</span>
              </div>
              <div class="metadata-item">
                <span class="metadata-label">Version:</span>
                <span class="metadata-value">${template.version}</span>
              </div>
              <div class="metadata-item">
                <span class="metadata-label">Created:</span>
                <span class="metadata-value">${new Date(template.createdAt).toLocaleDateString()}</span>
              </div>
              <div class="metadata-item">
                <span class="metadata-label">Updated:</span>
                <span class="metadata-value">${new Date(template.updatedAt).toLocaleDateString()}</span>
              </div>
            </div>
            <div class="template-tags">
              ${template.tags.map((tag) => html `<span class="template-tag">${tag}</span>`)}
            </div>
          </div>
          <div class="template-details-actions">
            <ui-button color="filled" size="s" data-id="${template.id}" @click="${this.handleTemplateSelect}">
              <ui-icon slot="icon">download</ui-icon>
              Use This Template
            </ui-button>
          </div>
        </div>

        <div class="template-structure">
          <h2 class="structure-title title-large">Data Domain Structure</h2>
          ${this.renderDomainStructure(template)}
        </div>
      </div>
    `;
        }
        renderDomainStructure(template) {
            const { structure } = template;
            const { namespaces } = structure;
            return html `<div class="domain-structure">${this.renderNamespaces(namespaces)}</div>`;
        }
        renderNamespaces(namespaces) {
            return html `
      <div class="namespaces-section">
        <h3 class="title-medium">Namespaces</h3>
        ${namespaces.map((namespace) => html `
            <div class="namespace-item">
              <div class="namespace-header">
                <ui-icon class="namespace-icon" icon="schemaNamespace"></ui-icon>
                <h4 class="title-small">${namespace.displayName || namespace.name}</h4>
              </div>
              ${namespace.description
                ? html `<p class="namespace-description body-medium">${namespace.description}</p>`
                : ''}
              ${this.renderModels(namespace.models)}
            </div>
          `)}
      </div>
    `;
        }
        renderModels(models) {
            return html `
      <div class="models-section">
        ${models.map((model) => html `
            <div class="domain-model">
              <div class="domain-model-header">
                <ui-icon class="model-icon" icon="schemaModel"></ui-icon>
                <h5 class="title-small">${model.displayName || model.name}</h5>
              </div>
              ${model.description ? html `<p class="model-description body-medium">${model.description}</p>` : ''}
              <div class="model-entities">${model.entities.map((entity) => this.renderDomainEntity(entity))}</div>
            </div>
          `)}
      </div>
    `;
        }
        renderDomainEntity(entity) {
            return html `
      <div class="domain-entity">
        <div class="entity-header">
          <div class="entity-title">
            <ui-icon class="entity-icon" icon="schemaEntity"></ui-icon>
            <h6 class="entity-name label-large">${entity.displayName || entity.name}</h6>
            ${entity.deprecated ? html `<span class="deprecated-badge">Deprecated</span>` : ''}
          </div>
          ${entity.description ? html `<p class="entity-description body-medium">${entity.description}</p>` : ''}
        </div>
        ${entity.semantics?.length > 0
                ? html `
              <div class="entity-semantics">
                <span class="semantics-label">Semantics:</span>
                ${entity.semantics.map((semantic) => html `<span class="semantic-tag">${semantic}</span>`)}
              </div>
            `
                : ''}
        ${entity.properties?.length > 0
                ? html `
              <div class="entity-section">
                <h5 class="section-title title-small">Properties (${entity.propertyCount})</h5>
                <div class="properties-list">${entity.properties.map((prop) => this.renderProperty(prop))}</div>
              </div>
            `
                : ''}
        ${entity.associations?.length > 0
                ? html `
              <div class="entity-section">
                <h5 class="section-title title-small">Associations (${entity.associationCount})</h5>
                <div class="associations-list">
                  ${entity.associations.map((assoc) => this.renderAssociation(assoc))}
                </div>
              </div>
            `
                : ''}
      </div>
    `;
        }
        renderProperty(property) {
            const badges = [];
            if (property.required)
                badges.push('Required');
            if (property.primary)
                badges.push('Primary');
            if (property.unique)
                badges.push('Unique');
            if (property.readOnly)
                badges.push('Read-only');
            if (property.writeOnly)
                badges.push('Write-only');
            if (property.multiple)
                badges.push('Multiple');
            if (property.deprecated)
                badges.push('Deprecated');
            const icon = getPropertyIcon(property);
            return html `
      <div class="property-item ${property.deprecated ? 'deprecated' : ''}">
        <div class="property-header">
          <ui-icon class="property-icon" .icon=${icon}></ui-icon>
          <span class="label-large">${property.displayName || property.name}</span>
          <span class="property-type body-small">${property.type}</span>
        </div>
        ${property.description ? html `<p class="property-description body-medium">${property.description}</p>` : ''}
        ${badges.length > 0
                ? html `<div class="property-badges">
              ${badges.map((badge) => html `<span class="property-badge body-small">${badge}</span>`)}
            </div>`
                : ''}
        ${property.defaultValue
                ? html `<div class="property-default">Default: <code>${property.defaultValue}</code></div>`
                : ''}
        ${property.enumValues && property.enumValues.length > 0
                ? html `<div class="property-enum">
              Values: ${property.enumValues.map((val) => html `<code>${val}</code>`)}
            </div>`
                : ''}
        ${property.semantics?.length > 0
                ? html `
              <div class="property-semantics">
                ${property.semantics.map((semantic) => html `<span class="semantic-tag">${semantic}</span>`)}
              </div>
            `
                : ''}
      </div>
    `;
        }
        renderAssociation(association) {
            const badges = [];
            if (association.required)
                badges.push('Required');
            if (association.multiple)
                badges.push('Multiple');
            if (association.readOnly)
                badges.push('Read-only');
            return html `
      <div class="association-item">
        <div class="association-header">
          <ui-icon class="association-icon">link</ui-icon>
          <span class="label-large">${association.displayName || association.name}</span>
          <span class="association-targets">${association.targetEntities.join(', ')}</span>
        </div>
        ${association.description ? html `<p class="association-description">${association.description}</p>` : ''}
        ${badges.length > 0
                ? html `<div class="association-badges">
              ${badges.map((badge) => html `<span class="association-badge">${badge}</span>`)}
            </div>`
                : ''}
        ${association.semantics?.length > 0
                ? html `
              <div class="association-semantics">
                ${association.semantics.map((semantic) => html `<span class="semantic-tag">${semantic}</span>`)}
              </div>
            `
                : ''}
      </div>
    `;
        }
        constructor() {
            super(...arguments);
            __runInitializers(this, _previewTemplate_extraInitializers);
        }
    };
})();
/**
 * A browser component for exploring and selecting domain templates.
 * It provides the UI for searching, filtering, previewing, and selecting data domain templates.
 *
 * It manages the filtering state internally but allows property binding for query and category.
 *
 * @fires selectionchange - Dispatched when the user selects a template item. The detail object contains the `selected`
 *                          status which is the template ID (e.g. `CustomEvent<{ selected: string }>`).
 */
export default DomainTemplateBrowser;
//# sourceMappingURL=DomainTemplateBrowser.js.map