import { Platform } from 'react-native';
import { cva, type VariantProps } from 'class-variance-authority';
import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/constants';

const chipInteractiveRoot = [
  TRANSITION_COLORS,
  'data-[disabled=true]:opacity-[var(--opacity-disabled)]',
  DISABLED_CURSOR,
  Platform.select({
    web: [
      'outline-none',
      'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-stroke-focus web:data-[focus-visible=true]:ring-offset-2',
    ].join(' '),
    default: '',
  }),
];

export const chipRootVariants = cva(
  ['flex-row items-center justify-center self-start overflow-hidden', ...chipInteractiveRoot],
  {
    variants: {
      variant: {
        subtle: [],
        outline: ['bg-transparent', 'border'],
      },
      color: {
        neutral: [],
        action: [],
        danger: [],
        warning: [],
        success: [],
        info: [],
      },
      size: {
        default: 'h-8 max-h-8 min-h-8 gap-1.5 px-3 rounded-lg',
        small: 'h-6 max-h-6 min-h-6 gap-1 px-1.5 rounded-md',
        xsmall: 'h-4 max-h-4 min-h-4 gap-0.5 px-1 rounded-sm',
      },
    },
    compoundVariants: [
      // ── subtle × color ────────────────────────────────────────────────────
      {
        variant: 'subtle',
        color: 'neutral',
        className: [
          'bg-surface-neutral-subtle',
          Platform.select({
            default: 'data-[active=true]:bg-surface-neutral-subtle-active',
            web: 'data-[hover=true]:bg-surface-neutral-subtle-hover data-[active=true]:data-[hover=true]:bg-surface-neutral-subtle-active',
          }),
        ],
      },
      {
        variant: 'subtle',
        color: 'action',
        className: [
          'bg-surface-action-subtle',
          Platform.select({
            default: 'data-[active=true]:bg-surface-action-subtle-active',
            web: 'data-[hover=true]:bg-surface-action-subtle-hover data-[active=true]:data-[hover=true]:bg-surface-action-subtle-active',
          }),
        ],
      },
      {
        variant: 'subtle',
        color: 'danger',
        className: [
          'bg-surface-danger-subtle',
          Platform.select({
            default: 'data-[active=true]:bg-surface-danger-subtle-active',
            web: 'data-[hover=true]:bg-surface-danger-subtle-hover data-[active=true]:data-[hover=true]:bg-surface-danger-subtle-active',
          }),
        ],
      },
      {
        variant: 'subtle',
        color: 'warning',
        className: [
          'bg-surface-warning-subtle',
          Platform.select({
            default: 'data-[active=true]:bg-surface-warning-subtle-active',
            web: 'data-[hover=true]:bg-surface-warning-subtle-hover data-[active=true]:data-[hover=true]:bg-surface-warning-subtle-active',
          }),
        ],
      },
      {
        variant: 'subtle',
        color: 'success',
        className: [
          'bg-surface-success-subtle',
          Platform.select({
            default: 'data-[active=true]:bg-surface-success-subtle-active',
            web: 'data-[hover=true]:bg-surface-success-subtle-hover data-[active=true]:data-[hover=true]:bg-surface-success-subtle-active',
          }),
        ],
      },
      {
        variant: 'subtle',
        color: 'info',
        className: [
          'bg-surface-info-subtle',
          Platform.select({
            default: 'data-[active=true]:bg-surface-info-subtle-active',
            web: 'data-[hover=true]:bg-surface-info-subtle-hover data-[active=true]:data-[hover=true]:bg-surface-info-subtle-active',
          }),
        ],
      },

      // ── outline × color ───────────────────────────────────────────────────
      {
        variant: 'outline',
        color: 'neutral',
        className: [
          'border-stroke-primary',
          Platform.select({
            default: 'data-[active=true]:bg-surface-neutral-subtle',
            web: 'data-[hover=true]:bg-surface-neutral-subtle-hover data-[active=true]:data-[hover=true]:bg-surface-neutral-subtle-active',
          }),
        ],
      },
      {
        variant: 'outline',
        color: 'action',
        className: [
          'border-stroke-action',
          Platform.select({
            default: 'data-[active=true]:bg-surface-action-subtle',
            web: 'data-[hover=true]:bg-surface-action-subtle-hover data-[active=true]:data-[hover=true]:bg-surface-action-subtle-active',
          }),
        ],
      },
      {
        variant: 'outline',
        color: 'danger',
        className: [
          'border-stroke-danger',
          Platform.select({
            default: 'data-[active=true]:bg-surface-danger-subtle',
            web: 'data-[hover=true]:bg-surface-danger-subtle-hover data-[active=true]:data-[hover=true]:bg-surface-danger-subtle-active',
          }),
        ],
      },
      {
        variant: 'outline',
        color: 'warning',
        className: [
          'border-stroke-warning',
          Platform.select({
            default: 'data-[active=true]:bg-surface-warning-subtle',
            web: 'data-[hover=true]:bg-surface-warning-subtle-hover data-[active=true]:data-[hover=true]:bg-surface-warning-subtle-active',
          }),
        ],
      },
      {
        variant: 'outline',
        color: 'success',
        className: [
          'border-stroke-success',
          Platform.select({
            default: 'data-[active=true]:bg-surface-success-subtle',
            web: 'data-[hover=true]:bg-surface-success-subtle-hover data-[active=true]:data-[hover=true]:bg-surface-success-subtle-active',
          }),
        ],
      },
      {
        variant: 'outline',
        color: 'info',
        className: [
          'border-stroke-info',
          Platform.select({
            default: 'data-[active=true]:bg-surface-info-subtle',
            web: 'data-[hover=true]:bg-surface-info-subtle-hover data-[active=true]:data-[hover=true]:bg-surface-info-subtle-active',
          }),
        ],
      },
    ],
    defaultVariants: {
      variant: 'subtle',
      color: 'neutral',
      size: 'default',
    },
  },
);

export const chipLabelVariants = cva(['font-sans-medium'], {
  variants: {
    variant: {
      subtle: 'text-content-primary',
      outline: 'text-content-primary',
    },
    color: {
      neutral: [],
      action: [],
      danger: [],
      warning: [],
      success: [],
      info: [],
    },
    size: {
      default: 'body-md',
      small: 'body-sm',
      xsmall: 'body-xs',
    },
  },
  compoundVariants: [
    { variant: 'outline', color: 'action', className: 'text-content-action' },
    { variant: 'outline', color: 'danger', className: 'text-content-danger' },
    { variant: 'outline', color: 'warning', className: 'text-content-warning' },
    { variant: 'outline', color: 'success', className: 'text-content-success' },
    { variant: 'outline', color: 'info', className: 'text-content-info' },
  ],
  defaultVariants: {
    variant: 'subtle',
    color: 'neutral',
    size: 'default',
  },
});

export const chipIconVariants = cva(['shrink-0'], {
  variants: {
    size: {
      default: 'size-5 data-[icon=inline-start]:-ms-1.5 data-[icon=inline-end]:-me-1.5',
      small: 'size-4 data-[icon=inline-start]:-ms-0.5 data-[icon=inline-end]:-me-0.5',
      xsmall: 'size-2.5 data-[icon=inline-start]:-ms-px data-[icon=inline-end]:-me-px',
    },
    color: {
      neutral: 'text-content-primary',
      action: 'text-content-action',
      danger: 'text-content-danger',
      warning: 'text-content-warning',
      success: 'text-content-success',
      info: 'text-content-info',
    },
  },
  defaultVariants: {
    size: 'default',
    color: 'neutral',
  },
});

export const chipAvatarVariants = cva(['shrink-0 rounded-full overflow-hidden'], {
  variants: {
    size: {
      default: 'size-5 -ms-1.5',
      small: 'size-4 -ms-0.5',
      xsmall: 'size-2.5 -ms-px',
    },
  },
  defaultVariants: {
    size: 'default',
  },
});

export type ChipVariantProps = VariantProps<typeof chipRootVariants>;