import {
  DeesElement,
  customElement,
  type TemplateResult,
  html,
  property,
  css,
} from '@design.estate/dees-element';

// Helper component for nesting
@customElement('test-nested-wrapper')
class TestNestedWrapper extends DeesElement {
  public render() {
    return html`
      <div style="border: 1px dashed #ccc; padding: 10px; margin: 5px;">
        <slot></slot>
      </div>
    `;
  }
}

// The actual test element deeply nested
@customElement('test-nested-target')
class TestNestedTarget extends DeesElement {
  @property({ type: String })
  public message: string = 'I am deeply nested!';

  @property({ type: Number })
  public depth: number = 0;

  @property({ type: Boolean })
  public found: boolean = false;

  public static styles = [
    css`
      :host {
        display: block;
        padding: 15px;
        background: #e1f5fe;
        border: 2px solid #0288d1;
        border-radius: 4px;
        margin: 5px;
      }
      .info {
        font-family: monospace;
        color: #01579b;
      }
    `
  ];

  public render() {
    return html`
      <div class="info">
        <strong>Nested Target Element</strong><br>
        Message: ${this.message}<br>
        Depth: ${this.depth}<br>
        Found by properties panel: ${this.found ? '✅' : '❌'}
      </div>
    `;
  }
}

@customElement('test-nested')
export class TestNested extends DeesElement {
  public static demo = () => html`
    <test-nested></test-nested>
  `;

  @property({ type: String })
  public testId: string = 'nested-test';

  public static styles = [
    css`
      :host {
        display: block;
        padding: 20px;
        background: #f5f5f5;
        border: 2px solid #999;
        border-radius: 8px;
      }
      .explanation {
        background: #fff;
        padding: 10px;
        border-radius: 4px;
        margin-bottom: 10px;
      }
      .structure {
        background: #f0f0f0;
        padding: 10px;
        border-radius: 4px;
      }
    `
  ];

  public render() {
    return html`
      <div class="explanation">
        <h3>Nested Structure Test</h3>
        <p>The actual element with properties is nested deep inside multiple layers:</p>
      </div>
      
      <div class="structure">
        <test-nested-wrapper>
          <div style="padding: 10px; background: #ffe;">
            <test-nested-wrapper>
              <div style="padding: 10px; background: #efe;">
                <test-nested-wrapper>
                  <div style="padding: 10px; background: #eef;">
                    <!-- The target element is here, 3 levels deep -->
                    <test-nested-target
                      .message=${'Found me at depth 3!'}
                      .depth=${3}
                    ></test-nested-target>
                  </div>
                </test-nested-wrapper>
              </div>
            </test-nested-wrapper>
          </div>
        </test-nested-wrapper>
      </div>
      
      <div style="margin-top: 10px; font-style: italic; color: #666;">
        Properties panel should find the test-nested-target element despite the deep nesting.
      </div>
    `;
  }
}