/** OpenVue 客户端统一配置：中文交互文案、蓝色主色以及 .app-dark 暗色切换。 */
import { definePreset } from "@openvue/themes";
import Aura from "@openvue/themes/aura";
import { normalizeStyle } from "vue";
import locale from "./locale.zh-CN.json";

// 列宽只取声明，不让接口数据、骨架或空态参与浏览器的自动列宽分配。
// 百分比宽度原来用于自动布局的伸缩提示；固定布局改用原有最小宽度或统一默认宽度。
function columnWidth(props) {
  const style = normalizeStyle([props.style, props.headerStyle]) ?? {};
  const width =
    style.width && !String(style.width).includes("%") ? style.width : undefined;
  const minimum = style.minWidth ?? style["min-width"];
  return width && minimum
    ? `max(${width}, ${minimum})`
    : width || minimum || "12rem";
}

// 使用 MIT 许可的主题包，并采用控制台的 blue/slate/zinc 配色。
// 只覆盖 Aura 的语义色阶，保留组件自身设计令牌；浅色用 slate，深色用 zinc。
const preset = definePreset(Aura, {
  semantic: {
    primary: Object.fromEntries(
      [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950].map((shade) => [
        shade,
        `{blue.${shade}}`,
      ]),
    ),
    colorScheme: {
      light: {
        // 普通字号白字按钮至少4.5:1；浅色主色从blue-600起，hover/active继续加深，暗色令牌不变。
        primary: {
          color: "{primary.600}",
          contrastColor: "#ffffff",
          hoverColor: "{primary.700}",
          activeColor: "{primary.800}",
        },
        surface: Object.fromEntries(
          [0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950].map(
            (shade) => [shade, shade === 0 ? "#ffffff" : `{slate.${shade}}`],
          ),
        ),
      },
      dark: {
        surface: Object.fromEntries(
          [0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950].map(
            (shade) => [shade, shade === 0 ? "#ffffff" : `{zinc.${shade}}`],
          ),
        ),
      },
    },
  },
});

export default {
  ripple: true,
  locale,
  theme: { preset, options: { darkModeSelector: ".app-dark" } },
  // 列标题与单元格同次渲染，移除手机卡片对后补布局标签的依赖。
  pt: {
    datatable: {
      table: ({ instance }) => ({
        style: {
          tableLayout: "fixed",
          width: "100%",
          minWidth: `calc(${
            (instance.columns ?? [])
              .filter((column) => !column.props?.hidden)
              .map((column) => columnWidth(column.props ?? {}))
              .join(" + ") || "0px"
          })`,
        },
      }),
      column: {
        headerCell: ({ props }) => ({
          style: { width: columnWidth(props) },
        }),
        bodyCell: ({ props }) => ({
          style: { width: columnWidth(props) },
          "data-label":
            typeof props.header === "string" ? props.header.trim() : "",
        }),
      },
    },
  },
};