import {
  Avatar,
  AvatarBadge,
  AvatarFallback,
  AvatarGroup,
  AvatarGroupCount,
} from '@/components/avatar';
import type { AvatarProps } from '@/components/avatar';
import { PALETTES } from './axis-values';
import type { Entry } from './types';

/**
 * Avatar's own axes — not shared with any other component (no `surface` or
 * `ghost` treatment, and a six-rung ladder that starts two steps below every
 * control), so like the Alert axes these have no home in `axis-values.ts`.
 * Exported so `pages/avatars.tsx` and `pages/avatars-figma.tsx` read the same
 * list instead of a second hand-copy.
 */
export const AVATAR_VARIANTS = ['solid', 'subtle', 'outline'] as const;
export const AVATAR_SIZES = ['2xs', 'xs', 'sm', 'md', 'lg', 'xl'] as const;
export const AVATAR_SHAPES = ['circle', 'square'] as const;

export const avatar: Entry = {
  slug: 'avatar',
  name: 'Avatar',
  group: 'Data display',
  description:
    'A person or entity, as an image with a text fallback. Carries a third axis CBAR draws explicitly — `shape` — alongside treatment and palette.',
  imports: { subpath: 'avatar', names: ['Avatar', 'AvatarFallback'] },
  figma: {
    set: 'avatar',
    /* `shape=shape` is a typo on the canvas for the round one — corrected here
       rather than in Figma, where renaming a variant breaks every instance. */
    valueMap: {
      shape: { circle: 'shape' },
      colorPalette: { tertiary: 'third', black: 'neutral' },
    },
    pin: { 'avatar-type': 'initials' },
  },

  axes: {
    variant: AVATAR_VARIANTS,
    colorPalette: PALETTES,
    size: AVATAR_SIZES,
    shape: AVATAR_SHAPES,
  },
  defaults: { variant: 'subtle', colorPalette: 'primary', size: 'md', shape: 'circle' },
  render: (props) => (
    <Avatar {...(props as AvatarProps)}>
      <AvatarFallback>CB</AvatarFallback>
    </Avatar>
  ),

  matrices: [
    { title: 'Variant × colorPalette', rows: 'variant', cols: 'colorPalette', pin: { size: 'md' } },
    {
      title: 'Variant × size',
      description: 'CBAR draws six rungs: 24 / 32 / 36 / 40 / 48 / 64px.',
      rows: 'variant',
      cols: 'size',
      pin: { colorPalette: 'primary' },
    },
    {
      title: 'Shape × size',
      description: 'A square avatar keeps an 8px corner at every size rather than scaling it.',
      rows: 'shape',
      cols: 'size',
      pin: { variant: 'subtle', colorPalette: 'primary' },
    },
  ],

  compositions: [
    {
      name: 'Status badge',
      render: () => (
        <div className="flex items-center gap-4">
          <Avatar size="lg">
            <AvatarFallback>CB</AvatarFallback>
            <AvatarBadge />
          </Avatar>
          <Avatar size="lg" shape="square" colorPalette="tertiary">
            <AvatarFallback>NP</AvatarFallback>
            <AvatarBadge className="bg-destructive" />
          </Avatar>
        </div>
      ),
    },
    {
      name: 'Group with overflow',
      description: 'Overlapping stack, with a count for whatever does not fit.',
      render: () => (
        <AvatarGroup>
          <Avatar>
            <AvatarFallback>AA</AvatarFallback>
          </Avatar>
          <Avatar colorPalette="secondary">
            <AvatarFallback>BB</AvatarFallback>
          </Avatar>
          <Avatar colorPalette="tertiary">
            <AvatarFallback>CC</AvatarFallback>
          </Avatar>
          <AvatarGroupCount>+7</AvatarGroupCount>
        </AvatarGroup>
      ),
    },
  ],

  spec: {
    caption:
      "Measured off CBAR's avatar component set (`2446:757`) through the Figma bridge — `figma_css` for the box and the corner, `figma_text` for the type. Every rung matches what the kit draws, which is why there is no note here about a compromise. The square corner is `radius/md` at all six sizes rather than a scaling one, so a 24px avatar keeps the same 8px as a 64px one; the round shape is `radius/pill`.",
    head: ['Size', 'Box', 'Text', 'Radius (square)'],
    rows: [
      ['2xs', '24px', '10px', '8px'],
      ['xs', '32px', '12px', '8px'],
      ['sm', '36px', '14px', '8px'],
      ['md', '40px', '16px', '8px'],
      ['lg', '48px', '20px', '8px'],
      ['xl', '64px', '24px', '8px'],
    ],
  },
};