import { createApp, defineComponent, reactive } from 'vue';

export const App = defineComponent({
  setup() {
    const state = reactive({ table: 'hero' as string, keys: [] as string[], picked: '' as string, detail: '' as string });
    async function load() {
      const keys = await Editor.Message.request('pixelhero-config-editor', 'query-keys', state.table);
      state.keys = keys || [];
      state.picked = ''; state.detail = '';
    }
    async function pick(k: string) {
      state.picked = k;
      const v = await Editor.Message.request('pixelhero-config-editor', 'query-record', state.table, k);
      state.detail = JSON.stringify(v, null, 2);
    }
    load();
    return { state, load, pick };
  },
  template: `
    <div>
      <div class="row">
        <label>表：</label>
        <select v-model="state.table" @change="load">
          <option value="hero">英雄/怪物</option>
          <option value="skill">技能</option>
          <option value="field">驻场技能</option>
        </select>
        <span style="margin-left:12px;color:#888">共 {{ state.keys.length }} 条（端到端 IPC 已打通）</span>
      </div>
      <ul>
        <li v-for="k in state.keys" :key="k" @click="pick(k)" :style="state.picked===k ? 'font-weight:bold' : ''">{{ k }}</li>
      </ul>
      <pre v-if="state.detail" style="white-space:pre-wrap;background:var(--color-normal-fill);padding:8px">{{ state.detail }}</pre>
    </div>
  `,
});

export function mount(el: HTMLElement) { createApp(App).mount(el); }