var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
    var _, done = false;
    for (var i = decorators.length - 1; i >= 0; i--) {
        var context = {};
        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
        if (kind === "accessor") {
            if (result === void 0) continue;
            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
            if (_ = accept(result.get)) descriptor.get = _;
            if (_ = accept(result.set)) descriptor.set = _;
            if (_ = accept(result.init)) initializers.unshift(_);
        }
        else if (_ = accept(result)) {
            if (kind === "field") initializers.unshift(_);
            else descriptor[key] = _;
        }
    }
    if (target) Object.defineProperty(target, contextIn.name, descriptor);
    done = true;
};
var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
    var useValue = arguments.length > 2;
    for (var i = 0; i < initializers.length; i++) {
        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
    }
    return useValue ? value : void 0;
};
import { DeesElement, customElement, html, css, cssManager, property, state, } from '@design.estate/dees-element';
let SzRouteListView = (() => {
    let _classDecorators = [customElement('sz-route-list-view')];
    let _classDescriptor;
    let _classExtraInitializers = [];
    let _classThis;
    let _classSuper = DeesElement;
    let _routes_decorators;
    let _routes_initializers = [];
    let _routes_extraInitializers = [];
    let _showActionsFilter_decorators;
    let _showActionsFilter_initializers = [];
    let _showActionsFilter_extraInitializers = [];
    let _searchQuery_decorators;
    let _searchQuery_initializers = [];
    let _searchQuery_extraInitializers = [];
    let _actionFilter_decorators;
    let _actionFilter_initializers = [];
    let _actionFilter_extraInitializers = [];
    let _enabledFilter_decorators;
    let _enabledFilter_initializers = [];
    let _enabledFilter_extraInitializers = [];
    var SzRouteListView = class extends _classSuper {
        static { _classThis = this; }
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _routes_decorators = [property({ type: Array })];
            _showActionsFilter_decorators = [property({ attribute: false })];
            _searchQuery_decorators = [state()];
            _actionFilter_decorators = [state()];
            _enabledFilter_decorators = [state()];
            __esDecorate(this, null, _routes_decorators, { kind: "accessor", name: "routes", static: false, private: false, access: { has: obj => "routes" in obj, get: obj => obj.routes, set: (obj, value) => { obj.routes = value; } }, metadata: _metadata }, _routes_initializers, _routes_extraInitializers);
            __esDecorate(this, null, _showActionsFilter_decorators, { kind: "accessor", name: "showActionsFilter", static: false, private: false, access: { has: obj => "showActionsFilter" in obj, get: obj => obj.showActionsFilter, set: (obj, value) => { obj.showActionsFilter = value; } }, metadata: _metadata }, _showActionsFilter_initializers, _showActionsFilter_extraInitializers);
            __esDecorate(this, null, _searchQuery_decorators, { kind: "accessor", name: "searchQuery", static: false, private: false, access: { has: obj => "searchQuery" in obj, get: obj => obj.searchQuery, set: (obj, value) => { obj.searchQuery = value; } }, metadata: _metadata }, _searchQuery_initializers, _searchQuery_extraInitializers);
            __esDecorate(this, null, _actionFilter_decorators, { kind: "accessor", name: "actionFilter", static: false, private: false, access: { has: obj => "actionFilter" in obj, get: obj => obj.actionFilter, set: (obj, value) => { obj.actionFilter = value; } }, metadata: _metadata }, _actionFilter_initializers, _actionFilter_extraInitializers);
            __esDecorate(this, null, _enabledFilter_decorators, { kind: "accessor", name: "enabledFilter", static: false, private: false, access: { has: obj => "enabledFilter" in obj, get: obj => obj.enabledFilter, set: (obj, value) => { obj.enabledFilter = value; } }, metadata: _metadata }, _enabledFilter_initializers, _enabledFilter_extraInitializers);
            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
            SzRouteListView = _classThis = _classDescriptor.value;
            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
        }
        static demo = () => html `
    <div style="padding: 24px; max-width: 1200px;">
      <sz-route-list-view
        .routes=${[
            {
                name: 'HTTPS Gateway',
                description: 'Main web gateway with TLS termination',
                enabled: true,
                tags: ['web', 'https', 'production'],
                match: { ports: 443, domains: ['*.example.com', 'serve.zone'], protocol: 'http' },
                action: {
                    type: 'forward',
                    targets: [{ host: '10.0.0.1', port: 8080 }],
                    tls: { mode: 'terminate', certificate: 'auto' },
                },
            },
            {
                name: 'SMTP Inbound',
                description: 'Email relay for incoming mail',
                enabled: true,
                tags: ['email', 'smtp'],
                match: { ports: 25, domains: 'mail.serve.zone' },
                action: {
                    type: 'forward',
                    targets: [{ host: '10.0.1.5', port: 25 }],
                },
            },
            {
                name: 'WebSocket API',
                description: 'Real-time WebSocket connections',
                enabled: true,
                tags: ['web', 'api'],
                match: { ports: 443, domains: 'ws.example.com', path: '/ws/*' },
                action: {
                    type: 'forward',
                    targets: [{ host: '10.0.0.3', port: 9090 }],
                    websocket: { enabled: true },
                    tls: { mode: 'terminate', certificate: 'auto' },
                },
            },
            {
                name: 'Maintenance Page',
                enabled: false,
                tags: ['web'],
                match: { ports: [80, 443], domains: 'old.example.com' },
                action: { type: 'socket-handler' },
            },
        ]}
      ></sz-route-list-view>
    </div>
  `;
        static demoGroups = ['Routes'];
        #routes_accessor_storage = __runInitializers(this, _routes_initializers, []);
        get routes() { return this.#routes_accessor_storage; }
        set routes(value) { this.#routes_accessor_storage = value; }
        #showActionsFilter_accessor_storage = (__runInitializers(this, _routes_extraInitializers), __runInitializers(this, _showActionsFilter_initializers, null));
        get showActionsFilter() { return this.#showActionsFilter_accessor_storage; }
        set showActionsFilter(value) { this.#showActionsFilter_accessor_storage = value; }
        #searchQuery_accessor_storage = (__runInitializers(this, _showActionsFilter_extraInitializers), __runInitializers(this, _searchQuery_initializers, ''));
        get searchQuery() { return this.#searchQuery_accessor_storage; }
        set searchQuery(value) { this.#searchQuery_accessor_storage = value; }
        #actionFilter_accessor_storage = (__runInitializers(this, _searchQuery_extraInitializers), __runInitializers(this, _actionFilter_initializers, 'all'));
        get actionFilter() { return this.#actionFilter_accessor_storage; }
        set actionFilter(value) { this.#actionFilter_accessor_storage = value; }
        #enabledFilter_accessor_storage = (__runInitializers(this, _actionFilter_extraInitializers), __runInitializers(this, _enabledFilter_initializers, 'all'));
        get enabledFilter() { return this.#enabledFilter_accessor_storage; }
        set enabledFilter(value) { this.#enabledFilter_accessor_storage = value; }
        get filteredRoutes() {
            return this.routes.filter((route) => {
                // Action type filter
                if (this.actionFilter !== 'all' && route.action.type !== this.actionFilter)
                    return false;
                // Enabled/disabled filter
                if (this.enabledFilter === 'enabled' && route.enabled === false)
                    return false;
                if (this.enabledFilter === 'disabled' && route.enabled !== false)
                    return false;
                // Search query
                if (this.searchQuery) {
                    const q = this.searchQuery.toLowerCase();
                    return this.routeMatchesSearch(route, q);
                }
                return true;
            });
        }
        routeMatchesSearch(route, q) {
            // Name and description
            if (route.name?.toLowerCase().includes(q))
                return true;
            if (route.description?.toLowerCase().includes(q))
                return true;
            // Domains
            if (route.match.domains) {
                const domains = Array.isArray(route.match.domains) ? route.match.domains : [route.match.domains];
                if (domains.some((d) => d.toLowerCase().includes(q)))
                    return true;
            }
            // Ports
            const portsStr = this.formatPortsForSearch(route.match.ports);
            if (portsStr.includes(q))
                return true;
            // Path
            if (route.match.path?.toLowerCase().includes(q))
                return true;
            // Client IPs
            if (route.match.clientIp?.some((ip) => ip.includes(q)))
                return true;
            // Targets
            if (route.action.targets) {
                for (const t of route.action.targets) {
                    const hosts = Array.isArray(t.host) ? t.host : [t.host];
                    if (hosts.some((h) => h.toLowerCase().includes(q)))
                        return true;
                }
            }
            // Tags
            if (route.tags?.some((t) => t.toLowerCase().includes(q)))
                return true;
            return false;
        }
        formatPortsForSearch(ports) {
            if (typeof ports === 'number')
                return String(ports);
            if (Array.isArray(ports)) {
                return ports
                    .map((p) => (typeof p === 'number' ? String(p) : `${p.from}-${p.to}`))
                    .join(' ');
            }
            return String(ports);
        }
        static styles = [
            cssManager.defaultStyles,
            css `
      :host {
        display: block;
      }

      .filter-bar {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: center;
        margin-bottom: 12px;
      }

      .search-input {
        flex: 1;
        min-width: 200px;
        padding: 8px 12px;
        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
        border-radius: 6px;
        font-size: 14px;
        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
        outline: none;
        transition: border-color 200ms ease;
      }

      .search-input::placeholder {
        color: ${cssManager.bdTheme('#a1a1aa', '#52525b')};
      }

      .search-input:focus {
        border-color: ${cssManager.bdTheme('#2563eb', '#3b82f6')};
      }

      .chip-group {
        display: flex;
        gap: 4px;
      }

      .chip {
        padding: 6px 12px;
        background: transparent;
        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
        border-radius: 9999px;
        font-size: 12px;
        font-weight: 500;
        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
        cursor: pointer;
        transition: all 200ms ease;
        white-space: nowrap;
      }

      .chip:hover {
        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
      }

      .chip.active {
        background: ${cssManager.bdTheme('#18181b', '#fafafa')};
        color: ${cssManager.bdTheme('#fafafa', '#18181b')};
        border-color: ${cssManager.bdTheme('#18181b', '#fafafa')};
      }

      .results-count {
        font-size: 13px;
        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
        margin-bottom: 16px;
      }

      .grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
        gap: 16px;
      }

      .grid sz-route-card {
        cursor: pointer;
      }

      .empty-state {
        text-align: center;
        padding: 48px 24px;
        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
        font-size: 14px;
      }

      .empty-state-icon {
        font-size: 32px;
        margin-bottom: 12px;
        opacity: 0.5;
      }
    `,
        ];
        render() {
            const filtered = this.filteredRoutes;
            return html `
      <div class="filter-bar">
        <input
          class="search-input"
          type="text"
          placeholder="Search routes by domain, IP, port, path, or tag..."
          .value=${this.searchQuery}
          @input=${(e) => {
                this.searchQuery = e.target.value;
            }}
        />
        <div class="chip-group">
          ${['all', 'forward', 'socket-handler'].map((type) => html `
              <button
                class="chip ${this.actionFilter === type ? 'active' : ''}"
                @click=${() => {
                this.actionFilter = type;
            }}
              >
                ${type === 'all' ? 'All' : type === 'forward' ? 'Forward' : 'Socket Handler'}
              </button>
            `)}
        </div>
        <div class="chip-group">
          ${['all', 'enabled', 'disabled'].map((status) => html `
              <button
                class="chip ${this.enabledFilter === status ? 'active' : ''}"
                @click=${() => {
                this.enabledFilter = status;
            }}
              >
                ${status.charAt(0).toUpperCase() + status.slice(1)}
              </button>
            `)}
        </div>
      </div>

      <div class="results-count">
        Showing ${filtered.length} of ${this.routes.length} routes
      </div>

      ${filtered.length > 0
                ? html `
            <div class="grid">
              ${filtered.map((route) => html `
                  <sz-route-card
                    .route=${route}
                    .showActions=${this.showActionsFilter?.(route) ?? false}
                    @click=${() => this.handleRouteClick(route)}
                  ></sz-route-card>
                `)}
            </div>
          `
                : html `
            <div class="empty-state">
              <div class="empty-state-icon">&#x1f50d;</div>
              <div>No routes match your filters</div>
            </div>
          `}
    `;
        }
        handleRouteClick(route) {
            this.dispatchEvent(new CustomEvent('route-click', {
                detail: route,
                bubbles: true,
                composed: true,
            }));
        }
        constructor() {
            super(...arguments);
            __runInitializers(this, _enabledFilter_extraInitializers);
        }
        static {
            __runInitializers(_classThis, _classExtraInitializers);
        }
    };
    return SzRouteListView = _classThis;
})();
export { SzRouteListView };
//# sourceMappingURL=data:application/json;base64, 