LabelingSystem/web/tools/design-tokens-converter/design-tokens-converter.mjs

import fs from "node:fs/promises";
import path from "node:path";
import { fileURLToPath } from "node:url";

const camelCase = (str) => {
  return str.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
};

// Get current file directory for resolving paths
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const RAW_COLOR_VALUE_TOKENS = ["primary", "shadow", "outline", "surface", "accent", "background"];

const shouldGenerateRawColorValue = (name) => {
  return RAW_COLOR_VALUE_TOKENS.some((token) => name.includes(token));
};

// Determine correct paths for the workspace
const findWorkspaceRoot = () => {
  // We'll start with this file's directory and go up until we find the web directory
  let currentDir = __dirname;
  while (!currentDir.endsWith("web") && currentDir !== "/") {
    currentDir = path.dirname(currentDir);
  }

  if (!currentDir.endsWith("web")) {
    throw new Error("Could not find workspace root directory");
  }

  return currentDir;
};

const workspaceRoot = findWorkspaceRoot();

// Paths
const designVariablesPath = path.join(workspaceRoot, "design-tokens.json");
const cssOutputPath = path.join(workspaceRoot, "libs/ui/src/tokens/tokens.scss");
const jsOutputPath = path.join(workspaceRoot, "libs/ui/src/tokens/tokens.js");

/**
 * Convert a value to rem units rounded to 4 decimal places no trailing zeros
 * @param {string} value - The value to convert
 * @returns {string} - The converted value in rem units
 */
function convertToRem(value) {
  const remValue = (Number(value) / 16).toFixed(4).replace(/\.?0+$/, "");
  // Ensure 0 is returned as a unitless value
  if (remValue === "0") {
    return remValue;
  }
  return `${remValue}rem`;
}

/**
 * Process design variables and extract tokens
 * @param {Object} variables - The design variables object
 * @returns {Object} - Object containing tokens for CSS and JavaScript
 */
function processDesignVariables(variables) {
  const result = {
    cssVariables: {
      light: [],
      dark: [],
    },
    jsTokens: {
      colors: {},
      spacing: {},
      typography: {},
      cornerRadius: {},
    },
  };

  // Process colors
  if (variables["@color"] && variables["@color"].$color) {
    processColorTokens(variables["@color"].$color, "", result, variables);
  }
  // Process primitives
  if (variables["@primitives"] && variables["@primitives"].$color) {
    processPrimitiveColors(variables["@primitives"].$color, result, variables);
  }

  // Process primitive spacing
  if (variables["@primitives"] && variables["@primitives"].$spacing) {
    processPrimitiveSpacing(variables["@primitives"].$spacing, result);
  }

  // Process primitive typography
  if (variables["@primitives"] && variables["@primitives"].$typography) {
    processPrimitiveTypography(variables["@primitives"].$typography, result);
  }

  // Process primitive corner-radius
  if (variables["@primitives"] && variables["@primitives"]["$corner-radius"]) {
    processPrimitiveCornerRadius(variables["@primitives"]["$corner-radius"], result);
  }

  // Process sizing tokens
  if (variables["@sizing"]) {
    processSizingTokens(variables["@sizing"], result, variables);
  }

  // Process typography
  if (variables["@typography"]) {
    processTypographyTokens(variables["@typography"], result, variables);
  }

  // Post-process for Tailwind compatibility
  result.jsTokens.colors = transformColorObjectForTailwind(result.jsTokens.colors);

  return result;
}

/**
 * Process primitive spacing tokens
 * @param {Object} spacingObj - The spacing object from primitives
 * @param {Object} result - The result object to populate
 */
function processPrimitiveSpacing(spacingObj, result) {
  for (const key in spacingObj) {
    if (spacingObj[key].$type === "number" && spacingObj[key].$value !== undefined) {
      const name = key.replace("$", "");
      const value = spacingObj[key].$value;
      const cssVarName = `--spacing-${name}`;

      // Add to CSS variables
      result.cssVariables.light.push(`${cssVarName}: ${convertToRem(value)};`);

      // Add to JavaScript tokens
      if (!result.jsTokens.spacing.primitive) {
        result.jsTokens.spacing.primitive = {};
      }

      result.jsTokens.spacing.primitive[name] = `var(${cssVarName})`;
    }
  }
}

/**
 * Process primitive typography tokens
 * @param {Object} typographyObj - The typography object from primitives
 * @param {Object} result - The result object to populate
 */
function processPrimitiveTypography(typographyObj, result) {
  // Process font sizes
  if (typographyObj["$font-size"]) {
    for (const key in typographyObj["$font-size"]) {
      if (
        typographyObj["$font-size"][key].$type === "number" &&
        typographyObj["$font-size"][key].$value !== undefined
      ) {
        const name = key.replace("$", "");
        const value = typographyObj["$font-size"][key].$value;
        const cssVarName = `--font-size-${name}`;

        // Add to CSS variables
        result.cssVariables.light.push(`${cssVarName}: ${convertToRem(value)};`);

        // Add to JavaScript tokens
        if (!result.jsTokens.typography.fontSize) {
          result.jsTokens.typography.fontSize = {};
        }
        if (!result.jsTokens.typography.fontSize.primitive) {
          result.jsTokens.typography.fontSize.primitive = {};
        }
        result.jsTokens.typography.fontSize.primitive[name] = `var(${cssVarName})`;
      }
    }
  }

  // Process font weights
  if (typographyObj["$font-weight"]) {
    for (const key in typographyObj["$font-weight"]) {
      if (
        typographyObj["$font-weight"][key].$type === "number" &&
        typographyObj["$font-weight"][key].$value !== undefined
      ) {
        const name = key.replace("$", "");
        const value = typographyObj["$font-weight"][key].$value;
        const cssVarName = `--font-weight-${name}`;

        // Add to CSS variables
        result.cssVariables.light.push(`${cssVarName}: ${value};`);

        // Add to JavaScript tokens
        if (!result.jsTokens.typography.fontWeight) {
          result.jsTokens.typography.fontWeight = {};
        }
        if (!result.jsTokens.typography.fontWeight.primitive) {
          result.jsTokens.typography.fontWeight.primitive = {};
        }
        result.jsTokens.typography.fontWeight.primitive[name] = `var(${cssVarName})`;
      }
    }
  }

  // Process line heights
  if (typographyObj["$line-height"]) {
    for (const key in typographyObj["$line-height"]) {
      if (
        typographyObj["$line-height"][key].$type === "number" &&
        typographyObj["$line-height"][key].$value !== undefined
      ) {
        const name = key.replace("$", "");
        const value = typographyObj["$line-height"][key].$value;
        const cssVarName = `--line-height-${name}`;

        // Add to CSS variables
        result.cssVariables.light.push(`${cssVarName}: ${convertToRem(value)};`);

        // Add to JavaScript tokens
        if (!result.jsTokens.typography.lineHeight) {
          result.jsTokens.typography.lineHeight = {};
        }
        if (!result.jsTokens.typography.lineHeight.primitive) {
          result.jsTokens.typography.lineHeight.primitive = {};
        }
        result.jsTokens.typography.lineHeight.primitive[name] = `var(${cssVarName})`;
      }
    }
  }

  // Process letter spacing
  if (typographyObj["$letter-spacing"]) {
    for (const key in typographyObj["$letter-spacing"]) {
      if (
        typographyObj["$letter-spacing"][key].$type === "number" &&
        typographyObj["$letter-spacing"][key].$value !== undefined
      ) {
        const name = key.replace("$", "");
        const value = typographyObj["$letter-spacing"][key].$value;
        const cssVarName = `--letter-spacing-${name}`;

        // Add to CSS variables
        result.cssVariables.light.push(`${cssVarName}: ${convertToRem(value)};`);

        // Add to JavaScript tokens
        if (!result.jsTokens.typography.letterSpacing) {
          result.jsTokens.typography.letterSpacing = {};
        }
        if (!result.jsTokens.typography.letterSpacing.primitive) {
          result.jsTokens.typography.letterSpacing.primitive = {};
        }
        result.jsTokens.typography.letterSpacing.primitive[name] = `var(${cssVarName})`;
      }
    }
  }

  // Process font families
  if (typographyObj["$font-family"]) {
    for (const key in typographyObj["$font-family"]) {
      if (typographyObj["$font-family"][key].$value !== undefined) {
        const name = key.replace("$", "");
        const value = typographyObj["$font-family"][key].$value;
        const cssVarName = `--font-family-${name}`;

        // Add to CSS variables
        result.cssVariables.light.push(`${cssVarName}: "${value}";`);

        // Add to JavaScript tokens
        if (!result.jsTokens.typography.fontFamily) {
          result.jsTokens.typography.fontFamily = {};
        }
        if (!result.jsTokens.typography.fontFamily.primitive) {
          result.jsTokens.typography.fontFamily.primitive = {};
        }
        result.jsTokens.typography.fontFamily.primitive[name] = `var(${cssVarName})`;
      }
    }
  }
}

/**
 * Process primitive corner radius tokens
 * @param {Object} cornerRadiusObj - The corner radius object from primitives
 * @param {Object} result - The result object to populate
 */
function processPrimitiveCornerRadius(cornerRadiusObj, result) {
  for (const key in cornerRadiusObj) {
    if (cornerRadiusObj[key].$type === "number" && cornerRadiusObj[key].$value !== undefined) {
      const name = key.replace("$", "");
      const value = cornerRadiusObj[key].$value;
      const cssVarName = `--corner-radius-${name}`;

      let resolvedValue;
      if (typeof value === "string" && value.startsWith("{") && value.endsWith("}")) {
        const reference = value.substring(1, value.length - 1);
        const parts = reference.split(".");

        // If it's a reference to a primitive spacing value, directly use the corresponding CSS variable
        if (parts[0] === "@primitives") {
          const collectionKey = parts[1].replace("$", "");
          const valueKey = parts[2].replace("$", "");
          resolvedValue = `var(--${collectionKey}-${valueKey})`;
          result.cssVariables.light.push(`${cssVarName}: ${resolvedValue};`);
        } else {
          // Otherwise, try to resolve the value normally
          resolvedValue = resolveReference(value, variables);
          result.cssVariables.light.push(`${cssVarName}: ${convertToRem(resolvedValue)};`);
        }
      } else {
        // Not a reference, use directly
        resolvedValue = value;
        result.cssVariables.light.push(`${cssVarName}: ${convertToRem(resolvedValue)};`);
      }

      // Add to JavaScript tokens
      if (!result.jsTokens.cornerRadius.primitive) {
        result.jsTokens.cornerRadius.primitive = {};
      }
      result.jsTokens.cornerRadius.primitive[name] = `var(${cssVarName})`;
    }
  }
}

/**
 * Process sizing tokens from design variables
 * @param {Object} sizingObj - The spacing object from design variables
 * @param {Object} result - The result object to populate
 * @param {Object} variables - The variables object for reference resolution
 * @param {String} parentKey - The parent key for nested tokens
 */
function processSizingTokens(sizingObj, result, variables, parentKey = "") {
  for (const key in sizingObj) {
    if (key.startsWith("$")) {
      // process nested keys
      processSizingTokens(
        sizingObj[key],
        result,
        variables,
        // Fix the variable name from corder to corner
        `${parentKey ? `${parentKey}-` : ""}${key.replace(/\$/g, "").replace("corder", "corner")}`,
      );
      continue;
    }

    if (sizingObj[key].$type === "number" && sizingObj[key].$value !== undefined) {
      const name = key.replace("$", "");
      const value = sizingObj[key].$value;
      const tokenKey = parentKey || key;
      const jsTokenKey = camelCase(tokenKey.replace("$", ""));
      const cssVarName = `--${tokenKey}-${name}`;

      let resolvedValue;
      if (typeof value === "string" && value.startsWith("{") && value.endsWith("}")) {
        const reference = value.substring(1, value.length - 1);
        const parts = reference.split(".");

        // If it's a reference to a primitive spacing value, directly use the corresponding CSS variable
        if (parts[0] === "@primitives") {
          const collectionKey = parts[1].replace("$", "");
          const valueKey = parts[2].replace("$", "");
          resolvedValue = `var(--${collectionKey}-${valueKey})`;
          result.cssVariables.light.push(`${cssVarName}: ${resolvedValue};`);
        } else {
          // Otherwise, try to resolve the value normally
          resolvedValue = resolveReference(value, variables);
          result.cssVariables.light.push(`${cssVarName}: ${convertToRem(resolvedValue)};`);
        }
      } else {
        // Not a reference, use directly
        resolvedValue = value;
        result.cssVariables.light.push(`${cssVarName}: ${convertToRem(resolvedValue)};`);
      }

      // Add to JavaScript tokens
      if (!result.jsTokens[jsTokenKey]) {
        result.jsTokens[jsTokenKey] = {};
      }

      result.jsTokens[jsTokenKey][name] = `var(${cssVarName})`;
    }
  }
}

function processTokenCollection(collectionKey, subCollectionKey) {
  const collectionJsKey = camelCase(collectionKey);
  const subCollectionJsKey = camelCase(subCollectionKey);
  const subCollectionKeyRegex = new RegExp(`${subCollectionKey}\\-?`, "g");
  return function process(tokenCollection, result, variables, parentKey = subCollectionKey) {
    for (const key in tokenCollection) {
      if (key.startsWith("$")) {
        // process nested keys
        process(tokenCollection[key], result, variables, `${parentKey ? `${parentKey}-` : ""}${key.replace("$", "")}`);
        continue;
      }

      if (tokenCollection[key].$value !== undefined) {
        const isNumber = tokenCollection[key].$type === "number";
        const name = key.replace("$", "");
        const value = tokenCollection[key].$value;
        const cssVarName = `--${parentKey}-${name}`;

        let resolvedValue;
        if (typeof value === "string" && value.startsWith("{") && value.endsWith("}")) {
          const reference = value.substring(1, value.length - 1);
          const parts = reference.replace(`$${collectionKey}.`, "").split(".");

          // If it's a reference to a primitive spacing value, directly use the corresponding CSS variable
          if (parts[0] === "@primitives") {
            const collectionKey = parts[1].replace("$", "");
            const valueKey = parts[2].replace("$", "");
            resolvedValue = `var(--${collectionKey}-${valueKey})`;
            result.cssVariables.light.push(`${cssVarName}: ${resolvedValue};`);
          } else {
            // Otherwise, try to resolve the value normally
            resolvedValue = resolveReference(value, variables);
            result.cssVariables.light.push(`${cssVarName}: ${isNumber ? convertToRem(resolvedValue) : resolvedValue};`);
          }
        } else {
          // Not a reference, use directly
          resolvedValue = value;
          result.cssVariables.light.push(`${cssVarName}: ${resolvedValue};`);
        }

        // Add to JavaScript tokens
        if (!result.jsTokens[collectionJsKey]) {
          result.jsTokens[collectionJsKey] = {};
        }
        if (!result.jsTokens[collectionJsKey][subCollectionJsKey]) {
          result.jsTokens[collectionJsKey][subCollectionJsKey] = {};
        }
        const jsKey = `${parentKey ? `${parentKey}-` : ""}${name}`;
        result.jsTokens[collectionJsKey][subCollectionJsKey][jsKey.replace(subCollectionKeyRegex, "")] =
          `var(${cssVarName})`;
      }
    }
  };
}

/**
 * Process font size tokens
 * @param {Object} fontSizeObj - The font size object from typography
 * @param {Object} result - The result object to populate
 * @param {Object} variables - The variables object for reference resolution
 * @param {String} parentKey - The parent key for nested tokens
 */
const processFontSizeTokens = processTokenCollection("typography", "font-size");

/**
 * Process font weight tokens
 * @param {Object} fontWeightObj - The font weight object from typography
 * @param {Object} result - The result object to populate
 * @param {Object} variables - The variables object for reference resolution
 */
const processFontWeightTokens = processTokenCollection("typography", "font-weight");

/**
 * Process line height tokens
 * @param {Object} lineHeightObj - The line height object from typography
 * @param {Object} result - The result object to populate
 * @param {Object} variables - The variables object for reference resolution
 */
const processLineHeightTokens = processTokenCollection("typography", "line-height");

/**
 * Process letter spacing tokens
 * @param {Object} letterSpacingObj - The letter spacing object from typography
 * @param {Object} result - The result object to populate
 * @param {Object} variables - The variables object for reference resolution
 */
const processLetterSpacingTokens = processTokenCollection("typography", "letter-spacing");

/**
 * Process font family tokens
 * @param {Object} fontObj - The font family object from typography
 * @param {Object} result - The result object to populate
 */
const processFontFamilyTokens = processTokenCollection("typography", "font-family");

/**
 * Process typography tokens from design variables
 * @param {Object} typographyObj - The typography object from design variables
 * @param {Object} result - The result object to populate
 * @param {Object} variables - The variables object for reference resolution
 */
function processTypographyTokens(typographyObj, result, variables) {
  // Process font families
  if (typographyObj["$font-family"]) {
    processFontFamilyTokens(typographyObj["$font-family"], result, variables);
  }

  // Process font sizes
  if (typographyObj["$font-size"]) {
    processFontSizeTokens(typographyObj["$font-size"], result, variables);
  }

  // Process font weights
  if (typographyObj["$font-weight"]) {
    processFontWeightTokens(typographyObj["$font-weight"], result, variables);
  }

  // Process line heights
  if (typographyObj["$line-height"]) {
    processLineHeightTokens(typographyObj["$line-height"], result, variables);
  }

  // Process letter spacing
  if (typographyObj["$letter-spacing"]) {
    processLetterSpacingTokens(typographyObj["$letter-spacing"], result, variables);
  }
}

/**
 * Process color tokens from design variables
 * @param {Object} colorObj - The color object from design variables
 * @param {String} parentPath - The parent path for nesting
 * @param {Object} result - The result object to populate
 */
function processColorTokens(colorObj, parentPath, result, variables) {
  for (const key in colorObj) {
    if (typeof colorObj[key] === "object" && !Array.isArray(colorObj[key])) {
      const newPath = parentPath ? `${parentPath}-${key.replace(/\$/g, "")}` : key.replace(/\$/g, "");

      // If this is a color token with value and type
      if (colorObj[key].$type === "color" && colorObj[key].$value) {
        const name = parentPath ? `${parentPath}-${key.replace(/\$/g, "")}` : key.replace(/\$/g, "");
        const value = colorObj[key].$value;
        const cssVarName = `--color-${name.replace(/\$/g, "")}`;

        // Add to CSS variables for light mode
        if (
          colorObj[key].$variable_metadata &&
          colorObj[key].$variable_metadata.modes &&
          colorObj[key].$variable_metadata.modes.light
        ) {
          const lightValue = resolveColor(colorObj[key].$variable_metadata.modes.light, variables);
          result.cssVariables.light.push(`${cssVarName}: ${lightValue};`);

          if (shouldGenerateRawColorValue(name)) {
            const rawRgbValues = hexToRgbRaw(colorObj[key].$variable_metadata.modes.light, variables);
            result.cssVariables.light.push(`${cssVarName}-raw: ${rawRgbValues};`);
          }
        } else {
          const resolvedValue = resolveColor(value, variables);
          result.cssVariables.light.push(`${cssVarName}: ${resolvedValue};`);

          if (shouldGenerateRawColorValue(name)) {
            const rawRgbValues = hexToRgbRaw(value, variables);
            result.cssVariables.light.push(`${cssVarName}-raw: ${rawRgbValues};`);
          }
        }

        // Add to CSS variables for dark mode
        if (
          colorObj[key].$variable_metadata &&
          colorObj[key].$variable_metadata.modes &&
          colorObj[key].$variable_metadata.modes.dark
        ) {
          const darkValue = resolveColor(colorObj[key].$variable_metadata.modes.dark, variables);
          result.cssVariables.dark.push(`${cssVarName}: ${darkValue};`);

          if (shouldGenerateRawColorValue(name)) {
            const rawRgbValues = hexToRgbRaw(colorObj[key].$variable_metadata.modes.dark, variables);
            result.cssVariables.dark.push(`${cssVarName}-raw: ${rawRgbValues};`);
          }
        }

        // Add to JavaScript tokens
        addToJsTokens(result.jsTokens.colors, name.replace(/\$/g, ""), cssVarName);
      } else {
        // Recursively process nested color objects
        processColorTokens(colorObj[key], newPath, result, variables);
      }
    }
  }
}

/**
 * Process primitive colors
 * @param {Object} primitiveColors - The primitive colors object
 * @param {Object} result - The result object to populate
 * @param {Object} variables - The variables object for reference resolution
 */
function processPrimitiveColors(primitiveColors, result, variables) {
  for (const colorFamily in primitiveColors) {
    const familyName = colorFamily.replace("$", "");

    for (const shade in primitiveColors[colorFamily]) {
      try {
        if (primitiveColors[colorFamily][shade].$type === "color" && primitiveColors[colorFamily][shade].$value) {
          const name = `${familyName}-${shade}`;
          const value = primitiveColors[colorFamily][shade].$value;
          const cssVarName = `--color-${name}`;

          // Add to CSS variables, converting to RGB format for opacity support
          const rgbValue = hexToRgb(value);
          result.cssVariables.light.push(`${cssVarName}: ${rgbValue};`);

          // Add raw RGB values for primitives to support translucent colors
          // if dark mode is available
          if (
            primitiveColors[colorFamily][shade].$variable_metadata &&
            primitiveColors[colorFamily][shade].$variable_metadata.modes &&
            primitiveColors[colorFamily][shade].$variable_metadata.modes.dark
          ) {
            const rawRgbValues = hexToRgbRaw(value);
            result.cssVariables.light.push(`${cssVarName}-raw: ${rawRgbValues};`);

            const darkValue = primitiveColors[colorFamily][shade].$variable_metadata.modes.dark;
            const darkRgbValue = hexToRgb(darkValue);
            result.cssVariables.dark.push(`${cssVarName}: ${darkRgbValue};`);

            // Add raw RGB values for dark mode
            const darkRawRgbValues = hexToRgbRaw(darkValue);
            result.cssVariables.dark.push(`${cssVarName}-raw: ${darkRawRgbValues};`);
          }

          // Add to JavaScript tokens
          if (!result.jsTokens.colors.primitive) {
            result.jsTokens.colors.primitive = {};
          }
          if (!result.jsTokens.colors.primitive[familyName]) {
            result.jsTokens.colors.primitive[familyName] = {};
          }

          result.jsTokens.colors.primitive[familyName][shade] = `var(${cssVarName})`;
        }
      } catch (error) {
        console.warn(`Warning: Error processing primitive color ${colorFamily}.${shade}:`, error.message);
      }
    }
  }
}

/**
 * Convert hex color to RGB format for opacity support
 * @param {string} hex - Hex color code
 * @returns {string} - RGB color format as rgb(r, g, b) or raw r g b
 * @param {boolean} raw - Whether to return the raw RGB values
 */
function hexToRgb(hex, raw = false) {
  // Check if it's already in rgb/rgba format
  if (hex.startsWith("rgb")) {
    return raw ? hex.replace("rgb(", "").replace(")", "") : hex;
  }

  // Remove # if present
  hex = hex.replace(/^#/, "");

  // Parse the hex values
  let r;
  let g;
  let b;
  if (hex.length === 3) {
    // Convert 3-digit hex to 6-digit
    r = Number.parseInt(hex[0] + hex[0], 16);
    g = Number.parseInt(hex[1] + hex[1], 16);
    b = Number.parseInt(hex[2] + hex[2], 16);
  } else if (hex.length === 6) {
    r = Number.parseInt(hex.substring(0, 2), 16);
    g = Number.parseInt(hex.substring(2, 4), 16);
    b = Number.parseInt(hex.substring(4, 6), 16);
  } else {
    // Invalid hex, return as is
    return hex;
  }

  // Return RGB format
  return raw ? `${r} ${g} ${b}` : `rgb(${r} ${g} ${b})`;
}

/**
 * Convert hex color to raw RGB values for translucent color support
 * @param {string} hex - Hex color code or reference
 * @param {Object} variables - Variables for resolving references
 * @returns {string} - Raw RGB values as "r g b"
 */
function hexToRgbRaw(hex, variables) {
  // If it's a reference, try to resolve it
  if (typeof hex === "string" && hex.startsWith("{") && hex.endsWith("}") && variables) {
    const resolvedValue = resolveReference(hex, variables);
    if (resolvedValue !== hex) {
      return hexToRgbRaw(resolvedValue);
    }
  }

  // Check if it's already in rgb/rgba format
  if (typeof hex === "string" && hex.startsWith("rgb")) {
    // Extract the RGB values from the rgb() format
    const match = hex.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
    if (match) {
      return `${match[1]} ${match[2]} ${match[3]}`;
    }
    return hex;
  }

  if (typeof hex === "string") {
    return hexToRgb(hex, true);
  }

  return hex;
}

/**
 * Resolve color values, handling references to other variables
 * @param {String} value - The color value to resolve
 * @param {Object} variables - The variables object for reference resolution
 * @param {Boolean} asCssVariable - Whether to return the value as a CSS variable
 * @returns {String} - The resolved color value
 */
function resolveColor(value, variables, asCssVariable = true) {
  if (typeof value !== "string") return value;

  // Handle references like "{@primitives.$color.$sand.100}"
  if (value.startsWith("{") && value.endsWith("}")) {
    const reference = value.substring(1, value.length - 1);
    const parts = reference.split(".");

    if (asCssVariable) {
      // Remove 'primitive' from CSS variable references
      if (reference.startsWith("@primitives.$color")) {
        return `var(--color-${reference.replace("@primitives.$color.", "").replace(/[$\.]/g, "-").substring(1)})`;
      }
      return `var(--color-${reference
        .replace("@primitives.", "")
        .replace("$color.", "")
        .replace(/[$\.]/g, "-")
        .substring(1)})`;
    }

    // Navigate through the object to find the referenced value
    let current = variables;
    for (const part of parts) {
      if (current[part]) {
        current = current[part];
      } else {
        // If we can't resolve, return the CSS variable equivalent
        if (reference.startsWith("@primitives.$color")) {
          return `var(--color-${reference.replace("@primitives.$color.", "").replace(/[$\.]/g, "-").substring(1)})`;
        }
        return `var(--color-${reference.replace(/[@$\.]/g, "-").substring(1)})`;
      }
    }

    if (current.$value) {
      return hexToRgb(current.$value);
    }

    return value;
  }

  // Convert direct color values to RGB
  return hexToRgb(value);
}

/**
 * Resolve references to other variables
 * @param {String|Number} value - The value to resolve
 * @param {Object} variables - The variables object for reference resolution
 * @returns {String|Number} - The resolved value
 */
function resolveReference(value, variables) {
  if (typeof value !== "string") return value;

  // Handle references like "{@sizing.$spacing.base}"
  if (value.startsWith("{") && value.endsWith("}")) {
    const reference = value.substring(1, value.length - 1);
    const parts = reference.split(".");

    // Navigate through the object to find the referenced value
    let current = variables;
    for (const part of parts) {
      if (current[part]) {
        current = current[part];
      } else {
        // If we can't resolve, return the original value
        return value;
      }
    }

    if (current.$value !== undefined) {
      return current.$value;
    }

    return value;
  }

  return value;
}

/**
 * Add a token to the JavaScript tokens object
 * @param {Object} obj - The object to add to
 * @param {String} path - The path to add at
 * @param {String} cssVarName - The CSS variable name
 */
function addToJsTokens(obj, path, cssVarName) {
  const parts = path.split("-");
  let current = obj;

  // Handle the case where we have nested properties like "surface-hover"
  // which should be transformed to obj.surface.hover
  for (let i = 0; i < parts.length - 1; i++) {
    const part = parts[i];

    // Check if this is a terminal value (string) that we're trying to add properties to
    if (typeof current[part] === "string") {
      // Create a new object to replace the string value
      const oldValue = current[part];
      current[part] = {
        DEFAULT: oldValue,
      };
    } else if (!current[part]) {
      current[part] = {};
    }

    current = current[part];
  }

  const lastPart = parts[parts.length - 1];

  // If lastPart is something like "hover" and we're dealing with "surface-hover",
  // we should set it as a property of the "surface" object
  current[lastPart] = `var(${cssVarName})`;
}

/**
 * Generate CSS content
 * @param {Object} result - The processed tokens
 * @returns {String} - The CSS content
 */
function generateCssContent(result) {
  let content = "// Generated from design-tokens.json - DO NOT EDIT DIRECTLY\n\n";

  // Light mode variables (default)
  content += ":root {\n";
  result.cssVariables.light.forEach((variable) => {
    content += `  ${variable}\n`;
  });
  content += "}\n\n";

  // Dark mode variables
  content += '[data-color-scheme="dark"] {\n';
  result.cssVariables.dark.forEach((variable) => {
    content += `  ${variable}\n`;
  });
  content += "}\n";

  return content;
}

/**
 * Transform color object structure for better Tailwind CSS compatibility
 * @param {Object} colors - The color object to transform
 * @returns {Object} - The transformed color object
 */
function transformColorObjectForTailwind(colors) {
  const transformed = {};

  // Process each color category
  for (const category in colors) {
    transformed[category] = {};
    const colorGroup = colors[category];

    // Group variants like "surface-hover" under their base name with variants as properties
    for (const key in colorGroup) {
      const parts = key.split("-");

      // Skip if already processed
      if (parts.length === 1) {
        transformed[category][key] = colorGroup[key];
        continue;
      }

      // Handle cases like "surface-hover", "surface-active", etc.
      const baseName = parts[0];
      const variantName = parts.slice(1).join("-");

      if (!transformed[category][baseName]) {
        // Check if base color exists in original object
        if (colorGroup[baseName]) {
          transformed[category][baseName] = {
            DEFAULT: colorGroup[baseName],
          };
        } else {
          transformed[category][baseName] = {};
        }
      } else if (typeof transformed[category][baseName] === "string") {
        // Convert string value to object with DEFAULT property
        transformed[category][baseName] = {
          DEFAULT: transformed[category][baseName],
        };
      }

      // Add the variant
      transformed[category][baseName][variantName] = colorGroup[key];
    }
  }

  return transformed;
}

/**
 * Process JS tokens for output, merging primitive values
 * @param {Object} tokens - The tokens to process
 * @returns {Object} - The processed tokens
 */
function processJsTokens(tokens) {
  // Merge primitive values at all levels
  const merged = mergePrimitiveValues(tokens);

  // Then transform colors for Tailwind if they exist
  if (merged.colors) {
    merged.colors = transformColorObjectForTailwind(merged.colors);
  }

  return merged;
}

/**
 * Merge primitive values from nested structures
 * @param {Object} values - The object to process
 * @returns {Object} - The processed object with primitive values merged
 */
function mergePrimitiveValues(values) {
  if (typeof values !== "object" || values === null || Array.isArray(values)) {
    return values;
  }

  const result = {};

  // First, process all non-primitive keys and add them to the result
  for (const [key, value] of Object.entries(values)) {
    if (key !== "primitive") {
      if (typeof value === "object" && value !== null && !Array.isArray(value)) {
        result[key] = mergePrimitiveValues(value);
      } else {
        result[key] = value;
      }
    }
  }

  // Then, if there's a primitive key, merge up its values into the result
  if (values.primitive) {
    if (typeof values.primitive === "object" && !Array.isArray(values.primitive)) {
      // Handle nested primitive objects (e.g., typography.primitive.fontSize)
      for (const [primKey, primValue] of Object.entries(values.primitive)) {
        result[primKey] = mergePrimitiveValues(primValue);
      }
    }
  }

  return result;
}

/**
 * Generate JS content from tokens
 * @param {Object} jsTokens - The JS tokens to convert to content
 * @returns {string} - The JS content
 */
function generateJsContent(jsTokens) {
  const content = `// This file is generated by the design-tokens-converter tool.
// Do not edit this file directly. Edit design-tokens.json instead.

const designTokens = ${JSON.stringify(processJsTokens(jsTokens), null, 2)};

module.exports = designTokens;
`;

  return content;
}

/**
 * Main function to run the design tokens converter
 */
const designTokensConverter = async () => {
  try {
    console.log("Reading design variables file from:", designVariablesPath);

    // Check if file exists before trying to read it
    try {
      await fs.access(designVariablesPath);
    } catch (error) {
      console.error(`Error: The design-tokens.json file does not exist at ${designVariablesPath}`);
      console.log("Please create this file by exporting your design tokens from Figma");
      return { success: false, error: "Design tokens file not found" };
    }

    const designVariablesData = await fs.readFile(designVariablesPath, "utf8");

    try {
      const variables = JSON.parse(designVariablesData);

      console.log("Processing design variables...");
      const processed = processDesignVariables(variables);

      console.log("Generating CSS...");
      const cssContent = generateCssContent(processed);

      console.log("Generating JavaScript...");
      const jsContent = generateJsContent(processed.jsTokens);

      // Ensure directory exists
      const cssDir = path.dirname(cssOutputPath);
      await fs.mkdir(cssDir, { recursive: true });

      // Write files
      await fs.writeFile(cssOutputPath, cssContent);
      await fs.writeFile(jsOutputPath, jsContent);

      console.log(`CSS variables written to ${cssOutputPath}`);
      console.log(`JavaScript tokens written to ${jsOutputPath}`);

      return { success: true };
    } catch (parseError) {
      console.error("Error parsing design tokens JSON:");
      console.trace(parseError);
      console.log("Please ensure your design-tokens.json file contains valid JSON");
      return { success: false, error: "JSON parsing error" };
    }
  } catch (error) {
    console.error("Error:", error);
    return { success: false, error: error.message };
  }
};

// Execute the function when this script is run directly
if (import.meta.url === `file://${process.argv[1]}`) {
  designTokensConverter().then((result) => {
    if (!result.success) {
      process.exit(1);
    }
    console.log("Design tokens conversion complete");
  });
}

export default designTokensConverter;