import type { ReactElement, ButtonHTMLAttributes } from 'react';
import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from '@/lib/utils';
import { useAppSelector } from '@/hooks/redux-hooks';

const secondaryButtonVariants = cva(
  'inline-flex items-center justify-center px-3 py-1.5 rounded text-xs font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer',
  {
    variants: {
      variant: {
        default: 'bg-[#23dce1] text-[#112868] hover:bg-[#112868] hover:text-[#23dce1]',
        disabled: 'bg-[#23dce1] text-[#112868] opacity-50',
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  }
);

interface SecondaryButtonProps
  extends ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof secondaryButtonVariants> {
  children: React.ReactNode;
}

export const SecondaryButton = ({
  children,
  variant,
  className,
  disabled,
  ...props
}: SecondaryButtonProps): ReactElement => {
  const buttonVariant = disabled ? 'disabled' : variant || 'default';
  const { theme } = useAppSelector((state) => state.theme);
  const { roles } = useAppSelector((state) => state.auth);

  // Check if user is tenant admin (not super_admin) or if we're on a tenant route
  let rolesArray: string[] = [];
  if (Array.isArray(roles)) {
    rolesArray = roles;
  } else if (typeof roles === 'string') {
    try {
      rolesArray = JSON.parse(roles);
    } catch {
      rolesArray = [];
    }
  }
  const isSuperAdmin = rolesArray.includes('super_admin');
  const isTenantAdmin = !isSuperAdmin && rolesArray.length > 0;
  
  // Check if we're on a tenant route (for login page where user might not be authenticated)
  const isTenantRoute = typeof window !== 'undefined' && window.location.pathname.startsWith('/tenant');
  
  // Use theme colors for tenant admin or tenant routes, default colors for super admin
  const shouldUseTheme = (isTenantAdmin || (isTenantRoute && !isSuperAdmin)) && theme;
  const primaryColor = shouldUseTheme && theme.primary_color ? theme.primary_color : '#112868';
  const secondaryColor = shouldUseTheme && theme.secondary_color ? theme.secondary_color : '#23dce1';

  return (
    <button
      className={cn(secondaryButtonVariants({ variant: buttonVariant }), className)}
      style={
        buttonVariant === 'default'
          ? {
              backgroundColor: secondaryColor,
              color: primaryColor,
            }
          : buttonVariant === 'disabled'
          ? {
              backgroundColor: secondaryColor,
              color: primaryColor,
              opacity: 0.5,
            }
          : undefined
      }
      onMouseEnter={(e) => {
        if (buttonVariant === 'default' && !disabled) {
          e.currentTarget.style.backgroundColor = primaryColor;
          e.currentTarget.style.color = secondaryColor;
        }
      }}
      onMouseLeave={(e) => {
        if (buttonVariant === 'default' && !disabled) {
          e.currentTarget.style.backgroundColor = secondaryColor;
          e.currentTarget.style.color = primaryColor;
        }
      }}
      disabled={disabled}
      {...props}
    >
      {children}
    </button>
  );
};