import * as React from 'react';
import { cn } from '../../shared/utils';
import { ISOTYPE_COLORS } from './patterns';

export interface IsotypeDiagonalProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Accessible label. Omit for purely decorative use. */
  'aria-label'?: string;
}

const CELL = 25;
const SIZE = 100;

/**
 * A single fixed diagonal-cut variation of the "core" grid isotype — the
 * third mark in the Xertica "isotipos" series. Three color-pair boundaries
 * (blue/green, magenta/red, and yellow's hypotenuse) all lie on the same
 * outer-corner-to-outer-corner diagonal of the square.
 *
 * @ai-rules
 * 1. Colors are fixed brand hex values (see `patterns.ts`), not theme tokens — never make them theme-reactive.
 * 2. All 8 shapes' coordinates are interdependent — never move one vertex/rect without re-checking every seam it backs or is backed by.
 * 3. This is one fixed composition, not a data-driven pattern — there is no variant/pattern prop and none should be added speculatively.
 * 4. The blank polygon's `fill="none"` is required, not cosmetic — an SVG shape with no `fill` renders solid black, unlike a CSS `background-color` left unset.
 * 5. `blue` and `red` are full-width backing rectangles, wider than the triangular shape they end up visually showing — `purple`/`green` paint over `blue`, and `magenta`/`brown` paint over `red`. A browser only renders a visible anti-aliasing seam where a shape's edge borders empty space; painting the diagonal-tip shapes directly over a same-side opaque rectangle means any imperfect edge coverage reveals more of that matching color instead of the page background, with no stroke or scale involved. Never shrink `blue`/`red` back down to their visible triangle, and never move `purple`/`green`/`magenta`/`brown` earlier than `blue`/`red` in paint order — the overlap and the order are what hide the seam.
 */
export function IsotypeDiagonal({
  className,
  'aria-label': ariaLabel,
  ...props
}: IsotypeDiagonalProps) {
  return (
    <div
      role={ariaLabel ? 'img' : undefined}
      aria-label={ariaLabel}
      aria-hidden={ariaLabel ? undefined : true}
      className={cn('aspect-square', className)}
      {...props}
    >
      <svg viewBox={`0 0 ${SIZE} ${SIZE}`} className="h-full w-full" aria-hidden="true">
        <rect x={0} y={0} width={SIZE} height={CELL} fill={ISOTYPE_COLORS.blue} />
        <rect x={0} y={0} width={CELL} height={CELL} fill={ISOTYPE_COLORS.purple} />
        <polygon points="100,0 75,25 75,75 100,75" fill={ISOTYPE_COLORS.green} />
        <rect x={0} y={SIZE - CELL} width={SIZE} height={CELL} fill={ISOTYPE_COLORS.red} />
        <polygon points="0,25 25,25 25,75 0,100" fill={ISOTYPE_COLORS.magenta} />
        <rect x={SIZE - CELL} y={SIZE - CELL} width={CELL} height={CELL} fill={ISOTYPE_COLORS.brown} />
        <polygon points="75,25 75,75 25,75" fill={ISOTYPE_COLORS.yellow} />
        <polygon points="25,25 75,25 25,75" fill="none" />
      </svg>
    </div>
  );
}