/**
 * Skeleton 扫光 — 可组合 CSS 变量与默认合成渐变
 */

export const SKELETON_SHIMMER_EDGE_VAR = '--motion-skeleton-shimmer-edge';
export const SKELETON_SHIMMER_HIGHLIGHT_VAR = '--motion-skeleton-shimmer-highlight';
export const SKELETON_SHIMMER_COMPOSED_VAR = '--motion-skeleton-shimmer-composed';
export const SKELETON_SHIMMER_OVERRIDE_VAR = '--motion-skeleton-shimmer-override';

/** 运行时 background-image 栈中的扫光层（支持整段覆盖 / 高光+边缘自动合成） */
export const SKELETON_SHIMMER_LAYER = `var(${SKELETON_SHIMMER_OVERRIDE_VAR}, var(${SKELETON_SHIMMER_COMPOSED_VAR}))`;

const SHIMMER_VAR_PREFIX = '--motion-skeleton-shimmer';

/** 由高光 + 边缘色 token 合成的默认扫光渐变（color-mix 控制透明度） */
export function buildSkeletonShimmerComposedGradient() {
  return [
    'linear-gradient(90deg,',
    `color-mix(in srgb, var(${SKELETON_SHIMMER_EDGE_VAR}, #667085) 4%, transparent) 0%,`,
    `color-mix(in srgb, var(${SKELETON_SHIMMER_EDGE_VAR}, #667085) 6%, transparent) 28%,`,
    `color-mix(in srgb, var(${SKELETON_SHIMMER_HIGHLIGHT_VAR}, #ffffff) 35%, transparent) 50%,`,
    `color-mix(in srgb, var(${SKELETON_SHIMMER_EDGE_VAR}, #667085) 6%, transparent) 72%,`,
    `color-mix(in srgb, var(${SKELETON_SHIMMER_EDGE_VAR}, #667085) 4%, transparent) 100%)`,
  ].join(' ');
}

export function isSkeletonShimmerStyleKey(key) {
  return typeof key === 'string' && key.startsWith(SHIMMER_VAR_PREFIX);
}

export function pickSkeletonShimmerStyle(style) {
  if (!style) return {};
  return Object.fromEntries(
    Object.entries(style).filter(([key]) => isSkeletonShimmerStyleKey(key)),
  );
}

/** 将解析后的高光/边缘色拼成实色渐变（预览画布用，不依赖 :root 合成变量） */
export function buildSkeletonShimmerGradientResolved(highlight, edge) {
  const hi = highlight || '#ffffff';
  const ed = edge || '#667085';
  return [
    'linear-gradient(90deg,',
    `color-mix(in srgb, ${ed} 4%, transparent) 0%,`,
    `color-mix(in srgb, ${ed} 6%, transparent) 28%,`,
    `color-mix(in srgb, ${hi} 35%, transparent) 50%,`,
    `color-mix(in srgb, ${ed} 6%, transparent) 72%,`,
    `color-mix(in srgb, ${ed} 4%, transparent) 100%)`,
  ].join(' ');
}

function resolveShimmerPaintValue(raw) {
  if (raw == null || raw === '') return undefined;
  const text = String(raw).trim();
  if (!text) return undefined;
  if (text.startsWith('linear-gradient')) return text;
  if (text.startsWith('var(')) return text;
  return text;
}

/**
 * 平台预览：把扫光 token 覆盖转成骨条可直接用的 background-image
 * @returns {{ backgroundImage: string, backgroundSize: string } | undefined}
 */
export function resolveSkeletonShimmerSurfaceStyle(shimmerStyle, { animated = true } = {}) {
  if (!animated || !shimmerStyle || Object.keys(shimmerStyle).length === 0) return undefined;

  const override = resolveShimmerPaintValue(shimmerStyle[SKELETON_SHIMMER_OVERRIDE_VAR]);
  if (override) {
    return {
      backgroundImage: override.startsWith('var(') ? override : override,
      backgroundSize: '240% 100%',
    };
  }

  const highlight = resolveShimmerPaintValue(shimmerStyle[SKELETON_SHIMMER_HIGHLIGHT_VAR]);
  const edge = resolveShimmerPaintValue(shimmerStyle[SKELETON_SHIMMER_EDGE_VAR]);
  if (!highlight && !edge) return undefined;

  return {
    backgroundImage: buildSkeletonShimmerGradientResolved(highlight, edge),
    backgroundSize: '240% 100%',
  };
}
