export const SCREEN2_LAYOUT = Object.freeze({
  canvasWidth: 1920,
  canvasHeight: 1080,
  sideCardWidth: 398,
  sidePanelTop: 128,
  sidePanelBottom: 8,
  sideCardGap: 12,
  sideCardMinHeight: 227,
  cardTitleHeight: 36,
})

export const SCREEN2_FONTS = Object.freeze({
  ui: '"Alibaba PuHuiTi", "PingFang SC", "Microsoft YaHei", Arial, sans-serif',
  title: '"Alimama ShuHeiTi", "阿里妈妈数黑体 Bold", "Alibaba PuHuiTi", "Microsoft YaHei", sans-serif',
  number: '"D-DIN", "D-DIN-Bold", Arial, sans-serif',
})

export const SCREEN2_FONT_SIZE = Object.freeze({
  pageTitle: 48,
  menu: 14,
  cardTitle: 16,
  kpiLabel: 14,
  kpiValue: 31,
  kpiUnit: 11,
  chartUnit: 10,
  chartAxis: 10,
  chartLabel: 11,
  tableBody: 11,
  tableValue: 12,
  popupTitle: 20,
  popupBody: 14,
  tooltip: 12,
})

export const SCREEN2_COLORS = Object.freeze({
  textPrimary: "#ffffff",
  textStrong: "#ffffff",
  textSecondary: "rgba(246, 253, 255, 0.92)",
  textMuted: "rgba(242, 253, 255, 0.9)",
  textWeak: "rgba(229, 248, 255, 0.74)",
  accentCyan: "#30dcff",
  accentMint: "#19ffc6",
  accentWater: "#31dcff",
  accentGrass: "#24f6c4",
  accentGold: "#8bf7ff",
  accentOrange: "#48cfff",
  cardBorder: "rgba(62, 226, 255, 0.5)",
  cardBg: "rgba(10, 52, 72, 0.7)",
  cardHeaderBg: "rgba(40, 124, 158, 0.62)",
  chartGridLine: "rgba(218, 250, 255, 0.28)",
  tooltipBg: "rgba(3, 13, 18, 0.92)",
  iconPrimary: "#30dcff",
  iconSecondary: "#19ffc6",
  iconBg: "rgba(48, 220, 255, 0.1)",
  iconBorder: "rgba(48, 220, 255, 0.42)",
  iconGlow: "rgba(48, 220, 255, 0.22)",
})

export const SCREEN2_ICON = Object.freeze({
  size: 42,
  strokeWidth: 1.5,
  palette: ["#30dcff", "#19ffc6"],
  maxGlowAlpha: 0.28,
})

export function getScreen2SideCardHeight(viewportHeight = SCREEN2_LAYOUT.canvasHeight) {
  const safeHeight = Math.max(SCREEN2_LAYOUT.canvasHeight, Number(viewportHeight) || SCREEN2_LAYOUT.canvasHeight)
  const fittedHeight = Math.floor(
    (safeHeight - SCREEN2_LAYOUT.sidePanelTop - SCREEN2_LAYOUT.sidePanelBottom - SCREEN2_LAYOUT.sideCardGap * 3) / 4
  )
  return Math.max(SCREEN2_LAYOUT.sideCardMinHeight, fittedHeight)
}

export function getScreen2SpanHeight(cardHeight, span = 1) {
  const safeSpan = Math.max(1, Number(span) || 1)
  return cardHeight * safeSpan + SCREEN2_LAYOUT.sideCardGap * (safeSpan - 1)
}
