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, } from '@design.estate/dees-element';
let SzSettingsView = (() => {
    let _classDecorators = [customElement('sz-settings-view')];
    let _classDescriptor;
    let _classExtraInitializers = [];
    let _classThis;
    let _classSuper = DeesElement;
    let _settings_decorators;
    let _settings_initializers = [];
    let _settings_extraInitializers = [];
    let _currentUser_decorators;
    let _currentUser_initializers = [];
    let _currentUser_extraInitializers = [];
    var SzSettingsView = class extends _classSuper {
        static { _classThis = this; }
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _settings_decorators = [property({ type: Object })];
            _currentUser_decorators = [property({ type: String })];
            __esDecorate(this, null, _settings_decorators, { kind: "accessor", name: "settings", static: false, private: false, access: { has: obj => "settings" in obj, get: obj => obj.settings, set: (obj, value) => { obj.settings = value; } }, metadata: _metadata }, _settings_initializers, _settings_extraInitializers);
            __esDecorate(this, null, _currentUser_decorators, { kind: "accessor", name: "currentUser", static: false, private: false, access: { has: obj => "currentUser" in obj, get: obj => obj.currentUser, set: (obj, value) => { obj.currentUser = value; } }, metadata: _metadata }, _currentUser_initializers, _currentUser_extraInitializers);
            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
            SzSettingsView = _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: 800px;">
      <sz-settings-view
        .settings=${{
            darkMode: true,
            cloudflareToken: '',
            cloudflareZoneId: '',
            autoRenewCerts: true,
            renewalThreshold: 30,
            acmeEmail: 'certs@example.com',
            httpPort: 80,
            httpsPort: 443,
            forceHttps: true,
        }}
        currentUser="admin"
      ></sz-settings-view>
    </div>
  `;
        #settings_accessor_storage = __runInitializers(this, _settings_initializers, {
            darkMode: false,
            cloudflareToken: '',
            cloudflareZoneId: '',
            autoRenewCerts: true,
            renewalThreshold: 30,
            acmeEmail: '',
            httpPort: 80,
            httpsPort: 443,
            forceHttps: true,
        });
        get settings() { return this.#settings_accessor_storage; }
        set settings(value) { this.#settings_accessor_storage = value; }
        #currentUser_accessor_storage = (__runInitializers(this, _settings_extraInitializers), __runInitializers(this, _currentUser_initializers, ''));
        get currentUser() { return this.#currentUser_accessor_storage; }
        set currentUser(value) { this.#currentUser_accessor_storage = value; }
        static styles = [
            cssManager.defaultStyles,
            css `
      :host {
        display: block;
      }

      .section {
        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 24px;
      }

      .section-header {
        margin-bottom: 16px;
      }

      .section-title {
        font-size: 16px;
        font-weight: 600;
        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
      }

      .section-subtitle {
        font-size: 13px;
        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
        margin-top: 2px;
      }

      .form-group {
        margin-bottom: 16px;
      }

      .form-group:last-child {
        margin-bottom: 0;
      }

      .form-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid ${cssManager.bdTheme('#f4f4f5', '#27272a')};
      }

      .form-row:last-child {
        border-bottom: none;
      }

      .form-label-group {
        display: flex;
        flex-direction: column;
        gap: 2px;
      }

      .form-label {
        font-size: 14px;
        font-weight: 500;
        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
      }

      .form-hint {
        font-size: 12px;
        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
      }

      .input-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .input-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
      }

      input[type="text"],
      input[type="password"],
      input[type="email"],
      input[type="number"] {
        width: 100%;
        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;
        box-sizing: border-box;
      }

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

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

      .toggle-switch {
        position: relative;
        width: 44px;
        height: 24px;
        background: ${cssManager.bdTheme('#e4e4e7', '#27272a')};
        border-radius: 9999px;
        cursor: pointer;
        transition: background 200ms ease;
      }

      .toggle-switch.active {
        background: ${cssManager.bdTheme('#2563eb', '#3b82f6')};
      }

      .toggle-switch::after {
        content: '';
        position: absolute;
        top: 2px;
        left: 2px;
        width: 20px;
        height: 20px;
        background: white;
        border-radius: 50%;
        transition: transform 200ms ease;
      }

      .toggle-switch.active::after {
        transform: translateX(20px);
      }

      .password-section {
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid ${cssManager.bdTheme('#f4f4f5', '#27272a')};
      }

      .password-title {
        font-size: 14px;
        font-weight: 600;
        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
        margin-bottom: 12px;
      }

      .password-fields {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

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

      .actions {
        display: flex;
        justify-content: flex-end;
        gap: 12px;
        padding-top: 16px;
        border-top: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
        margin-top: 24px;
      }

      .button {
        padding: 10px 20px;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 200ms ease;
      }

      .button.secondary {
        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
      }

      .button.secondary:hover {
        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
      }

      .button.primary {
        background: ${cssManager.bdTheme('#18181b', '#fafafa')};
        border: none;
        color: ${cssManager.bdTheme('#fafafa', '#18181b')};
      }

      .button.primary:hover {
        opacity: 0.9;
      }
    `,
        ];
        render() {
            return html `
      <div class="section">
        <div class="section-header">
          <div class="section-title">Appearance</div>
          <div class="section-subtitle">Customize the look and feel</div>
        </div>
        <div class="form-row">
          <div class="form-label-group">
            <span class="form-label">Dark Mode</span>
            <span class="form-hint">Toggle dark mode on or off</span>
          </div>
          <div class="toggle-switch ${this.settings.darkMode ? 'active' : ''}" @click=${() => this.toggleDarkMode()}></div>
        </div>
      </div>

      <div class="section">
        <div class="section-header">
          <div class="section-title">Cloudflare Integration</div>
          <div class="section-subtitle">Configure Cloudflare API for DNS management</div>
        </div>
        <div class="input-group">
          <div class="form-group">
            <div class="field-label">API Token</div>
            <input type="password" placeholder="Enter Cloudflare API token" .value=${this.settings.cloudflareToken} @input=${(e) => this.updateSetting('cloudflareToken', e.target.value)}>
          </div>
          <div class="form-group">
            <div class="field-label">Zone ID (Optional)</div>
            <input type="text" placeholder="Default zone ID" .value=${this.settings.cloudflareZoneId} @input=${(e) => this.updateSetting('cloudflareZoneId', e.target.value)}>
          </div>
          <div class="form-hint">Get your API token from the Cloudflare dashboard with DNS edit permissions.</div>
        </div>
      </div>

      <div class="section">
        <div class="section-header">
          <div class="section-title">SSL/TLS Settings</div>
          <div class="section-subtitle">Configure certificate management</div>
        </div>
        <div class="form-row">
          <div class="form-label-group">
            <span class="form-label">Auto-Renew Certificates</span>
            <span class="form-hint">Automatically renew certificates before expiry</span>
          </div>
          <div class="toggle-switch ${this.settings.autoRenewCerts ? 'active' : ''}" @click=${() => this.toggleSetting('autoRenewCerts')}></div>
        </div>
        <div class="form-group" style="margin-top: 16px;">
          <div class="field-label">Renewal Threshold (days)</div>
          <input type="number" .value=${String(this.settings.renewalThreshold)} @input=${(e) => this.updateSetting('renewalThreshold', parseInt(e.target.value))}>
          <div class="form-hint">Renew certificates when they have fewer than this many days remaining.</div>
        </div>
        <div class="form-group">
          <div class="field-label">ACME Email</div>
          <input type="email" placeholder="admin@example.com" .value=${this.settings.acmeEmail} @input=${(e) => this.updateSetting('acmeEmail', e.target.value)}>
          <div class="form-hint">Email address for Let's Encrypt notifications.</div>
        </div>
      </div>

      <div class="section">
        <div class="section-header">
          <div class="section-title">Network Settings</div>
          <div class="section-subtitle">Configure network and proxy settings</div>
        </div>
        <div class="input-row">
          <div class="form-group">
            <div class="field-label">HTTP Port</div>
            <input type="number" .value=${String(this.settings.httpPort)} @input=${(e) => this.updateSetting('httpPort', parseInt(e.target.value))}>
          </div>
          <div class="form-group">
            <div class="field-label">HTTPS Port</div>
            <input type="number" .value=${String(this.settings.httpsPort)} @input=${(e) => this.updateSetting('httpsPort', parseInt(e.target.value))}>
          </div>
        </div>
        <div class="form-row">
          <div class="form-label-group">
            <span class="form-label">Force HTTPS</span>
            <span class="form-hint">Redirect all HTTP traffic to HTTPS</span>
          </div>
          <div class="toggle-switch ${this.settings.forceHttps ? 'active' : ''}" @click=${() => this.toggleSetting('forceHttps')}></div>
        </div>
      </div>

      <div class="section">
        <div class="section-header">
          <div class="section-title">Account</div>
          <div class="section-subtitle">Manage your account settings</div>
        </div>
        <div class="form-group">
          <div class="field-label">Current User</div>
          <div style="font-size: 14px; color: ${cssManager.bdTheme('#18181b', '#fafafa')};">${this.currentUser || 'Unknown'}</div>
        </div>
        <div class="password-section">
          <div class="password-title">Change Password</div>
          <div class="password-fields">
            <div>
              <div class="field-label">Current Password</div>
              <input type="password" id="currentPassword">
            </div>
            <div>
              <div class="field-label">New Password</div>
              <input type="password" id="newPassword">
            </div>
            <div>
              <div class="field-label">Confirm Password</div>
              <input type="password" id="confirmPassword">
            </div>
            <button class="button secondary" style="width: fit-content;" @click=${() => this.handleChangePassword()}>Update Password</button>
          </div>
        </div>
      </div>

      <div class="actions">
        <button class="button secondary" @click=${() => this.handleReset()}>Reset</button>
        <button class="button primary" @click=${() => this.handleSave()}>Save Settings</button>
      </div>
    `;
        }
        toggleDarkMode() {
            this.settings = { ...this.settings, darkMode: !this.settings.darkMode };
            this.dispatchEvent(new CustomEvent('setting-change', { detail: { key: 'darkMode', value: this.settings.darkMode }, bubbles: true, composed: true }));
        }
        toggleSetting(key) {
            this.settings[key] = !this.settings[key];
            this.settings = { ...this.settings };
        }
        updateSetting(key, value) {
            this.settings[key] = value;
            this.settings = { ...this.settings };
        }
        handleChangePassword() {
            const currentPassword = this.shadowRoot?.getElementById('currentPassword')?.value;
            const newPassword = this.shadowRoot?.getElementById('newPassword')?.value;
            const confirmPassword = this.shadowRoot?.getElementById('confirmPassword')?.value;
            this.dispatchEvent(new CustomEvent('change-password', {
                detail: { currentPassword, newPassword, confirmPassword },
                bubbles: true,
                composed: true
            }));
        }
        handleReset() {
            this.dispatchEvent(new CustomEvent('reset', { bubbles: true, composed: true }));
        }
        handleSave() {
            this.dispatchEvent(new CustomEvent('save', { detail: this.settings, bubbles: true, composed: true }));
        }
        constructor() {
            super(...arguments);
            __runInitializers(this, _currentUser_extraInitializers);
        }
        static {
            __runInitializers(_classThis, _classExtraInitializers);
        }
    };
    return SzSettingsView = _classThis;
})();
export { SzSettingsView };
//# sourceMappingURL=data:application/json;base64, 