module.exports = {
    template: `
    <div id="main">
      <div class="header">
        <h1>Layer生成器</h1>
      </div>

      <div class="form-group">
        <label for="bundleName">Bundle 名称</label>
        <input type="text" id="bundleName" placeholder="例如: indonesia">
      </div>

      <div class="form-group">
        <label for="featureName">功能名称</label>
        <input type="text" id="featureName" placeholder="例如: BankCenterV">
      </div>

      <div class="form-group">
        <label for="subDir">子目录（可选, 支持多级如 popup/bank）</label>
        <input type="text" id="subDir" placeholder="例如: personalCenter 或 popup/bank">
      </div>

      <div class="info-box">
        <h3>生成说明：</h3>
        <ul>
          <li>先按 <b>子目录</b> 路径建出对应文件夹（多级会逐层创建）</li>
          <li>在该文件夹下再建 <code>ctr / layer / data</code> 三个子目录</li>
          <li>Layer 文件: src/{子目录}/layer/{名称}Layer.ts</li>
          <li>Controller 文件: src/{子目录}/ctr/{名称}Controller.ts</li>
          <li>Data 文件: src/{子目录}/data/{名称}Data.ts</li>
          <li>留空子目录时回退到旧布局: src/{ctr,layer,data}/{名称}*.ts</li>
        </ul>
      </div>

      <button id="generate">生成文件</button>
    </div>
  `,

    style: `
    #main {
      display: flex;
      flex-direction: column;
      height: 100%;
      padding: 20px;
      background: linear-gradient(135deg, #1e1e1e, #2a2a2a);
      color: #e0e0e0;
      overflow: auto;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .header { text-align: center; margin-bottom: 25px; }
    .header h1 { font-size: 22px; color: #64b5f6; margin: 0; }
    .form-group {
      margin-bottom: 15px;
    }
    .form-group label {
      display: block;
      margin-bottom: 5px;
      color: #b0bec5;
      font-size: 14px;
    }
    .form-group input {
      width: 100%;
      padding: 8px 12px;
      border: 1px solid #546e7a;
      border-radius: 6px;
      background-color: rgba(41, 50, 60, 0.5);
      color: #e0e0e0;
      font-size: 14px;
      box-sizing: border-box;
    }
    .form-group input:focus {
      outline: none;
      border-color: #64b5f6;
      background-color: rgba(41, 50, 60, 0.7);
    }
    .info-box {
      background-color: #37474f;
      border-radius: 8px;
      padding: 15px;
      margin-bottom: 20px;
      border-left: 4px solid #64b5f6;
    }
    .info-box h3 {
      margin: 0 0 10px 0;
      color: #bb86fc;
      font-size: 14px;
    }
    .info-box ul {
      margin: 0;
      padding-left: 20px;
    }
    .info-box li {
      margin-bottom: 5px;
      color: #b0bec5;
      font-size: 12px;
      line-height: 1.4;
    }
    .info-box code {
      background-color: rgba(255,255,255,0.08);
      padding: 1px 5px;
      border-radius: 3px;
      color: #ffd54f;
      font-family: Menlo, Consolas, monospace;
    }
    .info-box b { color: #e0e0e0; }
    button {
      background-color: #1976d2;
      color: white;
      border: none;
      padding: 12px 24px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 16px;
      transition: all 0.3s;
      font-weight: 500;
    }
    button:hover { background-color: #2196f3; }
    button:active { background-color: #0d47a1; }
  `,

    methods: {
        // Find element by id, including inside shadow roots.
        _q(id) {
            const direct = document.getElementById(id);
            if (direct) return direct;
            function searchShadow(root) {
                if (!root) return null;
                const found = root.querySelector ? root.querySelector('#' + id) : null;
                if (found) return found;
                const all = root.querySelectorAll ? root.querySelectorAll('*') : [];
                for (const el of all) {
                    if (el.shadowRoot) {
                        const hit = searchShadow(el.shadowRoot);
                        if (hit) return hit;
                    }
                }
                return null;
            }
            return searchShadow(document);
        },

        _inPath(e, id) {
            return e.composedPath().some(el => el && el.id === id);
        },
    },

    ready() {
        // Use document-level event delegation with composedPath —
        // works whether the template is in regular DOM or shadow DOM,
        // and doesn't depend on querySelector finding elements at ready() time.
        this._onClick = (e) => {
            if (!this._inPath(e, 'generate')) return;

            const bundleNameEl = this._q('bundleName');
            const featureNameEl = this._q('featureName');
            const subDirEl = this._q('subDir');

            const bundleName = (bundleNameEl && bundleNameEl.value || '').trim();
            const featureName = (featureNameEl && featureNameEl.value || '').trim();
            const subDir = (subDirEl && subDirEl.value || '').trim();

            if (!bundleName || !featureName) {
                Editor.Dialog.warn('Bundle 名称和功能名称不能为空！', {
                    buttons: ['确定'],
                    default: 0,
                });
                return;
            }

            Editor.Message.send('layer-generator', 'generate-layer', {
                bundleName,
                featureName,
                subDir,
            });
        };

        document.addEventListener('click', this._onClick);
    },

    close() {
        document.removeEventListener('click', this._onClick);
    },
};
