<template>
  <div class="store-example">
    <h1>Remote 组件 - 使用 Host 的 Store</h1>

    <!-- ⭐ 关键：Remote 组件可以直接使用 Host 的 Pinia Store -->
    <div class="store-access-info">
      <h2>跨应用 Store 访问</h2>
      <p class="info" v-if="isUsingHostStores">
        ✅ 此 Remote 组件正在访问 Host 的 Pinia Store 实例
      </p>
      <p class="warning" v-else>
        ⚠️ 独立运行模式 - 使用 Remote 自己的 Store
      </p>
    </div>

    <!-- 加载状态 -->
    <div v-if="isLoading" class="loading">
      <p>⏳ 正在加载 Stores...</p>
    </div>

    <!-- 显示用户状态 -->
    <div class="user-status" v-if="!isLoading">
      <h3>用户状态（来自 Host Store）</h3>
      <div v-if="userStore" class="status-card">
        <p v-if="userStore.isLoggedIn">
          <strong>已登录:</strong> {{ userStore.userName }}<br />
          <strong>角色:</strong> {{ userStore.user?.value?.role }}<br />
          <strong>邮箱:</strong> {{ userStore.user?.value?.email }}
        </p>
        <p v-else class="not-logged">
          <strong>未登录</strong><br />
          请先在 Host 的 /user 页面登录
        </p>
      </div>
      <div v-else class="error">
        ❌ 无法访问 UserStore - 请确保 Host 已正确配置 Pinia
      </div>
    </div>

    <!-- 显示配置 -->
    <div class="config-status" v-if="!isLoading">
      <h3>应用配置（来自 Host Store）</h3>
      <div v-if="configStore" class="config-card">
        <p><strong>主题:</strong> {{ configStore.config.value.theme }}</p>
        <p><strong>语言:</strong> {{ configStore.config.value.language }}</p>
        <div class="actions">
          <button @click="configStore?.toggleTheme()" class="btn">
            切换主题
          </button>
          <button @click="testRemoteUpdate" class="btn btn-primary">
            Remote 修改配置
          </button>
        </div>
      </div>
    </div>

    <!-- 说明 -->
    <div class="explanation">
      <h3>工作原理</h3>
      <ul>
        <li>✅ Host 配置了 <code>pinia: { singleton: true, eager: true }</code></li>
        <li>✅ Remote 配置了 <code>pinia: { singleton: true }</code></li>
        <li>✅ Host 在启动时创建 Pinia 实例并挂载到 app</li>
        <li>✅ Remote 组件通过 <code>useUserStore()</code> 访问同一实例</li>
        <li>✅ 状态在 Host 和 Remote 之间完全同步</li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';

/**
 * ⭐ 方案 B: Remote 直接导入 Host 的 stores（带降级处理）
 *
 * 当 Remote 被 Host 加载时：
 * 1. 直接使用 import { useUserStore } from 'hostApp/stores'
 * 2. 共享同一个 Pinia 实例（singleton: true）
 * 3. 使用 Host 的 store 定义，状态完全同步
 * 4. Remote 修改的状态会立即反映到 Host
 *
 * 独立运行时：
 * - 动态导入失败后，降级使用 Remote 自己的 stores
 * - 这样可以独立开发和测试
 */

// 响应式 store 引用（使用 any 避免类型冲突）
const userStore: any = ref(null);
const configStore: any = ref(null);

// 加载状态
const isLoading = ref(true);

const isUsingHostStores = ref(false);

/**
 * 调试：检查共享作用域
 */
onMounted(() => {});

/**
 * 测试 Remote 修改 Host 的配置
 */
function testRemoteUpdate() {
  if (configStore.value) {
    const currentLang =
      configStore.value.config.value?.language ||
      configStore.value.config?.language;
    configStore.value.updateConfig(
      'language',
      currentLang === 'zh-CN' ? 'en-US' : 'zh-CN',
    );

    const mode = isUsingHostStores.value ? 'Host' : '本地';
    alert(
      `✅ Remote 已修改配置！\n当前模式：${mode} Stores\n${isUsingHostStores.value ? 'Host 的配置也会同步更新' : '独立运行模式'}`,
    );
  }
}
</script>

<style scoped>
.store-example {
  padding: 30px;
  max-width: 900px;
  margin: 0 auto;
}

h1 {
  color: #646cff;
  margin-bottom: 20px;
}

h2 {
  color: #42b883;
  margin-bottom: 15px;
}

h3 {
  color: #333;
  margin-bottom: 10px;
  font-size: 1.2rem;
}

.store-access-info {
  background: #e8f5e9;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.info {
  color: #2e7d32;
  font-weight: 500;
}

.warning {
  color: #f57c00;
  font-weight: 500;
}

.loading {
  background: #e3f2fd;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  color: #1976d2;
  margin-bottom: 20px;
}

.user-status,
.config-status {
  background: #f5f5f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.status-card,
.config-card {
  background: white;
  padding: 15px;
  border-radius: 4px;
  margin-top: 10px;
}

.not-logged {
  color: #f57c00;
}

.error {
  color: #d32f2f;
  background: #ffebee;
  padding: 10px;
  border-radius: 4px;
}

.actions {
  margin-top: 15px;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  margin-right: 10px;
  background: #646cff;
  color: white;
  transition: background 0.3s;
}

.btn:hover {
  background: #535bf2;
}

.btn-primary {
  background: #42b883;
}

.btn-primary:hover {
  background: #33a06f;
}

.explanation {
  background: #e3f2fd;
  padding: 20px;
  border-radius: 8px;
}

.explanation ul {
  margin: 10px 0;
  padding-left: 20px;
}

.explanation li {
  margin: 8px 0;
  line-height: 1.6;
}

.explanation code {
  background: #f5f5f5;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
}
</style>
