import * as React from 'react';
import { cn } from '../../shared/utils';
import { ISOTYPE_COLORS } from './patterns';
import { ISOTYPE_FRAME_VARIANTS, type IsotypeFrameVariantId } from './frame-variants';

export interface IsotypeFramesProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Which registered color-pair variant to render. */
  variant?: IsotypeFrameVariantId;
  /** Accessible label. Omit for purely decorative use. */
  'aria-label'?: string;
}

const FRAME_SIZE = 78;
const FRAME_THICKNESS = 27;
/** CSS blend mode used to combine the two frames — the intersection color is whatever this mode produces, not a fixed value. */
const FRAME_BLEND_MODE: React.CSSProperties['mixBlendMode'] = 'multiply';
/** A sixth of the frame size — how far the front frame leans diagonally past the back frame. */
const FRAME_OFFSET = FRAME_SIZE / 6;
/** Painted first (behind); flush to the top-left corner. */
const BACK_FRAME = { x: 0, y: 0 };
/** Painted second (in front) — dominates the blend; shifted diagonally toward the bottom-right by FRAME_OFFSET. */
const FRONT_FRAME = { x: FRAME_OFFSET, y: FRAME_OFFSET };
/** Half the stroke width — the minimum symmetric margin so no painted stroke is clipped by the viewBox. */
const VIEWBOX_MIN = -FRAME_THICKNESS / 2;
const VIEWBOX_SIZE = FRAME_SIZE + FRAME_OFFSET + FRAME_THICKNESS;

/**
 * Two overlapping hollow square frames — the second mark in the Xertica
 * "isotipos" series. Both frames render fully opaque; their intersection
 * blends into a third color via a CSS mix-blend-mode, not transparency.
 *
 * @ai-rules
 * 1. Colors are fixed brand hex values (see `patterns.ts`), not theme tokens — never make them theme-reactive.
 * 2. The intersection color is a rendering side-effect of `FRAME_BLEND_MODE`, not data — never hardcode a third color per variant.
 * 3. Add new color pairs via `ISOTYPE_FRAME_VARIANTS` in `frame-variants.ts`; this component never needs to change.
 * 4. Pair order is `[back, front]` — the front (second) color dominates the intersection blend.
 * 5. The root `isolate` class scopes the blend to these two frames — removing it would let the front frame blend against whatever sits behind this component on the page.
 */
export function IsotypeFrames({
  variant = 'blue-magenta',
  className,
  'aria-label': ariaLabel,
  ...props
}: IsotypeFramesProps) {
  const [backKey, frontKey] = ISOTYPE_FRAME_VARIANTS[variant];

  return (
    <div
      role={ariaLabel ? 'img' : undefined}
      aria-label={ariaLabel}
      aria-hidden={ariaLabel ? undefined : true}
      className={cn('isolate aspect-square', className)}
      {...props}
    >
      <svg
        viewBox={`${VIEWBOX_MIN} ${VIEWBOX_MIN} ${VIEWBOX_SIZE} ${VIEWBOX_SIZE}`}
        className="h-full w-full"
        aria-hidden="true"
      >
        <rect
          x={BACK_FRAME.x}
          y={BACK_FRAME.y}
          width={FRAME_SIZE}
          height={FRAME_SIZE}
          fill="none"
          stroke={ISOTYPE_COLORS[backKey]}
          strokeWidth={FRAME_THICKNESS}
        />
        <rect
          x={FRONT_FRAME.x}
          y={FRONT_FRAME.y}
          width={FRAME_SIZE}
          height={FRAME_SIZE}
          fill="none"
          stroke={ISOTYPE_COLORS[frontKey]}
          strokeWidth={FRAME_THICKNESS}
          style={{ mixBlendMode: FRAME_BLEND_MODE }}
        />
      </svg>
    </div>
  );
}