/**
 * CounterMeasure brand wrappers.
 *
 * React wrappers render the same semantic SVGs and CSS classes as the vanilla
 * brand helpers in `src/components/brand`.
 */

import * as React from 'react'

import {
  getBrandSizeClass,
  getConnectorLogoInitial,
  getConnectorLogoSizeClass,
  getConnectorLogoTone,
  type BrandSize,
  type ConnectorLogoSize,
  type WordmarkVariant,
} from '../../components/brand'
import { cn } from '../primitives/utils'

export interface DiamondProps extends React.SVGAttributes<SVGSVGElement> {
  size?: BrandSize | number
  label?: string
  decorative?: boolean
}

export function Diamond({
  className,
  size = 24,
  label = 'CounterMeasure diamond',
  decorative = true,
  ...props
}: DiamondProps) {
  const sizeClass = getBrandSizeClass('cmm-diamond', size)
  const accessibilityProps = decorative
    ? { 'aria-hidden': true }
    : { role: 'img', 'aria-label': label }

  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 46.64 46.64"
      xmlns="http://www.w3.org/2000/svg"
      className={cn('cmm-diamond', sizeClass, className)}
      {...accessibilityProps}
      {...props}
    >
      <rect
        x="2.62"
        y="16.42"
        width="13.8"
        height="13.8"
        rx="0.57"
        transform="translate(-13.7 13.56) rotate(-45)"
        className="cmm-diamond__foreground"
      />
      <rect
        x="16.42"
        y="30.22"
        width="13.8"
        height="13.8"
        rx="0.57"
        transform="translate(-19.42 27.36) rotate(-45)"
        className="cmm-diamond__slate"
      />
      <rect
        x="16.42"
        y="2.62"
        width="13.8"
        height="13.8"
        rx="0.57"
        transform="translate(0.1 19.28) rotate(-45)"
        className="cmm-diamond__orange"
      />
    </svg>
  )
}

export interface WordmarkProps extends React.HTMLAttributes<HTMLDivElement> {
  size?: BrandSize | number
  variant?: WordmarkVariant
  subtitle?: string
  label?: string
  decorative?: boolean
}

export function Wordmark({
  className,
  size = 32,
  variant = 'auto',
  subtitle,
  label = 'CounterMeasure',
  decorative = false,
  ...props
}: WordmarkProps) {
  const width = Math.round(size * (220 / 32) * 100) / 100
  const accessibilityProps = decorative
    ? { 'aria-hidden': true }
    : { role: 'img', 'aria-label': label }

  return (
    <div
      className={cn('cmm-wordmark', `cmm-wordmark--${variant}`, className)}
      {...accessibilityProps}
      {...props}
    >
      <svg
        width={width}
        height={size}
        viewBox="0 0 220 32"
        xmlns="http://www.w3.org/2000/svg"
        className="cmm-wordmark__svg"
        aria-hidden="true"
      >
        <g transform="translate(0,3)">
          <rect
            x="1.78"
            y="11.16"
            width="9.4"
            height="9.4"
            rx="0.4"
            transform="translate(-9.32 9.22) rotate(-45)"
            className="cmm-wordmark__foreground"
          />
          <rect
            x="11.16"
            y="20.54"
            width="9.4"
            height="9.4"
            rx="0.4"
            transform="translate(-13.21 18.6) rotate(-45)"
            className="cmm-wordmark__slate"
          />
          <rect
            x="11.16"
            y="1.78"
            width="9.4"
            height="9.4"
            rx="0.4"
            transform="translate(0.07 13.11) rotate(-45)"
            className="cmm-wordmark__orange"
          />
        </g>
        <text
          x="42"
          y="22"
          className="cmm-wordmark__text"
          fontFamily="Outfit, sans-serif"
          fontSize="18"
          fontWeight="600"
          letterSpacing="-0.01em"
        >
          CounterMeasure
        </text>
      </svg>
      {subtitle !== undefined ? <span className="cmm-wordmark__subtitle">{subtitle}</span> : null}
    </div>
  )
}

export interface ConnectorLogoProps extends React.HTMLAttributes<HTMLSpanElement> {
  name: string
  src?: string
  size?: ConnectorLogoSize
  label?: string
  decorative?: boolean
}

export function ConnectorLogo({
  className,
  name,
  src,
  size = 32,
  label,
  decorative = false,
  children,
  ...props
}: ConnectorLogoProps) {
  const hasAsset = src !== undefined || children !== undefined
  const accessibilityProps = decorative
    ? { 'aria-hidden': true }
    : { role: 'img', 'aria-label': label ?? `${name} connector` }

  return (
    <span
      className={cn(
        'cmm-connector-logo',
        getConnectorLogoSizeClass(size),
        `cmm-connector-logo--vendor-${getConnectorLogoTone(name)}`,
        hasAsset && 'cmm-connector-logo--asset',
        className
      )}
      {...accessibilityProps}
      {...props}
    >
      {src !== undefined ? (
        <img className="cmm-connector-logo__asset" src={src} alt="" aria-hidden="true" />
      ) : children !== undefined ? (
        <span className="cmm-connector-logo__asset" aria-hidden="true">
          {children}
        </span>
      ) : (
        getConnectorLogoInitial(name)
      )}
    </span>
  )
}

export type CountermeasureLogoProps = DiamondProps
export type CounterMeasureLogoProps = DiamondProps
export type CountermeasureWordmarkProps = WordmarkProps
export type CounterMeasureWordmarkProps = WordmarkProps

export const CountermeasureLogo = Diamond
export const CounterMeasureLogo = Diamond
export const CountermeasureWordmark = Wordmark
export const CounterMeasureWordmark = Wordmark
