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

// ── Portal container ────────────────────────────────────────

export const dialogPortalVariants = cva([
  'flex-1',
  'absolute inset-0',
  'web:fixed web:inset-0 web:z-50',
]);

// ── Overlay ─────────────────────────────────────────────────

export const dialogOverlayVariants = cva([
  'absolute inset-0',
  'bg-surface-backdrop',
  'web:transition-opacity web:duration-200 web:ease-out',
  'web:data-[state=entering]:opacity-0',
  'web:data-[state=open]:opacity-100',
  'web:data-[state=closed]:opacity-0 web:data-[state=closed]:duration-150',
  'web:motion-reduce:transition-none web:motion-reduce:duration-0',
]);

// ── Popup (renamed from dialogContentVariants) ──────────────

export const dialogPopupVariants = cva(
  [
    'bg-surface-primary',
    'rounded-lg',
    Platform.select({ web: 'shadow-lg', default: '' }),
    'max-h-[85vh] overflow-hidden',
    'web:transition-[opacity,transform] web:duration-200 web:ease-out',
    'web:data-[state=entering]:opacity-0 web:data-[state=entering]:scale-[0.96]',
    'web:data-[state=open]:opacity-100 web:data-[state=open]:scale-100',
    'web:data-[state=closed]:opacity-0 web:data-[state=closed]:scale-[0.96] web:data-[state=closed]:duration-150',
    'web:motion-reduce:transition-none web:motion-reduce:duration-0',
  ],
  {
    variants: {
      size: {
        xs: 'w-[90%] max-w-xs',
        sm: 'w-[90%] max-w-sm',
        md: 'w-[90%] max-w-md',
        lg: 'w-[90%] max-w-lg',
        xl: 'w-[90%] max-w-xl',
        full: 'w-full mx-4',
      },
    },
    defaultVariants: {
      size: 'md',
    },
  },
);

// ── Header ──────────────────────────────────────────────────

export const dialogHeaderVariants = cva([
  'flex-col items-start justify-between shrink-0',
  'pl-6 pr-14 py-4',
]);

// ── Title ───────────────────────────────────────────────────

export const dialogTitleVariants = cva(['heading-sm', 'text-content-primary'], {
  variants: {
    severity: {
      neutral: '',
      danger: '',
      warning: '',
      success: '',
    },
  },
  defaultVariants: {
    severity: 'neutral',
  },
});

// ── Title Icon ──────────────────────────────────────────────

export const dialogTitleIconVariants = cva(['size-5'], {
  variants: {
    severity: {
      neutral: '',
      danger: 'text-content-danger',
      warning: 'text-content-warning',
      success: 'text-content-success',
    },
  },
  defaultVariants: {
    severity: 'neutral',
  },
});

// ── Description ─────────────────────────────────────────────

export const dialogDescriptionVariants = cva(['body-sm mt-1', 'text-content-secondary']);

// ── Content (renamed from dialogBodyVariants) ───────────────

export const dialogContentVariants = cva(['px-6 py-0 gap-2 shrink min-h-0'], {
  variants: {
    fullBleed: {
      true: 'px-0',
      false: '',
    },
  },
  defaultVariants: {
    fullBleed: false,
  },
});

// ── Text ────────────────────────────────────────────────────

export const dialogTextVariants = cva(['body-md', 'text-content-primary']);

// ── Footer ──────────────────────────────────────────────────

export const dialogFooterVariants = cva([
  'flex-row items-center justify-end shrink-0',
  'gap-2 px-6 pt-4 pb-6',
]);

// ── Close ───────────────────────────────────────────────────

export const dialogCloseVariants = cva([
  'absolute right-[14px] top-[14px]',
  'min-w-[32px] min-h-[32px] items-center justify-center',
  'p-[6px] rounded-full',
  TRANSITION_COLORS,
  Platform.select({
    default: 'data-[active=true]:opacity-70',
    web: [
      'data-[hover=true]:bg-surface-primary-hover',
      'data-[active=true]:bg-surface-primary-active',
      'data-[focus-visible=true]:ring-2 data-[focus-visible=true]:ring-stroke-focus data-[focus-visible=true]:ring-offset-2',
    ].join(' '),
  }),
]);

// ── Close Icon ──────────────────────────────────────────────

export const dialogCloseIconVariants = cva(['size-5 text-content-tertiary']);

// ── Exported types ──────────────────────────────────────────

export type DialogVariantProps = VariantProps<typeof dialogPopupVariants> & {
  fullBleed?: boolean;
};

export type DialogTitleVariantProps = VariantProps<typeof dialogTitleVariants>;