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 * as plugins from '../../plugins.js';
import { DeesElement, property, html, customElement, css, cssManager, unsafeCSS, state, } from '@design.estate/dees-element';
import * as sharedStyles from '../../styles/shared.styles.js';
import { demoFunc } from './upladmin-monitor-form.demo.js';
let UpladminMonitorForm = (() => {
    let _classDecorators = [customElement('upladmin-monitor-form')];
    let _classDescriptor;
    let _classExtraInitializers = [];
    let _classThis;
    let _classSuper = DeesElement;
    let _monitor_decorators;
    let _monitor_initializers = [];
    let _monitor_extraInitializers = [];
    let _availableMonitors_decorators;
    let _availableMonitors_initializers = [];
    let _availableMonitors_extraInitializers = [];
    let _categories_decorators;
    let _categories_initializers = [];
    let _categories_extraInitializers = [];
    let _loading_decorators;
    let _loading_initializers = [];
    let _loading_extraInitializers = [];
    let _formData_decorators;
    let _formData_initializers = [];
    let _formData_extraInitializers = [];
    let _errors_decorators;
    let _errors_initializers = [];
    let _errors_extraInitializers = [];
    var UpladminMonitorForm = class extends _classSuper {
        static { _classThis = this; }
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _monitor_decorators = [property({ type: Object })];
            _availableMonitors_decorators = [property({ type: Array })];
            _categories_decorators = [property({ type: Array })];
            _loading_decorators = [property({ type: Boolean })];
            _formData_decorators = [state()];
            _errors_decorators = [state()];
            __esDecorate(this, null, _monitor_decorators, { kind: "accessor", name: "monitor", static: false, private: false, access: { has: obj => "monitor" in obj, get: obj => obj.monitor, set: (obj, value) => { obj.monitor = value; } }, metadata: _metadata }, _monitor_initializers, _monitor_extraInitializers);
            __esDecorate(this, null, _availableMonitors_decorators, { kind: "accessor", name: "availableMonitors", static: false, private: false, access: { has: obj => "availableMonitors" in obj, get: obj => obj.availableMonitors, set: (obj, value) => { obj.availableMonitors = value; } }, metadata: _metadata }, _availableMonitors_initializers, _availableMonitors_extraInitializers);
            __esDecorate(this, null, _categories_decorators, { kind: "accessor", name: "categories", static: false, private: false, access: { has: obj => "categories" in obj, get: obj => obj.categories, set: (obj, value) => { obj.categories = value; } }, metadata: _metadata }, _categories_initializers, _categories_extraInitializers);
            __esDecorate(this, null, _loading_decorators, { kind: "accessor", name: "loading", static: false, private: false, access: { has: obj => "loading" in obj, get: obj => obj.loading, set: (obj, value) => { obj.loading = value; } }, metadata: _metadata }, _loading_initializers, _loading_extraInitializers);
            __esDecorate(this, null, _formData_decorators, { kind: "accessor", name: "formData", static: false, private: false, access: { has: obj => "formData" in obj, get: obj => obj.formData, set: (obj, value) => { obj.formData = value; } }, metadata: _metadata }, _formData_initializers, _formData_extraInitializers);
            __esDecorate(this, null, _errors_decorators, { kind: "accessor", name: "errors", static: false, private: false, access: { has: obj => "errors" in obj, get: obj => obj.errors, set: (obj, value) => { obj.errors = value; } }, metadata: _metadata }, _errors_initializers, _errors_extraInitializers);
            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
            UpladminMonitorForm = _classThis = _classDescriptor.value;
            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
        }
        static demo = demoFunc;
        #monitor_accessor_storage = __runInitializers(this, _monitor_initializers, null);
        get monitor() { return this.#monitor_accessor_storage; }
        set monitor(value) { this.#monitor_accessor_storage = value; }
        #availableMonitors_accessor_storage = (__runInitializers(this, _monitor_extraInitializers), __runInitializers(this, _availableMonitors_initializers, []));
        get availableMonitors() { return this.#availableMonitors_accessor_storage; }
        set availableMonitors(value) { this.#availableMonitors_accessor_storage = value; }
        #categories_accessor_storage = (__runInitializers(this, _availableMonitors_extraInitializers), __runInitializers(this, _categories_initializers, []));
        get categories() { return this.#categories_accessor_storage; }
        set categories(value) { this.#categories_accessor_storage = value; }
        #loading_accessor_storage = (__runInitializers(this, _categories_extraInitializers), __runInitializers(this, _loading_initializers, false));
        get loading() { return this.#loading_accessor_storage; }
        set loading(value) { this.#loading_accessor_storage = value; }
        #formData_accessor_storage = (__runInitializers(this, _loading_extraInitializers), __runInitializers(this, _formData_initializers, {
            name: '',
            displayName: '',
            description: '',
            category: '',
            dependencies: [],
            currentStatus: 'operational',
        }));
        get formData() { return this.#formData_accessor_storage; }
        set formData(value) { this.#formData_accessor_storage = value; }
        #errors_accessor_storage = (__runInitializers(this, _formData_extraInitializers), __runInitializers(this, _errors_initializers, {}));
        get errors() { return this.#errors_accessor_storage; }
        set errors(value) { this.#errors_accessor_storage = value; }
        statusIcons = (__runInitializers(this, _errors_extraInitializers), {
            operational: 'lucide:CheckCircle',
            degraded: 'lucide:AlertTriangle',
            partial_outage: 'lucide:AlertOctagon',
            major_outage: 'lucide:XCircle',
            maintenance: 'lucide:Wrench',
        });
        static styles = [
            plugins.domtools.elementBasic.staticStyles,
            sharedStyles.commonStyles,
            css `
      :host {
        display: block;
        font-family: ${unsafeCSS(sharedStyles.fonts.base)};
      }

      .form-container {
        background: ${sharedStyles.colors.background.secondary};
        border: 1px solid ${sharedStyles.colors.border.default};
        border-radius: ${unsafeCSS(sharedStyles.borderRadius.lg)};
        overflow: hidden;
      }

      .form-header {
        display: flex;
        align-items: center;
        gap: ${unsafeCSS(sharedStyles.spacing.md)};
        padding: ${unsafeCSS(sharedStyles.spacing.lg)};
        border-bottom: 1px solid ${sharedStyles.colors.border.default};
        background: ${sharedStyles.colors.background.muted};
      }

      .form-header dees-icon {
        --icon-color: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
      }

      .form-title-wrapper {
        flex: 1;
      }

      .form-title {
        font-size: 18px;
        font-weight: 600;
        color: ${sharedStyles.colors.text.primary};
        margin: 0;
      }

      .form-subtitle {
        font-size: 13px;
        color: ${sharedStyles.colors.text.muted};
        margin-top: 4px;
      }

      .form-body {
        display: grid;
        gap: ${unsafeCSS(sharedStyles.spacing.lg)};
        padding: ${unsafeCSS(sharedStyles.spacing.lg)};
      }

      dees-form {
        display: contents;
      }

      .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: ${unsafeCSS(sharedStyles.spacing.md)};
      }

      @media (max-width: 600px) {
        .form-row {
          grid-template-columns: 1fr;
        }
      }

      .form-actions {
        display: flex;
        justify-content: flex-end;
        gap: ${unsafeCSS(sharedStyles.spacing.sm)};
        padding: ${unsafeCSS(sharedStyles.spacing.md)} ${unsafeCSS(sharedStyles.spacing.lg)};
        border-top: 1px solid ${sharedStyles.colors.border.default};
        background: ${sharedStyles.colors.background.muted};
      }

      .status-section {
        margin-top: ${unsafeCSS(sharedStyles.spacing.sm)};
      }

      .status-options {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: ${unsafeCSS(sharedStyles.spacing.sm)};
      }

      .status-option {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 16px;
        background: ${sharedStyles.colors.background.primary};
        border: 2px solid ${sharedStyles.colors.border.default};
        border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
        cursor: pointer;
        transition: all ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
      }

      .status-option:hover {
        border-color: ${sharedStyles.colors.border.strong};
        background: ${sharedStyles.colors.background.muted};
      }

      .status-option.selected {
        border-color: ${sharedStyles.colors.accent.primary};
        background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.05)', 'rgba(96, 165, 250, 0.1)')};
      }

      .status-option input {
        display: none;
      }

      .status-option dees-icon {
        flex-shrink: 0;
      }

      .status-option.operational dees-icon { --icon-color: ${sharedStyles.colors.status.operational}; }
      .status-option.degraded dees-icon { --icon-color: ${sharedStyles.colors.status.degraded}; }
      .status-option.partial_outage dees-icon { --icon-color: ${sharedStyles.colors.status.partialOutage}; }
      .status-option.major_outage dees-icon { --icon-color: ${sharedStyles.colors.status.majorOutage}; }
      .status-option.maintenance dees-icon { --icon-color: ${sharedStyles.colors.status.maintenance}; }

      .status-label {
        font-size: 14px;
        font-weight: 500;
        color: ${sharedStyles.colors.text.primary};
      }

      .field-label {
        display: block;
        font-size: 13px;
        font-weight: 500;
        color: ${sharedStyles.colors.text.primary};
        margin-bottom: ${unsafeCSS(sharedStyles.spacing.sm)};
      }

      .field-label.required::after {
        content: ' *';
        color: ${sharedStyles.colors.accent.danger};
      }

      /* Style dees-input components */
      dees-input-text,
      dees-input-dropdown {
        --dees-input-background: ${sharedStyles.colors.background.primary};
        --dees-input-border-color: ${sharedStyles.colors.border.default};
      }
    `
        ];
        async connectedCallback() {
            await super.connectedCallback();
            if (this.monitor) {
                this.formData = { ...this.monitor };
            }
        }
        updated(changedProperties) {
            if (changedProperties.has('monitor') && this.monitor) {
                this.formData = { ...this.monitor };
            }
        }
        render() {
            const isEdit = !!this.monitor?.id;
            const statusOptions = [
                { value: 'operational', label: 'Operational' },
                { value: 'degraded', label: 'Degraded' },
                { value: 'partial_outage', label: 'Partial Outage' },
                { value: 'major_outage', label: 'Major Outage' },
                { value: 'maintenance', label: 'Maintenance' },
            ];
            const categoryOptions = this.categories.map(cat => ({ key: cat, option: cat, payload: null }));
            const dependencyOptions = this.availableMonitors
                .filter(m => m.id !== this.monitor?.id)
                .map(m => ({ key: m.id, option: m.displayName || m.name, payload: null }));
            return html `
      <div class="form-container">
        <div class="form-header">
          <dees-icon .icon=${isEdit ? 'lucide:Pencil' : 'lucide:Plus'} .iconSize=${24}></dees-icon>
          <div class="form-title-wrapper">
            <h2 class="form-title">${isEdit ? 'Edit Monitor' : 'Create Monitor'}</h2>
            <p class="form-subtitle">
              ${isEdit ? 'Update the monitor configuration' : 'Add a new service to monitor'}
            </p>
          </div>
        </div>

        <div class="form-body">
          <dees-form>
            <div class="form-row">
              <dees-input-text
                key="name"
                label="Internal Name"
                .value="${this.formData.name}"
                placeholder="api-server"
                required
                description="Lowercase, no spaces. Used as identifier."
                @changeSubject="${this.handleNameChange}"
              ></dees-input-text>

              <dees-input-text
                key="displayName"
                label="Display Name"
                .value="${this.formData.displayName}"
                placeholder="API Server"
                required
                description="Human-readable name shown to users."
                @changeSubject="${this.handleDisplayNameChange}"
              ></dees-input-text>
            </div>

            <dees-input-text
              key="description"
              label="Description"
              inputType="textarea"
              .value="${this.formData.description || ''}"
              placeholder="Brief description of what this service does..."
              @changeSubject="${this.handleDescriptionChange}"
            ></dees-input-text>

            <div class="form-row">
              <dees-input-dropdown
                key="category"
                label="Category"
                .options="${categoryOptions}"
                .selectedOption="${this.formData.category || ''}"
                placeholder="Select category..."
                @selectedOption="${this.handleCategoryChange}"
              ></dees-input-dropdown>

              <dees-input-dropdown
                key="dependencies"
                label="Dependencies"
                .options="${dependencyOptions}"
                .selectedOptions="${this.formData.dependencies || []}"
                multiple
                description="Services this monitor depends on."
                @selectedOption="${this.handleDependenciesChange}"
              ></dees-input-dropdown>
            </div>

            <div class="status-section">
              <label class="field-label required">Current Status</label>
              <div class="status-options">
                ${statusOptions.map(opt => html `
                  <label
                    class="status-option ${opt.value} ${this.formData.currentStatus === opt.value ? 'selected' : ''}"
                    @click="${() => this.handleStatusChange(opt.value)}"
                  >
                    <input
                      type="radio"
                      name="currentStatus"
                      value="${opt.value}"
                      ?checked="${this.formData.currentStatus === opt.value}"
                    />
                    <dees-icon .icon=${this.statusIcons[opt.value]} .iconSize=${20}></dees-icon>
                    <span class="status-label">${opt.label}</span>
                  </label>
                `)}
              </div>
            </div>
          </dees-form>
        </div>

        <div class="form-actions">
          <dees-button type="discreet" @click="${this.handleCancel}" ?disabled="${this.loading}">
            Cancel
          </dees-button>
          <dees-button type="highlighted" @click="${this.handleSave}" ?disabled="${this.loading}">
            ${this.loading ? html `<dees-spinner .size=${16}></dees-spinner>` : ''}
            ${isEdit ? 'Update Monitor' : 'Create Monitor'}
          </dees-button>
        </div>
      </div>
    `;
        }
        handleNameChange(e) {
            this.formData = { ...this.formData, name: e.detail };
            if (this.errors.name) {
                this.errors = { ...this.errors, name: '' };
            }
        }
        handleDisplayNameChange(e) {
            this.formData = { ...this.formData, displayName: e.detail };
            if (this.errors.displayName) {
                this.errors = { ...this.errors, displayName: '' };
            }
        }
        handleDescriptionChange(e) {
            this.formData = { ...this.formData, description: e.detail };
        }
        handleCategoryChange(e) {
            this.formData = { ...this.formData, category: e.detail };
        }
        handleDependenciesChange(e) {
            const selected = e.detail;
            if (Array.isArray(selected)) {
                this.formData = { ...this.formData, dependencies: selected };
            }
            else if (selected) {
                // Single selection mode, convert to array
                this.formData = { ...this.formData, dependencies: [selected] };
            }
        }
        handleStatusChange(status) {
            this.formData = { ...this.formData, currentStatus: status };
        }
        validate() {
            const errors = {};
            if (!this.formData.name?.trim()) {
                errors.name = 'Name is required';
            }
            else if (!/^[a-z0-9-]+$/.test(this.formData.name)) {
                errors.name = 'Name must be lowercase letters, numbers, and hyphens only';
            }
            if (!this.formData.displayName?.trim()) {
                errors.displayName = 'Display name is required';
            }
            this.errors = errors;
            return Object.keys(errors).length === 0;
        }
        handleSave() {
            if (!this.validate()) {
                return;
            }
            this.dispatchEvent(new CustomEvent('monitorSave', {
                detail: { monitor: { ...this.formData } },
                bubbles: true,
                composed: true
            }));
        }
        handleCancel() {
            this.dispatchEvent(new CustomEvent('monitorCancel', {
                bubbles: true,
                composed: true
            }));
        }
        reset() {
            this.formData = {
                name: '',
                displayName: '',
                description: '',
                category: '',
                dependencies: [],
                currentStatus: 'operational',
            };
            this.errors = {};
        }
        setMonitor(monitor) {
            this.formData = { ...monitor };
            this.errors = {};
        }
        static {
            __runInitializers(_classThis, _classExtraInitializers);
        }
    };
    return UpladminMonitorForm = _classThis;
})();
export { UpladminMonitorForm };
//# sourceMappingURL=data:application/json;base64, 