/**
 * Figma's numbers against the browser's.
 *
 * The Figma side is `getCSSAsync()` — the same declarations Dev Mode shows for
 * a node. The kit side is `getComputedStyle` on the element the page is
 * actually rendering. Both are CSS, but they are not written the same way:
 * Figma emits shorthands (`padding: 10px 16px`, `border: 1px solid #ccc`) and
 * hex colours, the browser emits longhands and `rgb()`. Everything below exists
 * to make the two comparable, so a row that differs is a real difference and
 * not a spelling one.
 */

import { pair, paintToHex } from '~/chrome/lib/color';

export interface DiffRow {
  property: string;
  figma?: string;
  kit?: string;
  /** `null` when only one side states the property — nothing to conclude. */
  same: boolean | null;
}

/**
 * The properties worth looking at. Order is the order of the table.
 *
 * `width` is deliberately absent: a Figma variant is a frame around a fixed
 * label and the kit's control hugs whatever it is given, so the two never agree
 * and the row would be a permanent false positive. Height is the measurement
 * CBAR actually specifies.
 */
const KEYS = [
  'height',
  'padding-top',
  'padding-right',
  'padding-bottom',
  'padding-left',
  'gap',
  'border-radius',
  'border-width',
  'border-color',
  'background-color',
  'color',
  'font-family',
  'font-size',
  'font-weight',
  'line-height',
  'letter-spacing',
] as const;

const SIDES = ['top', 'right', 'bottom', 'left'] as const;

/** `10px 16px` → `[top, right, bottom, left]`, the CSS way round. */
function expand(value: string): [string, string, string, string] | undefined {
  const parts = value.trim().split(/\s+/);
  if (parts.length === 1) return [parts[0], parts[0], parts[0], parts[0]];
  if (parts.length === 2) return [parts[0], parts[1], parts[0], parts[1]];
  if (parts.length === 3) return [parts[0], parts[1], parts[2], parts[1]];
  if (parts.length === 4) return [parts[0], parts[1], parts[2], parts[3]];
  return undefined;
}

const HEX = /^#([0-9a-f]{3,8})$/i;
const RGB = /^rgba?\(([^)]+)\)$/i;

const COLOUR_KEYS = new Set(['color', 'background-color', 'border-color']);

/** Both sides down to `#rrggbb`, or `#rrggbbaa` when it is not opaque. */
function toHex(value: string, allowPaint: boolean): string | undefined {
  const trimmed = value.trim().toLowerCase();

  const hex = HEX.exec(trimmed);
  if (hex) {
    const d = hex[1];
    if (d.length === 3) return `#${d[0]}${d[0]}${d[1]}${d[1]}${d[2]}${d[2]}`;
    if (d.length === 4) return `#${d[0]}${d[0]}${d[1]}${d[1]}${d[2]}${d[2]}${d[3]}${d[3]}`;
    return `#${d}`;
  }

  const rgb = RGB.exec(trimmed);
  if (rgb) {
    const parts = rgb[1].split(/[,/]/).map((p) => p.trim());
    if (parts.length < 3) return undefined;
    const [r, g, b] = parts.map((p) => Math.round(parseFloat(p)));
    const a = parts[3] === undefined ? 1 : parseFloat(parts[3]);
    if ([r, g, b].some(Number.isNaN)) return undefined;
    const base = `#${pair(r)}${pair(g)}${pair(b)}`;
    return a >= 1 ? base : `${base}${pair(Math.round(a * 255))}`;
  }

  if (!allowPaint) return undefined;
  const painted = paintToHex(trimmed);
  if (!painted) return undefined;
  return painted === 'transparent' ? painted : (toHex(painted, false) ?? undefined);
}

/**
 * `var(--surface-colored-secondary, #4bc7b5)` → `#4bc7b5`.
 *
 * Figma writes a fill that is bound to a variable as a `var()` reference with
 * the resolved colour as its fallback. The name is CBAR's, not the kit's, so
 * the fallback is the only half of it worth comparing.
 */
const VAR = /^var\(\s*--[^,)]+,\s*(.+)\)$/i;

/**
 * One canonical spelling per value.
 *
 * `16.000001px` and `16px` are the same measurement; `rgb(0, 73, 118)` and
 * `#004976` are the same colour; `"DM Sans", sans-serif` and `DM Sans` are the
 * same face as far as a design review is concerned.
 */
function canonical(property: string, raw: string | undefined): string | undefined {
  if (raw === undefined) return undefined;
  let value = raw.trim();
  if (!value) return undefined;

  const bound = VAR.exec(value);
  if (bound) value = bound[1].trim();

  if (property === 'font-family') {
    return value.split(',')[0].replace(/['"]/g, '').trim().toLowerCase();
  }

  /* A fully transparent background is `rgba(0, 0, 0, 0)` in the browser and
     simply absent in Figma — saying so beats printing a black that is not
     there. Checked before the hex conversion, which would call it `#00000000`. */
  if (/^rgba?\(0,\s*0,\s*0,\s*0\)$/i.test(value)) return 'transparent';

  const colour = toHex(value, COLOUR_KEYS.has(property));
  if (colour) return colour;

  const px = /^(-?[\d.]+)px$/.exec(value);
  if (px) return `${Math.round(parseFloat(px[1]) * 100) / 100}px`;

  if (value === 'normal' || value === 'none') return value;
  return value.toLowerCase();
}

/**
 * Figma's declarations, flattened onto the longhands the table compares.
 *
 * `getCSSAsync()` writes what a designer would paste, so the shorthands have to
 * come apart before anything can be matched against `getComputedStyle`.
 */
function flattenFigma(css: Record<string, string>): Record<string, string> {
  const out: Record<string, string> = {};
  for (const [key, value] of Object.entries(css)) out[key.toLowerCase()] = value;

  const padding = out.padding;
  if (padding) {
    const sides = expand(padding);
    if (sides) SIDES.forEach((side, i) => (out[`padding-${side}`] ??= sides[i]));
  }

  /* Figma writes a solid fill as `background`, never `background-color`, and a
     gradient as the same key — which `canonical` will simply pass through as a
     string rather than pretend is a colour. */
  if (out.background && !out['background-color']) out['background-color'] = out.background;

  const border = out.border;
  if (border) {
    const width = /(-?[\d.]+px)/.exec(border);
    if (width) out['border-width'] ??= width[1];
    const colour = /(#[0-9a-f]{3,8}|rgba?\([^)]+\))/i.exec(border);
    if (colour) out['border-color'] ??= colour[1];
  }

  return out;
}

/**
 * The browser side.
 *
 * Border is read per-side: the shorthands are not reliably present in a
 * computed style, and every kit control draws its border uniformly anyway.
 */
function readComputed(el: Element): Record<string, string> {
  const style = getComputedStyle(el);
  const box = el.getBoundingClientRect();
  const out: Record<string, string> = {};

  for (const key of KEYS) {
    if (key === 'border-width' || key === 'border-color' || key === 'height') continue;
    out[key] = style.getPropertyValue(key);
  }

  out['border-width'] = style.getPropertyValue('border-top-width');
  out['border-color'] = style.getPropertyValue('border-top-color');
  /* The rendered box, not the declared one: `height: auto` on a control that
     measures 40px is the number worth comparing. */
  out.height = `${box.height}px`;

  return out;
}

/**
 * A TEXT node's type settings, as `figma_text` reports them.
 *
 * `getCSSAsync()` on a variant describes the frame, not the label inside it,
 * so every type row would read blank without this. Fields go `mixed` the moment
 * a range overrides them, which is why each one is checked rather than assumed.
 */
export interface FigmaTextStyle {
  fontFamily?: string;
  fontSize?: number;
  fontWeight?: number;
  lineHeightPx?: number;
  letterSpacing?: number;
}

function fromTextStyle(style: FigmaTextStyle): Record<string, string> {
  const out: Record<string, string> = {};
  if (style.fontFamily) out['font-family'] = style.fontFamily;
  if (typeof style.fontSize === 'number') out['font-size'] = `${style.fontSize}px`;
  if (typeof style.fontWeight === 'number') out['font-weight'] = String(style.fontWeight);
  if (typeof style.lineHeightPx === 'number') out['line-height'] = `${style.lineHeightPx}px`;
  /* Figma's 0 means "no tracking", which the browser calls `normal`. */
  if (typeof style.letterSpacing === 'number') {
    out['letter-spacing'] = style.letterSpacing === 0 ? 'normal' : `${style.letterSpacing}px`;
  }
  return out;
}

/**
 * @param figmaCss  the `css` object from a `figma_css` answer
 * @param el        the element the kit rendered, or null before it mounts
 * @param box       the Figma variant's own measured box, which `getCSSAsync()`
 *                  leaves out whenever the frame hugs its contents
 * @param text      the label's type settings, from a `figma_text` answer
 */
export function diffCss(
  figmaCss: Record<string, string>,
  el: Element | null,
  box?: { height?: number },
  text?: FigmaTextStyle
): DiffRow[] {
  const figma = flattenFigma(figmaCss);
  if (box?.height !== undefined) figma.height ??= `${box.height}px`;
  if (text) for (const [k, v] of Object.entries(fromTextStyle(text))) figma[k] ??= v;

  const kit = el ? readComputed(el) : {};

  return KEYS.map((property) => {
    const a = canonical(property, figma[property]);
    const b = canonical(property, kit[property]);
    return {
      property,
      figma: a,
      kit: b,
      same: a === undefined || b === undefined ? null : a === b,
    };
  }).filter((row) => row.figma !== undefined || row.kit !== undefined);
}