import { reactive, ref } from "vue";

export function createSystemStore() {
  const database = ref<any>(null);
  const databaseConfig = ref<any>(null);
  const databaseLastSync = ref<any>(null);
  const healthSnapshot = ref<any>(null);
  const auditLogs = ref<any[]>([]);
  const auditPage = reactive({
    items: [] as any[],
    total: 0,
    page: 1,
    perPage: 35,
    q: "",
    type: "",
    target: "",
    selected: null as any | null,
  });
  const migrationStatus = ref<any>(null);
  const branding = reactive({
    siteIconUrl: "https://img.ymhut.cn/file/1782108850041_icon.webp",
    developerAvatarUrl: "https://img.ymhut.cn/file/1782108780690_b_3db45f3787f19192c8de8e06bc0987ef.webp",
    developerName: "YMhut",
    feedbackEmail: "support@ymhut.cn",
  });
  const databaseForm = reactive({
    provider: "sqlite",
    sqlitePath: "",
    mysqlHost: "127.0.0.1",
    mysqlPort: 3306,
    mysqlDatabase: "",
    mysqlUser: "",
    mysqlPassword: "",
    mysqlDsn: "",
  });
  const databaseConfigCollapsed = ref(true);
  const mailConfig = reactive({
    host: "",
    port: 465,
    secure: "ssl",
    username: "",
    password: "",
    fromAddress: "",
    fromName: "YMhut Box Feedback",
    developerAddress: "",
    timeoutSeconds: 20,
    hasPassword: false,
    configured: false,
  });
  const legacySyncMode = ref<"preview" | "run">("preview");

  return { database, databaseConfig, databaseLastSync, healthSnapshot, auditLogs, auditPage, migrationStatus, branding, databaseForm, databaseConfigCollapsed, mailConfig, legacySyncMode };
}
