import { DeesElement, property, html, customElement, type TemplateResult, state } from '@design.estate/dees-element';
import { WccDashboard } from './wcc-dashboard.js';
import type { TTemplateFactory } from './wcctools.helpers.js';
import './wcc-record-button.js';
import './wcc-recording-panel.js';

export type TPropertyType = 'String' | 'Number' | 'Boolean' | 'Object' | 'Enum' | 'Array';

export type TEnvironment = 'native' | 'desktop' | 'tablet' | 'phablet' | 'phone';
export type TTheme = 'bright' | 'dark';

let environment: TEnvironment = 'native';

export const setEnvironment = (envArg) => {
  environment = envArg;
};

@customElement('wcc-properties')
export class WccProperties extends DeesElement {
  @property({
    type: WccDashboard
  })
  accessor dashboardRef: WccDashboard;

  @property()
  accessor selectedItem: TTemplateFactory | DeesElement;

  @property()
  accessor selectedViewport: TEnvironment = 'native';

  @property()
  accessor selectedTheme: TTheme = 'dark';

  @property()
  accessor warning: string = null;

  @property()
  accessor isNative: boolean = false;

  @property({ type: Number })
  accessor sidebarWidth: number = 200;

  @state()
  accessor propertyContent: TemplateResult[] = [];

  @state()
  accessor editingProperties: Array<{
    id: string;
    name: string;
    value: any;
    element: HTMLElement;
    editorValue: string;
    editorError: string;
  }> = [];

  // Recording coordination state
  @state()
  accessor showRecordingPanel: boolean = false;

  @state()
  accessor isRecording: boolean = false;

  @state()
  accessor recordingDuration: number = 0;

  // Delayed hide for native mode transition
  @state()
  accessor isHidden: boolean = false;

  public editorHeight: number = 300;

  public render(): TemplateResult {
    return html`
      <style>
        :host {
          /* CSS Variables - Always dark theme */
          --background: #0a0a0a;
          --foreground: #e5e5e5;
          --card: #0f0f0f;
          --card-foreground: #f0f0f0;
          --muted: #1a1a1a;
          --muted-foreground: #666;
          --accent: #222;
          --accent-foreground: #fff;
          --border: rgba(255, 255, 255, 0.06);
          --input: #141414;
          --primary: #3b82f6;
          --primary-foreground: #fff;
          --ring: #3b82f6;
          --radius: 4px;
          --radius-sm: 2px;
          --radius-md: 4px;
          --radius-lg: 6px;

          /* Base styles */
          font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
          box-sizing: border-box;
          position: absolute;
          left: ${this.sidebarWidth}px;
          height: ${this.editingProperties.length > 0 ? 100 + this.editorHeight : 100}px;
          bottom: 0px;
          right: 0px;
          overflow: hidden;
          background: var(--background);
          color: var(--foreground);
          display: ${this.isHidden ? 'none' : 'block'};
        }
        .grid {
          display: grid;
          grid-template-columns: 1fr 150px 350px 100px;
          height: 100%;
        }
        .properties {
          background: transparent;
          overflow-y: auto;
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          border-right: 1px solid var(--border);
          align-content: start;
        }

        .material-symbols-outlined {
          font-family: 'Material Symbols Outlined';
          font-weight: normal;
          font-style: normal;
          font-size: 24px;  /* Preferred icon size */
          display: inline-block;
          line-height: 1;
          text-transform: none;
          letter-spacing: normal;
          word-wrap: normal;
          white-space: nowrap;
          direction: ltr;
          font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
        }

        .properties .property {
          padding: 0.4rem;
          background: transparent;
          border-right: 1px solid var(--border);
          border-bottom: 1px solid var(--border);
          transition: all 0.15s ease;
        }
        
        .properties .property:hover {
          background: rgba(255, 255, 255, 0.02);
        }
        
        .properties .property-label {
          font-size: 0.65rem;
          font-weight: 400;
          color: #888;
          margin-bottom: 0.2rem;
          text-transform: capitalize;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .properties input[type="text"],
        .properties input[type="number"],
        .properties select {
          display: block;
          width: 100%;
          padding: 0.25rem 0.4rem;
          background: var(--input);
          border: 1px solid transparent;
          color: var(--foreground);
          border-radius: var(--radius-sm);
          font-size: 0.7rem;
          transition: all 0.15s ease;
          outline: none;
        }
        
        .properties input[type="text"]:focus,
        .properties input[type="number"]:focus,
        .properties select:focus {
          border-color: var(--primary);
          background: rgba(59, 130, 246, 0.1);
        }
        
        .properties input[type="checkbox"] {
          width: 1rem;
          height: 1rem;
          cursor: pointer;
          accent-color: var(--primary);
        }
        
        .properties .editor-button {
          padding: 0.25rem 0.5rem;
          background: var(--input);
          border: 1px solid transparent;
          border-radius: var(--radius-sm);
          color: var(--foreground);
          font-size: 0.7rem;
          cursor: pointer;
          transition: all 0.15s ease;
          text-align: center;
        }
        
        .properties .editor-button:hover {
          border-color: var(--primary);
          background: rgba(59, 130, 246, 0.1);
        }

        .viewportSelector,
        .themeSelector,
        .shareSelector {
          user-select: none;
          background: transparent;
          display: flex;
          flex-direction: column;
          border-right: 1px solid var(--border);
        }
        .selectorButtons2 {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          flex: 1;
        }
        .selectorButtons4 {
          display: grid;
          grid-template-columns: repeat(4, minmax(0, 1fr));
          flex: 1;
        }
        .selectorButtons5 {
          display: grid;
          grid-template-columns: repeat(5, minmax(0, 1fr));
          flex: 1;
        }
        .selectorButtons1 {
          display: grid;
          grid-template-columns: minmax(0, 1fr);
          flex: 1;
        }
        .button {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          padding: 0.5rem 0.25rem;
          text-align: center;
          background: transparent;
          border: 1px solid var(--border);
          transition: all 0.15s ease;
          cursor: pointer;
          font-size: 0.65rem;
          gap: 0.2rem;
          color: #999;
        }
        
        .button:hover {
          background: rgba(59, 130, 246, 0.05);
          color: #bbb;
        }

        .button.selected {
          background: rgba(59, 130, 246, 0.15);
          color: var(--primary);
          border-color: rgba(59, 130, 246, 0.3);
        }

        .button.selected:hover {
          background: rgba(59, 130, 246, 0.2);
        }
        
        .button .material-symbols-outlined {
          font-size: 18px;
          font-variation-settings: 'FILL' 0, 'wght' 300;
          min-width: 18px;
          min-height: 18px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
        }
        
        .button.selected .material-symbols-outlined {
          font-variation-settings: 'FILL' 1, 'wght' 400;
        }

        .panelheading {
          padding: 0.3rem 0.5rem;
          font-weight: 500;
          font-size: 0.65rem;
          background: rgba(59, 130, 246, 0.03);
          border-bottom: 1px solid var(--border);
          color: #888;
          text-transform: uppercase;
          letter-spacing: 0.08em;
        }
        .docs {
          display: flex;
          align-items: center;
          justify-content: center;
          text-transform: uppercase;
          background: transparent;
          cursor: pointer;
          font-size: 0.65rem;
          font-weight: 500;
          letter-spacing: 0.08em;
          transition: all 0.15s ease;
          color: #666;
        }

        .docs:hover {
          background: rgba(59, 130, 246, 0.05);
          color: #999;
        }

        .warning {
          position: absolute;
          background: rgba(20, 20, 20, 0.8);
          color: #888;
          top: 0.5rem;
          bottom: 0.5rem;
          left: 0.5rem;
          right: calc(600px + 0.5rem);
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 1.5rem;
          font-size: 0.85rem;
          border-radius: var(--radius-md);
          border: 1px solid var(--border);
          backdrop-filter: blur(8px);
        }

        .advanced-editor-container {
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          height: ${this.editorHeight}px;
          background: #050505;
          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
          display: flex;
          flex-direction: column;
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
        }

        .editor-header-bar {
          padding: 0.5rem 0.75rem;
          background: transparent;
          border-bottom: 1px solid rgba(255, 255, 255, 0.05);
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 36px;
        }

        .editor-header-title {
          font-size: 0.7rem;
          font-weight: 500;
          color: #666;
          text-transform: uppercase;
          letter-spacing: 0.08em;
        }

        .editor-close-all {
          padding: 0.25rem 0.5rem;
          background: transparent;
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: var(--radius-sm);
          color: #999;
          font-size: 0.65rem;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.15s ease;
        }

        .editor-close-all:hover {
          background: rgba(255, 255, 255, 0.05);
          border-color: rgba(255, 255, 255, 0.12);
          color: #f87171;
        }

        .editors-container {
          flex: 1;
          display: flex;
          overflow-x: auto;
          overflow-y: hidden;
          gap: 0;
          background: rgba(255, 255, 255, 0.02);
          padding: 0.75rem;
        }

        .editors-container::-webkit-scrollbar {
          height: 8px;
        }

        .editors-container::-webkit-scrollbar-track {
          background: rgba(255, 255, 255, 0.02);
          border-radius: 4px;
        }

        .editors-container::-webkit-scrollbar-thumb {
          background: rgba(255, 255, 255, 0.08);
          border-radius: 4px;
        }

        .editors-container::-webkit-scrollbar-thumb:hover {
          background: rgba(255, 255, 255, 0.12);
        }

        .editor-instance {
          min-width: 320px;
          flex: 1;
          max-width: 480px;
          background: rgba(10, 10, 10, 0.6);
          display: flex;
          flex-direction: column;
          border-radius: var(--radius);
          overflow: hidden;
          margin-right: 0.75rem;
          border: 1px solid rgba(255, 255, 255, 0.06);
          transition: all 0.2s ease;
        }

        .editor-instance:hover {
          border-color: rgba(255, 255, 255, 0.1);
        }

        .editor-instance:last-child {
          margin-right: 0;
        }

        .editor-header {
          padding: 0.5rem 0.75rem;
          background: rgba(255, 255, 255, 0.02);
          border-bottom: 1px solid rgba(255, 255, 255, 0.05);
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 36px;
        }

        .editor-title {
          font-size: 0.75rem;
          font-weight: 500;
          color: #999;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-family: 'Consolas', 'Monaco', monospace;
        }

        .editor-actions {
          display: flex;
          gap: 0.25rem;
        }

        .editor-button {
          width: 24px;
          height: 24px;
          padding: 0;
          background: transparent;
          border: none;
          color: #666;
          font-size: 1rem;
          cursor: pointer;
          transition: all 0.15s ease;
          border-radius: var(--radius-sm);
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .editor-button:hover {
          background: rgba(255, 255, 255, 0.05);
          color: #999;
        }

        .editor-button.primary {
          color: #4ade80;
        }

        .editor-button.primary:hover {
          background: rgba(74, 222, 128, 0.1);
        }

        .editor-content {
          flex: 1;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          min-height: 0;
          position: relative;
        }

        .editor-textarea {
          width: 100%;
          height: 100%;
          background: transparent;
          border: none;
          color: #d0d0d0;
          font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
          font-size: 0.8125rem;
          line-height: 1.6;
          padding: 0.75rem;
          resize: none;
          outline: none;
          transition: all 0.15s ease;
          overflow: auto;
        }

        .editor-textarea:focus {
          background: rgba(255, 255, 255, 0.01);
        }

        .editor-textarea::selection {
          background: rgba(59, 130, 246, 0.3);
        }

        .editor-error {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          padding: 0.5rem 0.75rem;
          background: rgba(239, 68, 68, 0.9);
          backdrop-filter: blur(4px);
          color: #fff;
          font-size: 0.7rem;
          font-weight: 500;
          display: flex;
          align-items: center;
          gap: 0.375rem;
          border-top: 1px solid rgba(239, 68, 68, 0.5);
        }

        .editor-error::before {
          content: '!';
          display: inline-flex;
          width: 16px;
          height: 16px;
          align-items: center;
          justify-content: center;
          background: rgba(255, 255, 255, 0.2);
          border-radius: 50%;
          font-size: 0.65rem;
          font-weight: bold;
        }

        .main-content {
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          height: 100px;
        }
      </style>
      ${this.editingProperties.length > 0 ? html`
        <div class="advanced-editor-container">
          <div class="editor-header-bar">
            <div class="editor-header-title">Property Editors</div>
            <button class="editor-close-all" @click=${this.closeAllEditors}>
              Close All
            </button>
          </div>
          <div class="editors-container">
            ${this.editingProperties.length === 0 ? html`
              <div style="
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #666;
                font-size: 0.875rem;
                text-align: center;
                padding: 2rem;
              ">
                <div>
                  <div style="margin-bottom: 0.5rem; font-size: 1.5rem; opacity: 0.5;">{ }</div>
                  <div>No properties being edited</div>
                  <div style="font-size: 0.75rem; margin-top: 0.25rem; opacity: 0.7;">Click "Edit Object/Array" buttons to start editing</div>
                </div>
              </div>
            ` : null}
            ${this.editingProperties.map(prop => html`
              <div class="editor-instance">
                <div class="editor-header">
                  <div class="editor-title">${prop.name}</div>
                  <div class="editor-actions">
                    <button class="editor-button" @click=${() => this.handleEditorCancel(prop.id)}>✕</button>
                    <button class="editor-button primary" @click=${() => this.handleEditorSave(prop.id)}>✓</button>
                  </div>
                </div>
                <div class="editor-content">
                  <textarea 
                    class="editor-textarea"
                    .value=${prop.editorValue}
                    @input=${(e: InputEvent) => {
                      const editor = this.editingProperties.find(p => p.id === prop.id);
                      if (editor) {
                        editor.editorValue = (e.target as HTMLTextAreaElement).value;
                        editor.editorError = '';
                        this.requestUpdate();
                      }
                    }}
                    @keydown=${(e: KeyboardEvent) => {
                      if (e.key === 'Tab') {
                        e.preventDefault();
                        const target = e.target as HTMLTextAreaElement;
                        const start = target.selectionStart;
                        const end = target.selectionEnd;
                        const value = target.value;
                        target.value = value.substring(0, start) + '  ' + value.substring(end);
                        target.selectionStart = target.selectionEnd = start + 2;
                      }
                    }}
                  ></textarea>
                  ${prop.editorError ? html`
                    <div class="editor-error">${prop.editorError}</div>
                  ` : null}
                </div>
              </div>
            `)}
          </div>
        </div>
      ` : null}
      <div class="main-content">
        <div class="grid">
          <div class="properties">
            ${this.propertyContent}
          </div>
          <div class="themeSelector">
            <div class="panelheading">Theme</div>
            <div class="selectorButtons2">
              <div
                class="button ${this.selectedTheme === 'dark' ? 'selected' : null}"
                @click=${() => {
                  this.selectTheme('dark');
                }}
              >
                Dark<i class="material-symbols-outlined">brightness_3</i>
              </div>
              <div
                class="button ${this.selectedTheme === 'bright' ? 'selected' : null}"
                @click=${() => {
                  this.selectTheme('bright');
                }}
              >
                Bright<i class="material-symbols-outlined">flare</i>
              </div>
            </div>
          </div>
          <div class="viewportSelector">
            <div class="panelheading">Viewport</div>
            <div class="selectorButtons5">
              <div
                class="button ${this.selectedViewport === 'phone' ? 'selected' : null}"
                @click=${() => {
                  this.selectViewport('phone');
                }}
              >
                Phone<i class="material-symbols-outlined">smartphone</i>
              </div>
              <div
                class="button ${this.selectedViewport === 'phablet' ? 'selected' : null}"
                @click=${() => {
                  this.selectViewport('phablet');
                }}
              >
                Phablet<i class="material-symbols-outlined">smartphone</i>
              </div>
              <div
                class="button ${this.selectedViewport === 'tablet' ? 'selected' : null}"
                @click=${() => {
                  this.selectViewport('tablet');
                }}
              >
                Tablet<i class="material-symbols-outlined">tablet</i>
              </div>
              <div
                class="button ${this.selectedViewport === 'desktop' ? 'selected' : null}"
                @click=${() => {
                  this.selectViewport('desktop');
                }}
              >
                Desktop<i class="material-symbols-outlined">desktop_windows</i>
              </div>
              <div
                class="button ${this.selectedViewport === 'native' ? 'selected' : null}"
                @click=${() => {
                  this.selectViewport('native');
                }}
              >
                Native<i class="material-symbols-outlined">fullscreen</i>
              </div>
            </div>
          </div>
          <div class="shareSelector">
            <div class="panelheading">Share</div>
            <div class="selectorButtons1">
              <div
                class="button ${this.isRecording ? 'selected' : ''}"
                @click=${() => this.handleRecordButtonClick()}
              >
                Record<i class="material-symbols-outlined">${this.isRecording ? 'stop_circle' : 'videocam'}</i>
              </div>
            </div>
          </div>
        </div>
        ${this.warning ? html`<div class="warning">${this.warning}</div>` : null}
      </div>

      <!-- Recording Panel (options + preview) -->
      ${this.showRecordingPanel ? html`
        <wcc-recording-panel
          .dashboardRef=${this.dashboardRef}
          @recording-start=${() => { this.isRecording = true; }}
          @recording-stop=${() => { this.isRecording = false; }}
          @duration-update=${(e: CustomEvent) => { this.recordingDuration = e.detail.duration; }}
          @close=${() => { this.showRecordingPanel = false; this.isRecording = false; this.recordingDuration = 0; }}
        ></wcc-recording-panel>
      ` : null}
    `;
  }

  private async findElementRecursively(container: Element, elementClass: any, maxDepth: number = 5): Promise<HTMLElement | null> {
    if (maxDepth <= 0) return null;
    
    try {
      // Check direct children
      for (const child of Array.from(container.children)) {
        if (child instanceof elementClass) {
          return child as HTMLElement;
        }
      }
      
      // Search in all children recursively
      for (const child of Array.from(container.children)) {
        // First, always check the light DOM children
        const found = await this.findElementRecursively(child, elementClass, maxDepth - 1);
        if (found) return found;
        
        // Also check shadow root if it exists
        if (child.shadowRoot) {
          const shadowFound = await this.findElementRecursively(child.shadowRoot as any, elementClass, maxDepth - 1);
          if (shadowFound) return shadowFound;
        }
      }
    } catch (error) {
      console.error('Error in findElementRecursively:', error);
    }
    
    return null;
  }

  public async createProperties() {
    console.log('creating properties for:');
    console.log(this.selectedItem);
    
    // Clear any previous warnings
    this.warning = null;
    const isEnumeration = (propertyArg): boolean => {
      const keys = Object.keys(propertyArg.type);
      const values = [];
      for (const key of keys) {
        let value = propertyArg.type[key];
        if (typeof value === 'number') {
          value = value.toString();
        }
        values.push(value);
      }
      for (const key of keys) {
        if (values.indexOf(key) < 0) {
          return false;
        }
      }
      return true;
    };
    const getEnumValues = (propertyArg): any[] => {
      console.log(JSON.stringify(propertyArg));
      const enumValues: any[] = [];
      Object.keys(propertyArg.type).forEach((valueArg: string) => {
        enumValues.push(valueArg);
      });
      return enumValues;
    };
    const determinePropertyType = async (propertyArg: any): Promise<TPropertyType> => {
      const typeName: any | undefined = propertyArg.type.name;
      if (typeName) {
        return typeName;
      } else {
        return Array.isArray(propertyArg)
          ? 'Array'
          : isEnumeration(propertyArg)
          ? 'Enum'
          : 'Object';
      }
    };
    if (this.selectedItem && (this.selectedItem as any).demo) {
      console.log(`Got Dees-Element for property evaluation.`);
      const anonItem: any = this.selectedItem;
      if (!anonItem) {
        this.warning = 'no element selected';
        return;
      }
      console.log(anonItem.elementProperties);
      const wccFrame = await this.dashboardRef.wccFrame;
      
      // Wait for render to complete and any demo wrappers to run
      await new Promise(resolve => setTimeout(resolve, 200));
      
      // Try to find the element with recursive search
      const viewport = await wccFrame.getViewportElement();
      let firstFoundInstantiatedElement: HTMLElement = await this.findElementRecursively(
        viewport, 
        this.selectedItem as any
      );
      
      // Retry logic if element not found
      let retries = 0;
      while (!firstFoundInstantiatedElement && retries < 5) {
        await new Promise(resolve => setTimeout(resolve, 200));
        try {
          firstFoundInstantiatedElement = await this.findElementRecursively(
            viewport,
            this.selectedItem as any
          );
        } catch (error) {
          console.error('Error during element search retry:', error);
        }
        retries++;
      }
      
      if (!firstFoundInstantiatedElement) {
        this.warning = `no first instantiated element found for >>${anonItem.name}<< after ${retries} retries`;
        this.propertyContent = [];
        return;
      }
      const classProperties: Map<string, any> = anonItem.elementProperties;
      if (!classProperties) {
        this.warning = `selected element >>${anonItem.name}<< does not expose element properties`;
        return;
      }
      this.warning = null;
      const propertyArray: TemplateResult[] = [];
      for (const key of classProperties.keys()) {
        if (key === 'goBright' || key === 'domtools') {
          continue;
        }
        try {
          const property = classProperties.get(key);
          const propertyTypeString = await determinePropertyType(property);
          propertyArray.push(
          html`
            <div class="property">
              <div class="property-label">${key} (${propertyTypeString})</div>
              ${(() => {
                switch (propertyTypeString) {
                  case 'Boolean':
                    return html`<input
                      type="checkbox"
                      ?checked=${firstFoundInstantiatedElement[key]}
                      @input="${(eventArg: any) => {
                        firstFoundInstantiatedElement[key] = eventArg.target.checked;
                      }}"
                    />`;
                  case 'String':
                    return html`<input
                      type="text"
                      .value=${firstFoundInstantiatedElement[key] || ''}
                      @input="${(eventArg: any) => {
                        firstFoundInstantiatedElement[key] = eventArg.target.value;
                      }}"
                    />`;
                  case 'Number':
                    return html`<input
                      type="number"
                      .value=${firstFoundInstantiatedElement[key] ?? ''}
                      @input="${(eventArg: any) => {
                        firstFoundInstantiatedElement[key] = parseFloat(eventArg.target.value) || 0;
                      }}"
                    />`;
                  case 'Enum':
                    const enumValues: any[] = getEnumValues(property);
                    return html`<select
                      .value=${firstFoundInstantiatedElement[key] || ''}
                      @change="${(eventArg: any) => {
                        firstFoundInstantiatedElement[key] = eventArg.target.value;
                      }}"
                    >
                      ${enumValues.map((valueArg) => {
                        return html`
                          <option
                            value="${valueArg}"
                          >
                            ${valueArg}
                          </option>
                        `;
                      })}
                    </select>`;
                  case 'Object':
                  case 'Array':
                    return html`<button
                      class="editor-button"
                      style="width: 100%; margin-top: 0.25rem;"
                      @click="${() => this.openAdvancedEditor(key, firstFoundInstantiatedElement[key], firstFoundInstantiatedElement)}"
                    >
                      Edit ${propertyTypeString}
                    </button>`;
                  default:
                    return html`<div style="color: #666; font-size: 0.7rem;">Unsupported type</div>`;
                }
              })()}
            </div>
          `
        );
        } catch (error) {
          console.error(`Error processing property ${key}:`, error);
          // Continue with next property even if this one fails
        }
      }
      this.propertyContent = propertyArray;
    } else {
      console.log(`Cannot extract properties of ${(this.selectedItem as any)?.name}`);
      this.warning = `You selected a page.`;
      return null;
    }
  }

  public selectTheme(themeArg: TTheme) {
    this.selectedTheme = themeArg;
    this.dispatchEvent(
      new CustomEvent('selectedTheme', {
        detail: themeArg,
      })
    );
    console.log(this.dashboardRef.selectedType);
    this.dashboardRef.buildUrl();
  }

  protected updated(changedProperties: Map<string, unknown>) {
    super.updated(changedProperties);

    // Handle delayed hide for native mode transition
    if (changedProperties.has('isNative')) {
      if (this.isNative) {
        // Delay hiding until frame animation completes
        setTimeout(() => {
          this.isHidden = true;
        }, 300);
      } else {
        // Show immediately when exiting native mode
        this.isHidden = false;
      }
    }

    // Only recreate properties when selectedItem changes
    if (changedProperties.has('selectedItem')) {
      this.createProperties().catch(error => {
        console.error('Error creating properties:', error);
        this.propertyContent = [];
      });
    }
  }

  public selectViewport(viewport: TEnvironment) {
    this.selectedViewport = viewport;
    setEnvironment(viewport);
    this.dispatchEvent(
      new CustomEvent('selectedViewport', {
        detail: viewport,
      })
    );
    this.dashboardRef.buildUrl();
  }

  private openAdvancedEditor(propertyName: string, value: any, element: HTMLElement) {
    // Check if this property is already being edited
    const existingEditor = this.editingProperties.find(p => p.name === propertyName && p.element === element);
    if (existingEditor) {
      return; // Property is already open for editing
    }

    const newEditor = {
      id: `${propertyName}-${Date.now()}`,
      name: propertyName,
      value: value,
      element: element,
      editorValue: JSON.stringify(value, null, 2),
      editorError: ''
    };

    this.editingProperties = [...this.editingProperties, newEditor];
    
    // Notify parent to resize frame if this is the first editor
    if (this.editingProperties.length === 1) {
      this.dispatchEvent(
        new CustomEvent('editorStateChanged', {
          detail: { isOpen: true },
          bubbles: true
        })
      );
    }
  }

  private handleEditorSave(editorId: string) {
    const editor = this.editingProperties.find(p => p.id === editorId);
    if (!editor) return;

    try {
      const parsedValue = JSON.parse(editor.editorValue);
      editor.element[editor.name] = parsedValue;
      
      // Remove this editor from the list
      this.editingProperties = this.editingProperties.filter(p => p.id !== editorId);
      
      // If no more editors, notify parent to resize frame
      if (this.editingProperties.length === 0) {
        this.dispatchEvent(
          new CustomEvent('editorStateChanged', {
            detail: { isOpen: false },
            bubbles: true
          })
        );
      }
      
      // Refresh properties display
      this.createProperties();
    } catch (error) {
      // Update error for this specific editor
      const editorIndex = this.editingProperties.findIndex(p => p.id === editorId);
      if (editorIndex !== -1) {
        this.editingProperties[editorIndex].editorError = `Invalid JSON: ${error.message}`;
        this.requestUpdate();
      }
    }
  }

  private handleEditorCancel(editorId: string) {
    // Remove this editor from the list
    this.editingProperties = this.editingProperties.filter(p => p.id !== editorId);
    
    // If no more editors, notify parent to resize frame
    if (this.editingProperties.length === 0) {
      this.dispatchEvent(
        new CustomEvent('editorStateChanged', {
          detail: { isOpen: false },
          bubbles: true
        })
      );
    }
  }

  private closeAllEditors() {
    this.editingProperties = [];
    
    // Notify parent to resize frame back
    this.dispatchEvent(
      new CustomEvent('editorStateChanged', {
        detail: { isOpen: false },
        bubbles: true
      })
    );
  }

  private toggleNative() {
    this.dispatchEvent(
      new CustomEvent('toggleNative', {
        bubbles: true
      })
    );
  }

  // ==================== Recording Methods ====================

  private handleRecordButtonClick() {
    if (this.isRecording) {
      // Stop recording by calling the panel's stopRecording method
      const panel = this.shadowRoot?.querySelector('wcc-recording-panel') as any;
      if (panel && panel.stopRecording) {
        panel.stopRecording();
      }
    } else {
      // Toggle the recording panel
      this.showRecordingPanel = !this.showRecordingPanel;
    }
  }
}
