// stores/user.ts —— 用户状态管理
import { defineStore } from "pinia";
import { ref, computed } from "vue";
import { loginApi, refreshTokenApi, type UserInfo } from "@/api/auth";

export const useUserStore = defineStore("user", () => {
  const token = ref<string>(localStorage.getItem("access_token") || "");
  const userInfo = ref<UserInfo | null>(null);
  const role = ref<"superadmin" | "admin" | "operator">("operator");

  // 计算属性：判断是否有管理权限
  const isAdmin = computed(
    () => role.value === "superadmin" || role.value === "admin",
  );

  // 登录：保存 access + refresh token
  async function login(username: string, password: string) {
    const res = await loginApi(username, password);
    token.value = res.access;
    localStorage.setItem("access_token", res.access);
    localStorage.setItem("refresh_token", res.refresh);
    userInfo.value = res.user;
    role.value = res.user.role;
  }

  // Token 刷新：使用 refresh token 获取新的 access token
  async function refreshToken() {
    const refresh = localStorage.getItem("refresh_token");
    if (!refresh) throw new Error("No refresh token");
    const res = await refreshTokenApi(refresh);
    token.value = res.access;
    localStorage.setItem("access_token", res.access);
  }

  return { token, userInfo, role, isAdmin, login, refreshToken };
});

// composables/useDashboardChart.ts —— 仪表盘图表组合式函数
import { onMounted, ref } from "vue";
import * as echarts from "echarts/core";
import { BarChart, LineChart } from "echarts/charts";
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
} from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";

// 按需注册组件，避免引入完整 ECharts
echarts.use([
  BarChart,
  LineChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  CanvasRenderer,
]);

export function useExpiryChart(containerRef: Ref<HTMLElement | null>) {
  let chart: echarts.ECharts | null = null;

  onMounted(() => {
    if (!containerRef.value) return;
    chart = echarts.init(containerRef.value);
    chart.setOption({
      tooltip: { trigger: "axis" },
      xAxis: { type: "category", data: [] }, // 日期轴
      yAxis: { type: "value", name: "证书数量" },
      series: [
        {
          name: "即将过期",
          type: "bar",
          data: [],
          itemStyle: { color: "#E6A23C" },
        },
        {
          name: "已过期",
          type: "bar",
          data: [],
          itemStyle: { color: "#F56C6C" },
        },
      ],
    });
  });

  // 数据更新方法，由父组件调用
  function updateData(dates: string[], expiring: number[], expired: number[]) {
    chart?.setOption({
      xAxis: { data: dates },
      series: [{ data: expiring }, { data: expired }],
    });
  }

  return { updateData };
}

// api.ts —— 公众端 API 层
import axios from "axios";

const http = axios.create({
  baseURL: import.meta.env.VITE_API_BASE || "/api",
  timeout: 10000,
});

// 响应拦截器：统一错误处理
http.interceptors.response.use(
  (res) => res.data,
  (err) => {
    if (err.response?.status === 429) {
      // 触发限流时给出友好提示
      ElMessage.warning("查询过于频繁，请稍后再试");
    }
    return Promise.reject(err);
  },
);

// ----- 类型定义 -----
export interface CertLookupResult {
  certNumber: string;
  productName: string;
  manufacturer: string;
  status: "valid" | "expired" | "revoked";
  viewUrl: string;
}

export interface CertDetail {
  certNumber: string;
  productName: string;
  manufacturer: string;
  inspectionDate: string;
  expiryDate: string;
  signatureStatus: "verified" | "failed" | "none";
  signatureDetail?: {
    algorithm: string;
    keyId: string;
    signedAt: string;
    digest: string;
  };
}

// ----- API 方法 -----
export const lookupCertByNumber = (num: string) =>
  http.get<any, CertLookupResult>("/public/cert/lookup/", {
    params: { number: num },
  });

export const getCertByToken = (token: string) =>
  http.get<any, CertDetail>(`/public/cert/${token}/`);

// vite.config.ts —— 通用配置模式（以 cert-view 为例）
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 5174, // cert-view 用 5174，admin 用 5173
    proxy: {
      // 开发环境：将 /api 请求代理到 Django 后端
      "/api": {
        target: "http://localhost:8000",
        changeOrigin: true,
      },
    },
  },
  build: {
    outDir: "dist",
    rollupOptions: {
      output: {
        // 手动分包：将大型库单独打包
        manualChunks: {
          vendor: ["vue", "vue-router", "axios"],
        },
      },
    },
  },
});

// router/index.ts —— 路由懒加载
const routes = [
  { path: "/", name: "Home", component: () => import("../views/Home.vue") },
  {
    path: "/scan",
    name: "Scan",
    component: () => import("../views/ScanView.vue"),
  },
  {
    path: "/cert/:token",
    name: "CertView",
    component: () => import("../views/CertView.vue"),
  },
];

// admin/src/utils/http.ts —— Admin 端 axios 实例
const adminHttp = axios.create({ baseURL: "/api" });

// 请求拦截器：附加 JWT Token
adminHttp.interceptors.request.use((config) => {
  const token = localStorage.getItem("access_token");
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

// 响应拦截器：处理 Token 过期自动刷新
adminHttp.interceptors.response.use(
  (res) => res.data,
  async (err) => {
    if (err.response?.status === 401 && !err.config._retried) {
      err.config._retried = true;
      try {
        const userStore = useUserStore();
        await userStore.refreshToken();
        // 用新 token 重试原始请求
        err.config.headers.Authorization = `Bearer ${userStore.token}`;
        return adminHttp(err.config);
      } catch {
        // Refresh 也失败了，跳转登录页
        router.push("/login");
      }
    }
    if (err.response?.status === 403) {
      ElMessage.error("权限不足，请联系管理员");
    }
    return Promise.reject(err);
  },
);

// 摄像头不可用时的降级处理
async function initScanner() {
  try {
    await scanner.start(/* ... */);
  } catch (err) {
    // 微信浏览器或用户拒绝摄像头权限时
    cameraAvailable.value = false;
    // UI 自动切换为手动输入模式
  }
}