import { createApp } from 'vue'
import { createPinia } from 'pinia' // 1. 导入 createPinia
import App from './App.vue'

// 2. 创建 Pinia 实例
const pinia = createPinia()
const app = createApp(App)

// 3. 将 Pinia 实例提供给应用
app.use(pinia)
app.mount('#app')

import { defineStore } from 'pinia';

// defineStore 的第一个参数是 store 的唯一 id，在整个应用中必须唯一
export const useCounterStore = defineStore('counter', {
  // state 是 store 的核心，用来存放数据
  // 必须是一个函数，以避免在服务端渲染时产生交叉请求污染
  state: () => ({
    count: 0,
  }),
  // actions 用来封装业务逻辑，修改 state
  actions: {
    increment() {
      // 在 action 中，`this` 指向当前的 store 实例
      this.count++;
    },
  },
});

import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  // (新增) Getters
  getters: {
    // getter 会接收 state 作为第一个参数
    doubleCount(state): number {
      return state.count * 2;
    },
    // getter 内部也可以通过 `this` 访问其他 getter
    doubleCountPlusOne(): number {
      return this.doubleCount + 1;
    },
  },
  actions: {
    increment() {
      this.count++;
    },
  },
});

import { ref, computed } from 'vue';
import { defineStore } from 'pinia';

export const useCounterSetupStore = defineStore('counterSetup', () => {
  // state -> ref()
  const count = ref(0);

  // getters -> computed()
  const doubleCount = computed(() => count.value * 2);

  // actions -> function()
  function increment() {
    count.value++;
  }

  // 必须返回一个包含了 state 和 actions 的对象，Pinia 才能正确识别
  return { count, doubleCount, increment };
});

export * from './counter';
// 当有更多 store 时，在这里继续导出
// export * from './user';

export interface UserInfo {
  id: string;
  username: string;
  token: string;
}

import { defineStore } from "pinia";
import { ref } from "vue";
import type { UserInfo } from "../types/user"; // 从类型目录导入

export const useUserStore = defineStore("user", () => {
  // state
  const userInfo = ref<UserInfo>({
    id: "",
    username: "",
    token: "",
  });
  // actions
  function login(userInfo: UserInfo) {
    console.log("login", userInfo);
  }
  return {
    userInfo,
    login,
  };
});

import { useCounterStore } from '@/stores';

const counterStore = useCounterStore();
// ❌ 这是一个常见的错误！
const { count } = counterStore;

export interface User {
  id: number;
  name: string;
  email: string;
}

import { ref, computed } from 'vue';
import { defineStore } from 'pinia';
import type { User } from '@/types/user'; // 从我们刚刚创建的类型文件导入

export const useUserStore = defineStore('user', () => {
  // State: "三位一体"结构
  const user = ref<User | null>(null);
  const isLoading = ref(false);
  const error = ref<Error | null>(null);
  
  // Getter
  const isLoggedIn = computed(() => !!user.value);

  // Action ( अभी खाली )
  async function fetchUser(userId: number) {
    // 这里的逻辑我们将在下一节填充
  }

  return { user, isLoading, error, isLoggedIn, fetchUser };
});

import { ref, computed } from "vue";
import { defineStore } from "pinia";
// @ts-ignore
import type { User } from "@/types/user"; // 从我们刚刚创建的类型文件导入

export const useUserStore = defineStore("user", () => {
  const user = ref<User | null>(null);
  const isLoading = ref(false);
  const error = ref<Error | null>(null);

  // Getter
  // !! 表示将 user.value 转换为布尔值
  const isLoggedIn = computed(() => !!user.value);

  // Action
  async function fetchUser(userId: number) {
    isLoading.value = true;
    error.value = null;
    try {
      // 从 Vite 环境变量中读取 API 地址
      const apiBase = import.meta.env.VITE_API_URL;
      const response = await fetch(`${apiBase}/users/${userId}`);
      if (!response.ok) {
        throw new Error(`Failed to fetch user with status ${response.status}`);
      }
      user.value = await response.json();
    } catch (err) {
      error.value = err as Error;
    } finally {
      // 无论成功或失败，最后都将加载状态设为 false
      isLoading.value = false;
    }
  }

  return { user, isLoading, error, isLoggedIn, fetchUser };
});

import { useUserStore } from '@/stores/user';
import { storeToRefs } from 'pinia';
import { onMounted } from 'vue';

export function useAuth() {
  const userStore = useUserStore();
  const { user, isLoading, error, isLoggedIn } = storeToRefs(userStore);

  // 封装副作用：如果用户未登录，则自动获取
  onMounted(() => {
    if (!user.value) {
      userStore.fetchUser(1);
    }
  });

  return {
    user,
    isLoading,
    error,
    isLoggedIn,
    fetchUser: userStore.fetchUser, // 也可将 action 一并返回
  };
}

// ...
app.use(pinia);

// 在 main.ts 中进行订阅，可以确保它是全局生效的
import { useUserStore } from '@/stores/user';
const userStore = useUserStore();

userStore.$subscribe((mutation, state) => {
  // 仅在 user state 变化时操作
  // mutation.events.key 可以帮助我们精确判断是哪个 state 发生了变化
  if (mutation.storeId === 'user' && mutation.events.key === 'user') {
    if (state.user) {
      localStorage.setItem('user-info', JSON.stringify(state.user));
    } else {
      localStorage.removeItem('user-info');
    }
  }
});

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' // 1. 导入插件
import App from './App.vue'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate) // 2. 注册插件

const app = createApp(App)
app.use(pinia)
app.mount('#app')

import { ref, computed } from "vue";
import { defineStore } from "pinia";
// @ts-ignore
import type { User } from "@/types/user"; // 从我们刚刚创建的类型文件导入

export const useUserStore = defineStore(
  "user",
  () => {
    const user = ref<User | null>(null);
    const isLoading = ref(false);
    const error = ref<Error | null>(null);

    // Getter
    // !! 表示将 user.value 转换为布尔值
    const isLoggedIn = computed(() => !!user.value);

    // Action
    async function fetchUser(userId: number) {
      isLoading.value = true;
      error.value = null;
      try {
        // 从 Vite 环境变量中读取 API 地址
        const apiBase = import.meta.env.VITE_API_URL;
        const response = await fetch(`${apiBase}/users/${userId}`);
        if (!response.ok) {
          throw new Error(`Failed to fetch user with status ${response.status}`);
        }
        user.value = await response.json();
      } catch (err) {
        error.value = err as Error;
      } finally {
        // 无论成功或失败，最后都将加载状态设为 false
        isLoading.value = false;
      }
    }

    return { user, isLoading, error, isLoggedIn, fetchUser };
  },
    // 这里就是最核心的关键点，我们只需要开启这个配置项即可
  {
    persist: true,
  }
);

// ...
export const useUserStore = defineStore(
  'user',
  () => {
    const user = ref<User | null>(null);
    const temporaryToken = ref<string | null>(null);
    // ...
    return { user, temporaryToken, /* ... */ };
  },
  {
    persist: {
      // 指定存储方式，可以是 localStorage 或 sessionStorage
      storage: sessionStorage,
      // 指定只持久化 state 中的一部分数据
      pick: ['user'], // 只有 user 会被持久化，temporaryToken 不会
    },
  }
);