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

export const inputRootVariants = cva(
  [
    'w-full flex-row items-center overflow-hidden',
    'bg-surface-primary',
    'border-solid border-stroke-primary',
    'web:border-default native:border-[length:var(--border-width-default)]',
    'rounded-[var(--border-radius-default)]',
    TRANSITION_COLORS,
    'data-[disabled=true]:bg-surface-secondary',
    'data-[disabled=true]:opacity-[var(--opacity-disabled)]',
    DISABLED_CURSOR,
    'data-[readonly=true]:cursor-default',
    'data-[readonly=true]:bg-surface-secondary',
    'web:data-[hover=true]:data-[focus=false]:data-[invalid=false]:border-stroke-hover',
    // Web: inset ring avoids a border-width change so the shell never shifts on focus and
    // no per-size padding compensation is required. Recolor the border to match the ring so
    // the two read as a single focus outline instead of a gray border + colored ring.
    'web:data-[focus=true]:ring-inset',
    'web:data-[focus=true]:ring-[length:var(--border-width-focused)]',
    'web:data-[focus=true]:data-[invalid=false]:ring-stroke-action',
    'web:data-[focus=true]:data-[invalid=false]:border-stroke-action',
    'web:data-[focus=true]:data-[invalid=true]:ring-stroke-danger',
    'web:data-[focus=true]:data-[invalid=true]:border-stroke-danger',
    // Native: thicker border on focus; size variants below subtract a hairline of padding
    // so layout doesn't shift by 1px.
    'native:data-[focus=true]:border-[length:var(--border-width-focused)]',
    'native:data-[field-state=focused]:border-stroke-action',
    'native:data-[field-state=focused-invalid]:border-stroke-danger',
    'data-[invalid=true]:border-stroke-danger',
  ],
  {
    variants: {
      variant: {
        outline: [],
      },
      size: {
        default: [
          'h-11 min-h-11 px-4 py-3 gap-4',
          'native:data-[focus=true]:px-[calc(var(--spacing-4)-var(--spacing-px))]',
          'native:data-[focus=true]:py-[calc(var(--spacing-3)-var(--spacing-px))]',
        ],
        small: [
          'h-8 min-h-8 px-3 py-2 gap-1.5',
          'native:data-[focus=true]:px-[calc(var(--spacing-3)-var(--spacing-px))]',
          'native:data-[focus=true]:py-[calc(var(--spacing-2)-var(--spacing-px))]',
        ],
      },
    },
    defaultVariants: {
      variant: 'outline',
      size: 'default',
    },
  },
);

export const inputFieldVariants = cva(
  [
    // `min-w-0` is critical on web: without it, a flex item defaults to `min-width: auto`,
    // which is the input's intrinsic content width. When the shell ancestor uses
    // `overflow-hidden` (for rounded corners), focusing the input via `<label htmlFor>`
    // would make the browser auto-scroll the shell to bring the input into view — visually
    // collapsing the left padding to zero. With `min-w-0` the field can shrink below its
    // intrinsic width so the shell never overflows and never gets scrolled.
    'flex-1 min-w-0 justify-center bg-transparent p-0',
    'text-content-primary',
    'placeholder:text-content-tertiary',
    'web:outline-none',
    'tracking-normal',
  ],
  {
    variants: {
      size: {
        default: 'text-[0.875rem]',
        small: 'text-[0.75rem]',
      },
    },
    defaultVariants: {
      size: 'default',
    },
  },
);

export const inputSlotVariants = cva(['items-center justify-center self-center shrink-0']);

export const inputIconVariants = cva(['text-content-tertiary'], {
  variants: {
    size: {
      default: 'size-5',
      small: 'size-4',
    },
  },
  defaultVariants: {
    size: 'default',
  },
});

export const inputFieldPlaceholderVariants = cva(['accent-content-tertiary']);

export type InputVariantProps = VariantProps<typeof inputRootVariants>;