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

export const iconButtonRootVariants = cva(
  [
    'flex items-center justify-center',
    'rounded-[var(--border-radius-round)]',
    'web:outline-none web:focus:outline-none web:focus-visible:outline-none',
    TRANSITION_COLORS,
    'data-[disabled=true]:opacity-[var(--opacity-disabled)]',
    DISABLED_CURSOR,
    'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-[var(--color-stroke-ring)] web:data-[focus-visible=true]:ring-offset-2',
  ],
  {
    variants: {
      variant: {
        solid: [],
        subtle: [],
        ghost: ['bg-transparent'],
      },
      color: {
        neutral: [],
        action: [],
        danger: [],
      },
      size: {
        default: 'h-11 w-11 min-w-11 shrink-0 p-2.5',
        small: 'h-8 w-8 min-w-8 shrink-0 p-1.5',
      },
    },
    compoundVariants: [
      // ── solid × color ───────────────────────────────────────────────────
      {
        variant: 'solid',
        color: 'neutral',
        className: [
          'bg-surface-primary border border-stroke-secondary',
          Platform.select({
            default: 'data-[active=true]:bg-surface-primary-active',
            web: 'data-[hover=true]:bg-surface-primary-hover data-[active=true]:data-[hover=true]:bg-surface-secondary-active',
          }),
        ],
      },
      {
        variant: 'solid',
        color: 'action',
        className: [
          'bg-surface-action-strong',
          Platform.select({
            default: 'data-[active=true]:bg-surface-action-strong-active',
            web: 'data-[hover=true]:bg-surface-action-strong-hover data-[active=true]:data-[hover=true]:bg-surface-action-strong-active',
          }),
        ],
      },
      {
        variant: 'solid',
        color: 'danger',
        className: [
          'bg-surface-danger-strong',
          Platform.select({
            default: 'data-[active=true]:bg-surface-danger-strong-active',
            web: 'data-[hover=true]:bg-surface-danger-strong-hover data-[active=true]:data-[hover=true]:bg-surface-danger-strong-active',
          }),
        ],
      },

      // ── 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',
          }),
        ],
      },

      // ── ghost × color ──────────────────────────────────────────────────
      {
        variant: 'ghost',
        color: 'neutral',
        className: [
          Platform.select({
            default: 'data-[active=true]:bg-surface-primary-active',
            web: 'data-[hover=true]:bg-surface-primary-hover data-[active=true]:data-[hover=true]:bg-surface-secondary-active',
          }),
        ],
      },
      {
        variant: 'ghost',
        color: 'action',
        className: [
          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: 'ghost',
        color: 'danger',
        className: [
          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',
          }),
        ],
      },
    ],
    defaultVariants: {
      variant: 'solid',
      color: 'neutral',
      size: 'default',
    },
  },
);

export const iconButtonGlyphVariants = cva([], {
  variants: {
    size: {
      default: 'size-6',
      small: 'size-5',
    },
  },
  defaultVariants: {
    size: 'default',
  },
});

export const iconButtonIconColorVariants = cva([], {
  variants: {
    variant: {
      solid: [],
      subtle: [],
      ghost: [],
    },
    color: {
      neutral: [],
      action: [],
      danger: [],
    },
  },
  compoundVariants: [
    { variant: 'solid', color: 'neutral', className: 'text-content-primary' },
    { variant: 'solid', color: 'action', className: 'text-content-action-on-strong' },
    { variant: 'solid', color: 'danger', className: 'text-content-danger-on-strong' },
    { variant: 'subtle', color: 'neutral', className: 'text-content-primary' },
    { variant: 'subtle', color: 'action', className: 'text-content-action-on-subtle' },
    { variant: 'subtle', color: 'danger', className: 'text-content-danger-on-subtle' },
    { variant: 'ghost', color: 'neutral', className: 'text-content-primary' },
    { variant: 'ghost', color: 'action', className: 'text-content-action' },
    { variant: 'ghost', color: 'danger', className: 'text-content-danger' },
  ],
  defaultVariants: {
    variant: 'solid',
    color: 'neutral',
  },
});

export type IconButtonVariantProps = VariantProps<typeof iconButtonRootVariants>;